Documentation Gridzilla is a responsive, mobile-first flexbox grid system that scales up to 12 units as the device or viewport size increases. To ensure proper rendering and touch zooming, add the viewport meta tag to your <head> . <meta name="viewport" content="width=device-width, initial-scale=1">

Installation Install with npm You can install Gridzilla using npm: $ npm install gridzilla Install with Bower You can also install Gridzilla using Bower: $ bower install gridzilla-css

Usage Once installed, you can use it as an importer in node-sass or any project that depends on node-sass. node-sass var sass = require('node-sass'); var gridzilla = require('gridzilla'); sass.render({ file: './scss/styles.scss', importer: gridzilla }); gulp-sass var gulp = require('gulp'); var sass = require('gulp-sass'); var gridzilla = require('gridzilla'); gulp.task('sass', function() { return gulp.src('scss/**/*.scss') .pipe(sass({ importer: gridzilla }) .pipe(gulp.dest('./css')); }); grunt-sass module.exports = function(grunt) { var gridzilla = require('gridzilla'); grunt.initConfig({ sass:{ options: { importer: gridzilla }, ... } }); } webpack var webpack = require('webpack'); var gridzilla = require('gridzilla'); module.exports = function webpackConfig() { ... module: { loaders: [ { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] } ] }, sassLoader: { // here you can pass node-sass configurations importer: gridzilla } }; } Once the importer is setup, you can import gridzilla CSS in your code. @import 'gridzilla'; If you prefer to avoid using grid classes in your markup, you can import the mixins only and include them as necessary. @import 'gridzilla/mixins'; .my-custom-container { @include gz-make-container; }

Configuration Feature Gating and Customization Almost every feature in the grid can be turned on and off using Sass variables. You can enable/disable responsive classes for all features or for specific features. You can also customize settings like container widths, breakpoint values, breakpoint names, gaps between units and other settings. Prefixed Classes By default, all classes are not prefixed but if you want to use a prefix, simply update the $gz-namespace variable in the configuration file then compile. $gz-namespace: "gz"; You may then use all classes like so: <div class="gz-grid"> <div class="gz-unit-md-3 gz-align-top-xs">...</div> <div class="gz-unit-md-3 gz-stretch-xs">...</div> </div>

How it works In a nutshell, there are three major components: containers, grids, and units. Containers center your site's contents and help align your grid content. Grids are groups of units that ensure your units are lined up properly. Content should be placed within units, and only units may be immediate children of grids. Container Grid Unit Unit Unit Unit classes indicate the number of units you'd like to use out of the possible 12 per row. So if you want three equal-width units, you'd use .unit-sm-4 . Example: <div class="container-lg"> <div class="grid"> <div class="unit-sm-4">One of three units</div> <div class="unit-sm-4">One of three units</div> <div class="unit-sm-4">One of three units</div> </div> </div> You can also customize the total number of units per row by using the format .unit-{breakpoint}-{n}-{m} So if you want three equal-width units, you'd use .unit-sm-1-3 . It's like saying: I want to use N units out of M units per this row. Example: <div class="container-lg"> <div class="grid"> <div class="unit-sm-1-3">One of three units</div> <div class="unit-sm-1-3">One of three units</div> <div class="unit-sm-1-3">One of three units</div> </div> </div> The above examples create three equal-width units on small, medium, large, and extra large devices using the predefined grid classes. Those units are centered in the page with the parent .container-lg . Keep in mind: Unit widths are set in percentages, so they're always fluid and sized relative to their parent element. Units have horizontal padding to create the gaps between individual units. Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., .unit-sm-4 applies to small, medium, large, and extra large devices).

Responsive breakpoints Extra small, Small, Medium, Large, and Extra large. Gridzilla uses the following media query ranges—or breakpoints—for the grid system. // Extra small devices (portrait phones, less than 544px) // No media query since this is the default breakpoint // Small devices (landscape phones, 544px and up) @media (min-width: 544px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } These breakpoints are based on minimum viewport widths and allows scaling up units as the viewport changes. Gridzilla uses a single mixin gz-media-and-larger but provides other useful mixins for handling media queries. // For a specific media query range: // @media (min-width: 768px) and (max-width: 991px) { ... } @include gz-media-only(md) { ... } // For a specific media query range and larger screen sizes: // @media (min-width: 768px) { ... } @include gz-media-and-larger(md) { ... } // For a specific media query range and smaller screen sizes // @media (max-width: 991px) { ... } @include gz-media-and-smaller(md) { ... } // Finally, to span multiple breakpoint widths: // @media (min-width: 544px) and (max-width: 1199px) { ... } @include gz-media-through(sm, lg) { ... }

Containers Choose from fixed width and fluid width containers. Containers are required when using the grid system. Choose from a responsive fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time). All containers have a maximum width of 100% and while containers can be nested, most layouts do not require a nested container. There are 5 types of fixed width containers available. Container type Container width across breakpoints Extra small <544px Small ≥544px Medium ≥768px Large ≥992px Extra large ≥1200px .container-xs 100% .container-sm 100% .container-md 100% 750px .container-lg 100% 750px 960px .container-xl 100% 750px 960px 1140px Usage Use .container-{type} for a fixed-width container that wraps your content. <div class="container-lg"> <!-- Content here --> </div> Use .container-fluid for a full width container, spanning the entire width of the viewport. <div class="container-fluid"> <!-- Content here --> </div>

