Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

Griddle

unmaintained

Griddle is a CSS grid system for modern browsers. It is generated from a set of Sass functions and mixins. The grid uses inline-block and box-sizing to provide features that float-based layouts cannot.

Project page

Contribution guidelines

Installation

  • Download: zip
  • Bower: bower install --save griddle
  • Git: git clone https://github.com/necolas/griddle.git

Features

  • Fluid layout.
  • Intelligent cell wrapping.
  • Horizontal centering of cells.
  • Custom vertical alignment of cells (top, bottom, or middle).
  • Cell width is controlled independently of grid gutter.
  • Infinite nesting.
  • Built-in redundancy coupled with automatic consolidation of rules in compiled CSS.
  • Modify the grid at different breakpoints for responsive layouts.
  • RTL support.

How to use it

The grid system is suitable whether or not you choose to develop "mobile first". Import griddle to "initialize" the grid at a given breakpoint.

The griddle-build() mixin handles the generation of styles for grids. It can accept a space-separated list of integers, each of which results in the creation of a grid with that many parts. For example:

@import "griddle";
// Create 2, 3, and 4 column grids
@include griddle-build(2 3 4);

The mixin also accepts a string as a second (optional) argument. This can be used to generate modified selectors to override the width of a cell at different breakpoints. For example:

@media (min-width: 40em) {
    // Create 2, 3, 4, 5, 6, and 12 column grids (wider screens)
    @include griddle-build(2 3 4 5 6 12, '--desktop');
}

Each grid cell is created in the same way, using HTML classes. You can have a cell that is 50% wide at narrow viewports, but 25% wide at wider viewports when the styles are applied to the modifier class:

<div class="grid__cell unit-1-2 unit-1-4--desktop">
    ...
</div>

Feel free to customize the default class name pattern to suit your personal preferences.

Browser support

  • Google Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 8+

License

MIT License

About

A CSS grid constructor

Resources

License

Packages

No packages published

Languages

You can’t perform that action at this time.