Skip to content
Sass grid framework 100% fluid, semantic, clean and allowing infinte nesting level with the use of one single mixin.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
sass
.gitignore
COPYING
COPYING.LESSER
ChangeLog
Readme.md
VERSION
_zass.scss

Readme.md

Zass

One mixin to rule them all

Zass is a Sass (CSS) fluid grid framework. Zass is 100% fluid, semantic, clean and allow infinite nesting of columns with the use of a single mixin.

  • 100% fluid because it only uses percentage units to create grid dimensions.
  • Semantic, because thanks to Sass CSS pre-processor there is no need to pollute HTML with design named classes (as .col_4 to indicate 4 grid units width).
  • Clean because it does not use any CSS hack neither uggly negative margins. Zass does not care about obsolete browsers like Internet Explorer 6.
  • Zass can nest infinite levels of columns.
  • And, what is more awesome, Zass can do all of this using one single mixin.

Setup

Zass framework requires you are working with Sass.

With git, to get latest stable version:

git clone https://github.com/waiting-for-dev/zass.git

Otherwise, download it from:

https://github.com/waiting-for-dev/zass/zipball/master

Move zass files to your sass directory and import sass/_zass.scss from your sass stylesheet:

@import 'sass/zass';

How does it work?

First of all, you have to configure your grid through three variables. Here it is an example for a 960px grid:

$zass-column-width: 60px; //Grid columns width
$zass-gutter-width: 20px; //Grid gutters width
$zass-grid-units: 12; //Grid number of columns

Then, you are ready to start creating and nesting as many columns as you want using the zass-column() mixin:

zass-column($n, $parent-n, $position, $push, $pull);

Here it is an explanation of zass-column parameters:

  • $n: amount of grid units that the column will take up.
  • $parent-n: Only for nested columns, amount of grid units that the parent column takes up. 0 means it is not a nested column. 0 is the default.
  • $position: Only for nested columns, it can be left, right or inner if a column is the left extreme one, the right extreme one or an inner one. inner by default.
  • $push: Amount of grid units to push (left margin) the column
  • $pull: Amount of grid units to pull (right margin) the column

So, let say you have following DOM structure:

<div id="col1">
  <p>Column 1</p>
</div>

<div id="col2">
  <div id="col2-1">
    <p>Column 2-1</p>
  </div>
  <div id="col2-2">
   <p>Column 2-2</p>
  </div>
 </div>

 <div id="col3">
   <p>Column 3</p>
 </div>

With Zass, you could build quickly a grid layout:

@import '../../zass';

$zass-column-width: 60px;
$zass-gutter-width: 20px;
$zass-grid-units: 12;

#col1 {
   @include zass-column(3); //Take up three grid units
}

#col2 {
   @include zass-column(7); //Take up seven grid units
   #col2-1 {
      @include zass-column(4, 7, 'left'); //Take up 4 grid units inside #col2. It's the left one.
   }
   #col2-2 {
      @include zass-column(3, 7, 'right'); //Take up 3 grid units inside #col2. It's the right one.
   }
}

#col3 {
   @include zass-column(1, $push: 1); //Take up one grid unit and push one more.
}

Optionally, you can use a second mixin, zass-grid(), if you want to set grid width as the maximum width for a given container. That way, a perfect pixel photo of a design is achieved for resolutions greater or equal than grid pixel width while it is still 100% fluid for lower resolutions:

zass-grid($em, $rfs)
  • $em: If true, set that maximum width in em. In that case, the grid will increase its width if user increases text zoom level. Defaults to true.
  • $rfs: Relevant font size to calculate maximum width in em units. Default to 16px.

In our example:

#wrapper {
  @include zass-grid(true, 16px); //It ouputs "max-width: 60em;" 
}

or

#wrapper {
  @include zass-grid(false); //Will ouput "max-width: 960px;"
}

More examples

Look at the examples/ directory for more examples.

Reference

Variables, functions and mixins are fully documented in the source code.

Contact & Copyright

Copyright 2012, Marc Busqué Pérez, under GNU LESSER GENERAL PUBLIC LICENSE marc@lamarciana.com - http://www.lamarciana.com

You can’t perform that action at this time.