Unit Wrapping Create your grids with as many units as you want and they will automatically break into the next line. If more than the total number of units are placed within a single grid, each group of extra units will, as one unit, wrap onto a new line. Example: Unit Another Unit This should wrap onto a new line Subsequent units will continue along the new line <div class="grid"> <div class="unit-md-4">Unit</div> <div class="unit-md-4">Another Unit</div> <div class="unit-md-5">This should wrap onto a new line</div> <div class="unit-md-6">Subsequent units will continue along the new line</div> </div> No-Wrap To prevent this behavior, add .nowrap-{breakpoint} to .grid . Example: Unit Unit Another Unit This will not wrap onto a new line Subsequent units will continue along the same line <div class="grid nowrap-md"> <div class="unit-md-3"> <div class="box">Unit</div> </div> <div class="unit-md-3"> <div class="box">Unit</div> </div> <div class="unit-md-3"> <div class="box">Another Unit</div> </div> <div class="unit-md-5"> <div class="box">This will <em>not</em> wrap onto a new line</div> </div> <div class="unit-md-6"> <div class="box">Subsequent units will continue along the <em>same</em> line</div> </div> </div>

Auto-layout Units Add any number of units you need and you're good to go To create a single grid of equal-width units, add any number of .unit-{breakpoint} and let the grid figure it out for you. For example, here are two grid layouts that apply to every device and viewport possible. Example 1: 1 2 <div class="grid"> <div class="unit-xs">1</div> <div class="unit-xs">2</div> </div> Example 2: 1 2 3 4 <div class="grid"> <div class="unit-xs">1</div> <div class="unit-xs">2</div> <div class="unit-xs">3</div> <div class="unit-xs">4</div> </div> Set width of any unit and other units will be automatically resized to fill the available space. Example: 1 2 3 4 <div class="grid"> <div class="unit-xs-1-2"> <div class="box">1</div> </div> <div class="unit-xs"> <div class="box">2</div> </div> <div class="unit-xs"> <div class="box">3</div> </div> <div class="unit-xs"> <div class="box">4</div> </div> </div>

Auto-layout Grid Create responsive grids of equal-width units with ease. If you want to create equal-width units without having to specify the width of each unit individually, add .auto-{breakpoint}-{unitsPerGrid} to .grid . You will need to add .unit-auto to each unit for proper styles and padding. Example 1: Automatic grid with 2 units per row. 1 2 3 4 5 6 <div class="grid auto-md-2"> <div class="unit-auto">1</div> <div class="unit-auto">2</div> ... </div> Example 2: Automatic grid with 3 units per row. 1 2 3 4 5 6 <div class="grid auto-md-3"> <div class="unit-auto">1</div> <div class="unit-auto">2</div> <div class="unit-auto">3</div> ... </div>

Fit-Content Unit Create a unit that only takes the space it needs. If you want to make a unit take only as much width as it needs, use .fit-content-{breakpoint} . You may need to add .unit-auto to the unit for proper styles and padding. Example: Fit Content Unit Unit Unit <div class="grid"> <div class="unit-md-1-4 fit-content-lg"> <div class="box">Fit Content</div> </div> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> </div>

