zg

zen-grids

A Sass module to build responsive grid systems

Showing:

Popularity

Downloads/wk

298

GitHub Stars

238

Maintenance

Last Commit

5yrs ago

Contributors

7

Package

Dependencies

0

License

GPL-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

About Zen Grids

Zen Grids is an intuitive, flexible grid system that leverages the natural source order of your content to make it easier to create fluid responsive designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts.

More information can be found at http://zengrids.com

USAGE

Here's a simple example: a content column with a sidebar on each side, aligned to a 12 column grid.

  @import "zen-grids";

  $zen-gutters: 40px;  // Set the gutter size. A half-gutter is used on
                       // each side of each column.

  .container {
    @include zen-grid-container();  // Define the container for your grid items.
  }

  $zen-columns: 12;  // Set the number of grid columns to use in this media
                     // query. You'll likely want a different grid for
                     // different screen sizes.

  @media all and (min-width: 50em) {
    .sidebar1 {
      @include zen-grid-item(3, 1);   // Span 3 columns starting in 1st column.
    }
    .content {
      @include zen-grid-item(6, 4);   // Span 6 columns starting in 4th column.
    }
    .sidebar2 {
      @include zen-grid-item(3, 10);  // Span 3 columns starting in 10th column.
    }
  }

Within the .container element, the .sidebar1, .sidebar2 and .content elements can be in any order.

INSTALLATION

Install using one of the following methods:

  • Install with npm: npm install --save-dev zen-grids
  • Install with Bower: bower install --save-dev zen-grids
  • Install with Ruby Gem: gem install zen-grids
    and, if using Compass, add require "zen-grids" to your config.rb file.
  • Install with Bundler and Ruby Gem: bundle inject zen-grids '~> 2.0'

You can then start using Zen Grids in your Sass files. Just add this line to one of your .sass or .scss files and start creating!

@import "zen-grids";

REQUIREMENTS

Now works with libSass or Ruby Sass!

  • LibSass 3.2.5 or later
  • or Ruby Sass 3.4.0 or later

LICENSE

Available under the GPL v2 license. See LICENSE.txt.

Build Status

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial