CSS Grid inspired by Bootstrap Grid

• Source: github.com/simbiose/grid-css
• Home Page: victorpotasso.com/
• Twitter: @victorpotasso

What is it?

It's an improvement of Bootstrap Grid made with LESS and STYLUS

Getting Started

You have to include the Grid file in your project and then call the build-grid() with your custom parameters.

Samples

• LESS

// IMPORT GRID
@import "./Grid.less";

// REGISTER GRIDS
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 800px)";
@desktop: ~"only screen and (min-width: 801px) and (max-width: 1280px)";
@desktop-large: ~"only screen and (min-width: 1280px)";

// BUILD GRIDS
.build-grid(m,   6, 100%,   @mobile);
.build-grid(ds, 12, 100%,   @tablet);
.build-grid(dm, 12, 100%,   @desktop);
.build-grid(dl, 12, 1280px, @desktop-large);

• STYLUS

// IMPORT GRID
@import "./Grid.styl"

// REGISTER GRIDS
mobile = "only screen and (max-width: 640px)"
tablet = "only screen and (min-width: 641px) and (max-width: 800px)"
desktop = "only screen and (min-width: 801px) and (max-width: 1280px)"
desktop-large = "only screen and (min-width: 1280px)"

// BUILD GRIDS
build-grid('m',  6,  100%,   mobile)
build-grid('ds', 12, 100%,   tablet)
build-grid('dm', 12, 100%,   desktop)
build-grid('dl', 12, 1280px, desktop-large)

Author

Victor Potasso

• http://github.com/victorpotasso
• http://victorpotasso.com
• https://twitter.com/victorpotasso

Thanks

• Bootstrap Team.

MIT © Victor Potasso