Units Order Change the display order of the units to keep a specific order in the source code. Offsets Move units to the right using .offset-{breakpoint}-{*} classes. These classes increase the left margin of a unit by * units. For example, .offset-md-4 moves the unit over four units. Example: Unit Offset by 25% Unit <div class="grid"> <div class="unit-md-3">Unit</div> <div class="unit-md-3 offset-md-3">Offset by 25%</div> <div class="unit-md-3">Unit</div> </div> This will also achieve the same result: <div class="grid"> <div class="unit-md-1-4">Unit</div> <div class="unit-md-1-4 offset-md-1-4">Offset by 25%</div> <div class="unit-md-1-4">Unit</div> </div> You can override offsets from lower grid tiers with .offset-{breakpoint}-0 classes. Push and Pull Easily move units right and left with .push-{breakpoint}-{*} and .pull-{breakpoint}-{*} classes. Example: (1) Unit (2) Pushed by one third (3) Pulled by one third <div class="grid"> <div class="unit-md-1-3"> <div class="box">(1) Unit</div> </div> <div class="unit-md-1-3 push-md-1-3"> <div class="box">(2) Pushed by one third</div> </div> <div class="unit-md-1-3 pull-md-1-3"> <div class="box">(3) Pulled by one third</div> </div> </div> You can override push and pull from lower grid tiers with .push-{breakpoint}-0 and .pull-{breakpoint}-0 classes. First and Last You can send a unit to the start of a grid using .first-{breakpoint} class. Example: 1 2 3 4 <div class="grid"> <div class="unit-md-1-4"> <div class="box">1</div> </div> <div class="unit-md-1-4"> <div class="box">2</div> </div> <div class="unit-md-1-4 first-md"> <div class="box">3</div> </div> <div class="unit-md-1-4"> <div class="box">4</div> </div> </div> You can send a unit to the end of a grid using .last-{breakpoint} class. Example: 1 2 3 4 <div class="grid"> <div class="unit-md-1-4 last-md"> <div class="box">1</div> </div> <div class="unit-md-1-4"> <div class="box">2</div> </div> <div class="unit-md-1-4"> <div class="box">3</div> </div> <div class="unit-md-1-4"> <div class="box">4</div> </div> </div> Reverse Order Reverse units order using .reverse-{breakpoint} class on .grid . Example: 1 2 3 4 <div class="grid reverse-md"> <div class="unit-md-1-4"> <div class="box">1</div> </div> <div class="unit-md-1-4"> <div class="box">2</div> </div> <div class="unit-md-1-4"> <div class="box">3</div> </div> <div class="unit-md-1-4"> <div class="box">4</div> </div> </div>

Nesting Units Easily extend your grid layout with nested units. To nest your content, add a new .grid and set of .unit-{breakpoint}-{*} units within an existing .unit-{breakpoint}-{*} unit. Example: Unit Unit Unit Unit Unit <div class="grid"> <div class="unit-md-6"> <div class="grid"> <div class="unit-md-6"> <div class="box">Unit</div> </div> <div class="unit-md-6"> <div class="box">Unit</div> </div> </div> </div> <div class="unit-md-6"> <div class="grid"> <div class="unit-md-4"> <div class="box">Unit</div> </div> <div class="unit-md-4"> <div class="box">Unit</div> </div> <div class="unit-md-4"> <div class="box">Unit</div> </div> </div> </div> </div>

Vertical Alignment Add classes to vertically align units to the top, middle or bottom of a grid. Add one of the alignment classes .align-top-{breakpoint} , .align-middle-{breakpoint} and .align-bottom-{breakpoint} to .grid to align units vertically. Use .align-top-{breakpoint} to vertically align units to the top. Example: Unit Unit Unit <div class="grid align-top-md"> <div class="unit-md-1-3"> <div class="box" style="height: 60px;">Unit</div> </div> <div class="unit-md-1-3"> <div class="box" style="height: 120px;">Unit</div> </div> <div class="unit-md-1-3"> <div class="box" style="height: 40px;">Unit</div> </div> </div> Use .align-middle-{breakpoint} to vertically align units to the middle. Example: Unit Unit Unit <div class="grid align-middle-md"> <div class="unit-md-1-3"> <div class="box" style="height: 60px;">Unit</div> </div> <div class="unit-md-1-3"> <div class="box" style="height: 120px;">Unit</div> </div> <div class="unit-md-1-3"> <div class="box" style="height: 40px;">Unit</div> </div> </div> Use .align-bottom-{breakpoint} to vertically align units to the bottom. Example: Unit Unit Unit <div class="grid align-bottom-md"> <div class="unit-md-1-3"> <div class="box" style="height: 60px;">Unit</div> </div> <div class="unit-md-1-3"> <div class="box" style="height: 120px;">Unit</div> </div> <div class="unit-md-1-3"> <div class="box" style="height: 40px;">Unit</div> </div> </div> You can use the same classes on units as well. Example: Bottom Middle Top <div class="grid" style="height: 120px;"> <div class="unit-md-1-3 align-bottom-md"> <div class="box">Bottom</div> </div> <div class="unit-md-1-3 align-middle-md"> <div class="box">Middle</div> </div> <div class="unit-md-1-3 align-top-md"> <div class="box">Top</div> </div> </div>

