Skip to content
CSS grid constructor, written in stylus
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
gulp-tasks
src
test
.gitattributes
.gitignore
CHANGELOG.md
LICENSE
README.md
gulpfile.js
package-lock.json
package.json

README.md

Stylus grid constructor

CSS grid constructor, written in stylus. Has two versions - flex and float. Inspired by Bootstrap grid.

Nowadays we have a CSS Grid supported by almost every browser, but if you need to spprt UC Browser or IE10, this library will be helpful.

Using

npm i stylus-grid-constructor

after that add src/grid-flex.styl or src/grid.styl to your project and call something like this

grid(12)

or

grid-flex(12, 15px)

default settings

$default-amount = 12 // Amount of columns
$default-padding = 15px // Padding between columns
$default-suffixes = 'col-xs', 'col-sm', 'col-md', 'col-lg', 'col-xl' // List of prefixes for responsive grid
$default-breakpoints = 544px, 768px, 992px, 1200px // breakpoints for responsive grids
$default-row-postfix = '' // prefix for row

or your own settings

$my-suffixes = 'col-xs', 'col-sm', 'col-md', 'col-lg', 'col-xl'
$my-breakpoints = 544px, 768px, 992px, 1200px
grid-flex(12, 15px, $my-suffixes, $my-breakpoints)

Contributing

npm i
npm start

Use npm run build to make a build

You can’t perform that action at this time.