tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Lightweight (<1kb gzipped) 12 column grid system, built with css grid.
Have a look at those examples:
tb-grid
: https://codepen.io/bersling/pen/RwKzdgV (Original: https://codepen.io/WeeHorse/pen/PQydzW)Simply fork the demos if you want to play around with tb-grid
.
tb-grid
?Bootstrap's grid system is awesome. With very little code you can add responsiveness to your html in a declarative manner. The use of 12 columns make the grid system extremely versatile since you can divide it into nice fractions (12/2, 12/3, 12/4, 12/6 - they all produce integers!).
However, there are also some things bootstrap didn't get right.
.container
> .row
> .col
. It would be great if we could drop the .container
..container
and .row
aren't that exotic that there would be no accidental collisions.tb-grid
addresses all those gripes with bootstrap and frankly with all other grid systems we know (foundation, skeleton, ...).
tb-grid
?tb-grid
is a reverse engineered bootstrap 12 column grid built with CSS grid. CSS grid allows us to build a solution in around 50 lines of scss, which translates into less than 500 lines of css (~1kb gzipped). It also allows us to drop one level of nesting that was required in bootstrap, since css grid supports gutters out of the box. Finally we made sure that everything lives under the tb-grid-
prefix, so you'd have to be really unlucky for someone to accidentally use a class declared by this library.
tb-grid
?There are a couple of ways how you can get tb-grid
, choose what suits you best.
Copy the code from tb-grid.scss
to your project.
Copy the code from tb-grid.css
to your project.
npm install tb-grid
and include the scss or css file from there. (node_modules/tb-grid/tb-grid.scss
or node_modules/tb-grid/tb-grid.css
)
You could use unkpg to get the file: <link rel="stylesheet" href="https://unpkg.com/[email protected]/tb-grid.css">
tb-grid
?It is pretty similar to bootstrap, with the exception that it's simpler yet with better scoping:
.tb-grid
to an HTML element..tb-grid-<breakpoint>-<cols>
, like .tb-grid-sm-6
or .tb-grid-md-8
to the direct children. The breakpoints are the same ones as in bootstrap (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px
). The column argument can be between 1
and 12
..tb-grid-gap-<gap size>
to define the gap size
. Here, <gap-size>
can be a value between (and including) 1
and 50
.Complete example:
<div class="tb-grid tb-grid-gap-10">
<div class="tb-grid-sm-6">
Item 1
</div>
<div class="tb-grid-sm-6">
Item 2
</div>
<div class="tb-grid-sm-4 tb-grid-lg-6">
Item 3
</div>
<div class="tb-grid-sm-8 tb-grid-lg-6">
Item 4
</div>
</div>
No tb-grid-gap-<px>
value means no gaps / gutters, since that's the only default that is not arbitrary, and it's really easy to add a gap. We currently only support symmetrical gaps up to 50px
to keep the bundle size small, but you can easily add your own classes to extend the functionality. For example .custom-gap {row-gap: 60px; column-gap: min(20px, 8%)}
.
Note: When the tb-grid
parent is smaller than column-gap * 12
, the column-gap
will be squished together to prevent overflows. For example, a column-gap
of 30px
becomes problematic when the tb-grid
parent is 360px
. That's why the tb-grid-gap-<px>
classes use column-gap: min(<px>, 8%)
, to squish the column gutters when it gets too tight.
tb-grid
have?tb-grid
?It is also fair to ask yourself whether you even want a 12 column grid system after all. It is really simple to add the grid on a per occasion basis, something like this:
.dashboard {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
@media(min-width: $my-breakpoint-sm) {
grid-template-columns: 1fr 1fr;
}
}
You can easily use low level css to achieve the same thing and avoid introducing too much clutter into the html. Over the years the actual CSS grid API might also be more well known amongst devs than the "bootstrap API", which tb-grid
builds upon. It even solves the problem of the squished gutters and might be computationally more efficient, even though I haven't tested if there's any actual difference.
You can even achieve a cool responsive experience without media queries:
.car-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Demo: https://jsfiddle.net/bersling/d3hjs5zv/3/
However, to achieve a consistent layout across a page, the 12 column grid system is a really easy-to-use and powerful tool. We've found it especially helpful on things like landing pages, where you often have different sections, jumbos etc. that should be aligned with one another but still responsive. So in our opinion, yes, tb-grid does make your life easier ๐
1.0.0
.tb-grid
! Why don't you just give it a spin and let us know what you think? You can just open an issue or drop us an email at daniel
@
taskbase
.
com