Horizontal Alignment Add classes to align units to the start, center or end of a grid. Add one of the alignment classes .align-start-{breakpoint} , .align-center-{breakpoint} and .align-end-{breakpoint} to .grid to align units horizontally. Use .align-start-{breakpoint} to horizontally align units to the start of a .grid . Example: Unit Unit <div class="grid align-start-md"> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> </div> Use .align-center-{breakpoint} to horizontally align units to the center of a .grid . Example: Unit Unit <div class="grid align-center-md"> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> </div> Use .align-end-{breakpoint} to horizontally align units to the end of a .grid . Example: Unit Unit <div class="grid align-end-md"> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> <div class="unit-md-1-4"> <div class="box">Unit</div> </div> </div>

Units Distribution Add classes to justify units based on the space between (justify) them or the space around (spread) them. Use .justify-{breakpoint} to distribute space between units. Example: Unit Unit Unit <div class="grid justify-md"> <div class="unit-md-3"> <div class="box">Unit</div> </div> <div class="unit-md-3"> <div class="box">Unit</div> </div> <div class="unit-md-3"> <div class="box">Unit</div> </div> </div> Use .spread-{breakpoint} to distribute space around units. Example: Unit Unit Unit <div class="grid spread-md"> <div class="unit-md-3"> <div class="box">Unit</div> </div> <div class="unit-md-3"> <div class="box">Unit</div> </div> <div class="unit-md-3"> <div class="box">Unit</div> </div> </div>

Equal-height Units Easily create matching height units. Create equal-height units using .stretch-{breakpoint} class. Example: Unit Unit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. <div class="grid stretch-md"> <div class="unit-md-4"> <div class="box">Unit</div> </div> <div class="unit-md-4"> <div class="box">Unit</div> </div> <div class="unit-md-4"> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. </div> </div> </div> You can use the same class to stretch individual units as well. Example: Will not stretch Will stretch Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. <div class="grid"> <div class="unit-md-4"> <div class="box">Will <em>not</em> stretch</div> </div> <div class="unit-md-4 stretch-md"> <div class="box">Will stretch</div> </div> <div class="unit-md-4"> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. </div> </div> </div>

Gaps Add modifier classes to adjust gaps between units. Create gapless grids using .no-gaps-{breakpoint} class. Example: Unit Unit Unit <div class="grid no-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> <div class="unit-md"> <div class="box">Unit</div> </div> <div class="unit-md"> <div class="box">Unit</div> </div> </div> Modify width of gaps using .{size}-gaps-{breakpoint} classes. Here is a full list of gaps modifier classes: .smallest-gaps-{breakpoint}

.smaller-gaps-{breakpoint}

.small-gaps-{breakpoint}

.medium-gaps-{breakpoint}

.large-gaps-{breakpoint}

.larger-gaps-{breakpoint}

.largest-gaps-{breakpoint} Create 4px wide gaps using .smallest-gaps-{breakpoint} class. Example: Unit Unit Unit Unit <div class="grid smallest-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> ... </div> Create 10px wide gaps using .smaller-gaps-{breakpoint} class. Example: Unit Unit Unit Unit <div class="grid smaller-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> ... </div> Create 20px wide gaps using .small-gaps-{breakpoint} class. Example: Unit Unit Unit Unit <div class="grid small-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> ... </div> Create 30px wide gaps using .medium-gaps-{breakpoint} class. Example: Unit Unit Unit Unit <div class="grid medium-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> ... </div> Create 50px wide gaps using .large-gaps-{breakpoint} class. Example: Unit Unit Unit Unit <div class="grid large-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> ... </div> Create 80px wide gaps using .larger-gaps-{breakpoint} class. Example: Unit Unit Unit Unit <div class="grid larger-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> ... </div> Create 120px wide gaps using .largest-gaps-{breakpoint} class. Example: Unit Unit Unit Unit <div class="grid largest-gaps-md"> <div class="unit-md"> <div class="box">Unit</div> </div> ... </div>