A flexible, responive CSS framework powered by the Flexbox Layout module and SASS.
- 12 columns flex grid
- Responsive Grid
- Fluid Layout
- Layout Offsets
- Layout Distribution
- Flex Reverse
- Flex Reorder
- Viewport specific rules
GridleCSS comes with a ocuple of customizable variables which will affect the way your grid is compiled.
Increasing the number of columns:
$grid-columns: n !default;
Adding more breakpoints:
$grid-breakpoints: "xs" "sm" "md" "lg";
Adjusting the responsive breakpoints of the grid:
grid/config.scss for more informations.
We're not sure wether or not it's worth spending time creating components when
there's so much out there already.
Watch this space, we might change our mind.
$ git clone email@example.com:studio51/gridlecss.git $ npm install
We use Grunt.JS as our Task Runner in order to compile the SASS files. If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.
This is the default task which will
dist folder and
$ grunt ship
If you make any changes to GridleCSS and whish to make a pull request or use it,
use this task which will
prettify the SASS files which
will give you
Open for pull requests
Before making any pull requests, make sure the Theme
web/ looks as it should
by using the
$ grunt task inside the
web/ folder which will launch a preview
of the theme.
MIT © Studio51