root / drupal7 / sites / all / themes / zen / STARTERKIT / sass-extensions / zen-grids @ 27370441
Nom | Taille | Révision | Âge | Auteur | Commentaire |
---|---|---|---|---|---|
lib | 87dbc3bf | plus de 9 ans | Benjamin Luce | Addition of 3 themes : - adminimal_theme in fi... | |
stylesheets | 87dbc3bf | plus de 9 ans | Benjamin Luce | Addition of 3 themes : - adminimal_theme in fi... | |
templates | 87dbc3bf | plus de 9 ans | Benjamin Luce | Addition of 3 themes : - adminimal_theme in fi... | |
DO_NOT_MODIFY | 633 octets | 7e072189 | plus de 8 ans | Assos Assos | Weekly update of contrib modules |
LICENSE.txt | 14,6 ko | 87dbc3bf | plus de 9 ans | Benjamin Luce | Addition of 3 themes : - adminimal_theme in fi... |
README.txt | 2,47 ko | 87dbc3bf | plus de 9 ans | Benjamin Luce | Addition of 3 themes : - adminimal_theme in fi... |
zen-grids.gemspec | 2,67 ko | 87dbc3bf | plus de 9 ans | Benjamin Luce | Addition of 3 themes : - adminimal_theme in fi... |
Dernières révisions
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";
$zen-gutter-width: 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-column-count: 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.
Zen Grids has built-in support for the Box-sizing Polyfill which adds
"box-sizing: border-box" support to IE7 and earlier.
- Download the polyfill at https://github.com/Schepp/box-sizing-polyfill
- Place the boxsizing.htc file in your website.
- Set Zen Grids' $box-sizing-polyfill-path variable to the absolute path to the boxsizing.htc file on your website. For example: $box-sizing-polyfill-path: "/scripts/polyfills/boxsizing.htc";
INSTALLATION
Zen grids is distributed as a Ruby Gem. On your computer, simply run:
sudo gem install zen-grids
If you are using Compass (and you should!) then you can add it to an existing
project by editing the project's configuration file, config.rb, and adding this
line:
require 'zen-grids'
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";
REQUIREMENTS
- Sass 3.2 or later
For the zen/background module only:
- Compass 0.12 or later
LICENSE
Available under the GPL v2 license. See LICENSE.txt.
Formats disponibles : Atom