Bubbly Grid System
This is not another 12-column grid system, this is an up-to-you-column grid system.
This is also not an HTML grid system, meaning you're gonna be able to keep your markup clean and tidy.
Made with calc() and Flexbox, so it will support the latest versions of Chrome, Firefox, Safari, Opera (not opera mini) & IE 11+.
Built in PostCSS, so it will work with the preprocessor of your choice.
Wanna see some nicer doc?
Wanna see some demos?
Installation
npm install postcss-bubbly-grid
Usage
How to use it :
// postcss.config.js const bubblyGrid = moduleexports = plugins:
Sym Grid (symmetrical only)
sym-grid: [col: number] [gutter?: value<px | % | em | rem>] [stretch?: 'stretch' | 'nostretch']
Make sure the parent container is set to display flex
:
.container
Col
- number of columns per row
.container .item
- You'll get 4 columns per row
- and a gutter of 20px between each column
The HTML :
item 01 ... item 08
Gutter
- width of the gutter (values can be in 'px', 'em', 'rem' or '%')
.item
- You'll get 3 columns per row
- You'll get a gutter of 2em between each column
Stretch
- Use it when you want the last item in the row to take the full width of the remaining space :
.item
The HTML :
item 01 ... item 05
media-queries
Media queries and new cycles :
Let's say that when the window width gets below 420px, you wanna change the number of cols per row :
.item
- First, we set a new cycle with:
2
- Then, we set a new value for the gutter:
2em
Media queries and stretch :
Let's say that when the window width gets below 420px, you wanna get rid of the stretching stuff :
.item
Asym Grid (asymmetrical grid)
asym-grid: [ratio: <number / number>] [gutter?: value<px | ‰ | em | rem>] [last?: 'last']
- The gutter value must be the same across the different declarations defining a row
- To remove the margin-right on the last element of a row, we must pass the
last
parameter - You can set up another ratio everytime you defining a new row
- Make sure the parent container is set to display
flex
Let's make an asymmetrical grid :
.container /* -- first row -- */ .LeftSide .InBetween .RightSide /* -- second row -- */ .left-side .in-between .right-side /* -- third row -- */ .left__side .in__between .right__side
The HTML :
<!-- first row --> LeftSide InBetween RightSide <!-- second row --> left-side in-between right-side <!-- third row --> left__side in__between right__side
Push
push: [ratio: <number / number>] | [reset: 'reset']
Wanna push that one col to the right so that it's centered? easy :
.one .two .three
The HTML :
one two three
Alternatively, you can also use negative values if you wanna push an element to the left, e.g., push: -1/12
is the same as pull: 1/12
Pull
pull: [ratio: <number / number>] | [reset: 'reset']
Wanna pull a col to the left? :
.one .two .three
The HTML :
one two three
Alternatively, you can also use negative values if you wanna pull an element to the right, e.g., pull: -1/12
is the same as push: 1/12
Center
center: [boolean];
If you wish to have an element centered and by itself on his own line, you can use center: true;
Media-queries
Above 760px :
.one .two .three
Below 760px :
If you get bored of all the pushing and pulling around, use push: reset;
or pull: reset;
.one .two .three
The End
Et voilà, I guess this is it...Now it's your turn to build some crazy layouts :)