https://github.com/csswizardry/csswizardry-grids

Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
https://github.com/csswizardry/csswizardry-grids

Last synced: 6 days ago
JSON representation

Simple, fluid, nestable, flexible, Sass-based, responsive grid system.

• Host: GitHub
• URL: https://github.com/csswizardry/csswizardry-grids
• Owner: csswizardry
• License: other
• Created: 2013-02-06T20:23:12.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2023-01-31T16:01:49.000Z (almost 2 years ago)
• Last Synced: 2024-12-07T21:48:52.709Z (6 days ago)
• Language: CSS
• Homepage: http://csswizardry.com/csswizardry-grids
• Size: 96.7 KB
• Stars: 1,493
• Watchers: 78
• Forks: 202
• Open Issues: 45
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# csswizardry-grids

**Simple, fluid, nestable, flexible, Sass-based, responsive grid system.**

* Fully responsive

* Mobile first

* Infinitely nestable

* Reversible/reorderable

* With/without gutters

* Endless possible combinations

* Simple to understand, human-friendly classes

* Option to keep classes out of your HTML

* Robust

* Simple

* No `.clear` or `.last` classes

* It just _works_

Please see [Responsive grid systems; a solution?](http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/)

for a comprehensive overview of the principles of the grid system.

## Demo

* [csswizardry.github.com/csswizardry-grids](http://csswizardry.github.com/csswizardry-grids).

* [Writeup](http://csswizardry.com/2013/02/introducing-csswizardry-grids/)

## Setup

Simply fill in/adjust the relevant variables.

* `$responsive` is used to turn csswizardry-grids’ responsive features on and

  off. csswizardry-grids is designed primarily for responsive builds but can

  also be used on non-responsive projects just as easily. Setting this to false

  will simply prevent Sass generating your `palm` etc modifiers.

* `$gutter` controls how much space there is between columns.

* `$mobile-first` controls whether you would like unclassed grid items to

  _initially_ adopt `width:100%;. This means that you won’t need to add a class

  to force a grid item to take up the full width of its container.

* `$use-silent-classes` tells csswizardry-grids whether to go ahead and compile

  solid, traditional classes (e.g. `.one-whole`) or to create Sass ‘silent’

  classes which only compile to CSS once explictly called.

* `$lap-start` and `$desk-start` tell csswizardry-grids when to fire particular

  media queries to service those particular sizes. Note that csswizardry-grids

  works out the ends of any other breakpoints by using these numbers.

## Usage

csswizardry-grids is incredibly simple to implement, its classes are all

human-readable and follow the same pattern.

### Patterns

csswizardry-grids’ classes are based on [a modified BEM

syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).

* `.grid` is a **B**lock

* `.grid__item` is an **E**lement

* `.grid--rev` is a **M**odifier

Classes include your breakpoint namespaces (e.g. `.palm--one-half`,

`.desk--two-thirds` and so on); your push and pull classes (`.push--one-third`,

`.pull--desk--one-quarter` and so on); your regular classes (`.one-tenth`,

`.three-quarters` etc).

Knowing these patterns will allow you to create hundreds of different

combinations. A few examples:

    /**

     * Sets an item to be one half across all breakpoints.

     */

    .one-half{}

    /**

     * Pushes an item one third of the way to the right across all breakpoints.

     */

    .push--one-third{}

    /**

     * Sets an item to be ten twelfths wide only at the desk breakpoint.

     */

    .desk--ten-twelthfs{}

    /**

     * Pulls an item one half of the way to the left only at the palm breakpoint.

     */

    .pull--palm--one-half{}

### Classes in markup

If you are using traditional classes then an example, basic usage might look

like this:

    


    

        


            ...

        



            ...

        

    

    


It’s as simple as that!

---

**Note the empty HTML comments.** These are to remove whitespace caused by using

`inline-block`.  Prior to v1.1 this was tackled by using some

[`[letter|word]-spacing` trickery](https://github.com/csswizardry/csswizardry-grids/blob/60a5075ac65282bb24fa5a5d5ed32a060ce2975f/csswizardry-grids.scss#L64-L65),

however Chrome 25 introduced a change which meant this method now broke

csswizardry-grids.

If you’d rather not use HTML comments to remove the whitespace then you can set

the `$use-markup-fix` variable to false; this invokes a CSS hack that _cannot_

be guaranteed. Always take care to check things over if using this method.

If you need to use csswizardry-grids with a CMS, or data coming out of a loop,

you will need to format your template something a little like this:

```php





    = $item ?>





```


Note the opening and closing comments before and after the loop, and the

corresponding opening and closing comments facing outward from the `.grid__item`

element. Try pasting the above into [the codepad

code runner](http://codepad.viper-7.com/): items from a loop without the need

for a counter :)

---

### Sass’ silent classes

If you are using silent classes (`$use-silent-classes: true;`) then your HTML

might look like this:

    


    

        


            ...

        



            ...

        

    

    


…and your Sass, something like this:

    .page{

        @extend %grid;

    }

    

        .content,

        .sub-content{

            @extend %grid__item;

            @extend %one-whole;

            @extend %lap--one-half;

        }

    

        .content{

            @extend %desk--two-thirds;

        }

    

        .sub-content{

            @extend %desk--one-third;

        }

### Reversed grids (`.grid--rev{}`)

csswizardry-grids has the option to reverse a set of grids; this means that the

order you write your source and the order it renders are total opposites, for

example:

    


        


            I appear first in the markup, but render second in the page.

        



            I appear second in the markup, but render first in the page.

        


    


This is handy if you want to lay out your page a certain way visually but it

would be advantageous to order the source differently, for example to aid

accessibility (getting a screenreader to read more important content first).

### Gutterless grids (`.grid--full{}`)

It may be desirable at times to have no gutter between your grid items; with

csswizardry-grids this is as simple as:

    


        


            Look, ma! No gutter!

        



            Look, ma! No gutter!

        


    


### Right-aligned grids (`.grid--right{}`)

Keep grids in their correct order, but have them flush right instead of left:

    


        


            I render first but start in the middle of the page.

        



            I render second and appear at the very right edge of the page.

        


    


### Centred grids (`.grid--center{}`)

You can centrally align your grids by simply using the `.grid--center` modifier:

    


        


            I’m in the middle!

        


    


### Vertically aligned grids (`.grid--[middle|bottom]{}`)

You can vertically align your grids to each other by simply using the

`.grid--[middle|bottom]` modifiers:

    


        


            I’m in the middle!

        


        


            I’m in the middle!

        


    


### Different sized grids (`.grid--[narrow|wide]{}`)

You can quickly alter the gutter size of your grids to half (`.grid--narrow`) or

double (`.grid--wide`) by using the relevant modifiers.

    


        


            I’m a narrow-guttered grid.

        


        


            I’m a narrow-guttered grid.

        


    


## Help and questions

If you have any trouble setting csswizardry-grids up, or would like some help

using and implementing it (or any questions about how it works) then please feel

free to [fire me a tweet](https://twitter.com/csswizardry) or

[open an issue](https://github.com/csswizardry/csswizardry-grids/issues/new).

csswizardry-grids’ Sass can look a little daunting, but it’s doing quite a lot

of work behind the scenes to make it as simple as possible when it comes to

implementation.