Buzuki
A mobile-first, responsive BEM flavoured flexbox css grid system.
A mobile-first, responsive BEM flavoured flexbox css grid system.
There are 5 viewport sizes out-of-the-box, each with an associated @tag.
Modifiers with tags will only apply when the viewport reaches the size specified.
Works across all viewport sizes
Minimum viewport size: 0px
Minimum viewport size: 544px
Minimum viewport size: 768px
Minimum viewport size: 992px
Minimum viewport size: 1200px
Each component may be used independently or in unison, you decide.
Defines a section of page content contained within a 1200px (max) wide area.
Defines a horizontal grouping of cells that can be mangled to meet even the gnarliest of layouts.
Defines a region of content that abides by the rules governed upon it, keeping your pages sane.
See the Pen Buzuki grid example by Buzuki (@pixls) on CodePen.
All modifiers (except Cell--has-rows) support viewport @tags.
Like what Row--flow-reversed is doing, but only want it on desktop? Try Row--flow-reversed@xl
Does Cell--6/12 tickle your fancy, but you want it to be a Cell--12/12 on mobile? Throw these two together "Cell--12/12@xs Cell--6/12@sm"
Bada bing, bada boom.
If you want cells to appear in natural DOM order, flow-standard will do just that. It's what a row does by default. If you need cells to appear right to left (in opposite DOM order), try flow-reversed.
Cells have gutters around all edges, which means you'll have a horizontal gutter underneath rows by default. Using finish-short makes sure that the content under a row will start directly after it. Using finish-tall means content under a row will be preceded by a gutter.
Cells have gutters around all edges, which means there will be horizontal and vertical gaps between all cells present in a row by default. Specifying no-gutters will remove these gutters and all cells will directly touch each other, like a pack of sardines. Using gutters means cells will have breathing room.
Using these alignment modifiers, you can vertically organise all cells present in a row. As rows use flexbox as the underlying display property, these modifiers follow the same rules as set out by the css spec "align-items" property.
Here, #/# denotes any whole-number fraction of the columns availabe, which is 12 by default. This makes thing simple and readable. Need a cell that's 6 columns wide? Use Cell--6/12. Need 3 columns worth? Cell--3/12, etc.
Cell offsets follow the same sizing property as Cell--#/#. So if you want a cell to have a left offset of 2 columns, chuck on Cell--offset-left-2/12. Need a right offset of 8 columns worth? Cell--offset-right-8/12, simple.
These are fairly self explanatory, so we'll move on.
These alignment modifiers follow the same rules as specified by the css "text-align" property. Simply put, these modifiers are here as a convenience to you, saving you from having to write an additional class to align your text if that's all you're looking for.
I've left this one till last. For more advanced layouts, like those wrangled up by your designers 😜. If a cell has rows embedded within it (as used throughout the examples) this modifier will ensure the gutters are taken care of. Interested? Inspect the source.
Anything you see marked in yellow on this page can be modified.
When importing Buzuki via Sass, you may override any of the settings.
More or less columns? Different breakpoints? Different content width? No problem.
Created by Tristan Strathearn. Licensed under the MIT license.
