Skip to content

Latest commit

 

History

History
executable file
·
68 lines (53 loc) · 2 KB

README.md

File metadata and controls

executable file
·
68 lines (53 loc) · 2 KB

CSS Grid inspired by Bootstrap Grid

Built with Grunt

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

Thanks

MIT © Victor Potasso