Github

Fluid, Semantic, Responsive and Fully-Configurable grid system for Stylus

Download
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6

why choose grider?

This grid is magnific because it is made using placeholder. Placeholders are pseudo-classes that you can extend from your real classes using @extends. The difference between Placeholder and "normal extend class" is that Placeholder make a nested classes using the same placeholder, in addition to compile only used placeholders. Go to a practical example:

main.styl

@import "path/to/grider"

.sidebar
  @extends $grider-3

.another-box
  @extends $grider-3

.content
  @extends $grider-9

main.css

.sidebar,
.another-box {
    /* Generated code by Grider */
}

.content {
    /* Generated code by Grider */
}

/* Responsive for tablets and phones below */

getting started in 2 steps

Step 1: Import the grider.styl file

@import "path/to/grider"

Step 2: Set the container (if you want) and number of columns (from 1 to 12)

.container
  @extends $container

.sidebar
  @extends $grider-3

.content
  @extends $grider-9

Note: The .container is not mandatory. Basically the $container make a centered element with 1040px (config) of max-width.

how does responsive work?

For made responsive is very easy, because you set the responsive nested with element:

.sidebar
  @extends $grider-3
  @extends $grider-tablet-5

.content
  @extends $grider-9
  @extends $grider-tablet-7
.sidebar
.content

BONUS: @media-queries rules can be used in all code:

/* Different rules for tablet and phone */
.my-element
  display: block
  color: red
  @media tablet
    color: green
  @media phone
    display: none

/* Same rule for tablet and phone */
.my-other-element
  display: block
  color: red
  @media tablet-phone
    display: none