About

Gridgraphy is a highly configurable, and incredibly flexible Compass extension that enables you to quickly and easily build semantic CSS grids. Whether you're developing a small single page site or architecting a large scale responsive grid system, Gridgraphy will help you get the job done faster.

• Installation
• Getting Started
• Types
• Mixins
• Functions
• Demo

Installation

Install Gridgraphy by running the following from the command line:

$ gem install gridgraphy

Once Gridgraphy is installed you can either create a new Compass project based on Gridgraphy by running the following from the command line:

$ compass create <project_name> -r gridgraphy -u gridgraphy

Or you can add Gridgraphy to an existing Compass project by adding the following to your projects config.rb:

require 'gridgraphy'

Getting Started

Basic

You can import the Gridgraphy extension by adding the following line to one of your Sass/SCSS stylesheet(s):

@import gridgraphy

Configurable Variables

You can mix and match different configurations to acheive the exact type of grid you need.

• $grid-type [default: full] - The type of grid. [full, right, center, left]
• $grid-max-width [default: 960px] - The maximum width of the grid in px.
• $grid-gutter-width [default: 20px] - The gutter spacing in px between columns.
• $grid-column-count [default: 12] - The total number of columns in the grid.
• $grid-show [default: false] - Set true to highlight the grid row & columns.

That's it! You now have access to all of the mixins and functions that Gridgraphy provides.

Scaffolding

Scaffolding is a quick way to generate classes for a grid. If you plan on adding your grid classes directly to your markup or want to export a pre-made grid as part of an external library, scaffolding can save you a ton of time.

You can create a new compass project using scaffolding by running:

$ compass create <project_name> -r gridgraphy -u gridgraphy/scaffolding

Or you can add scaffolding to an existing project by adding the following line to any of your Sass/SCSS stylesheet(s):

@import gridgraphy/scaffolding

Configurable Variables

• $grid-namespace-base [default: grid] - The name of the prefix that will be used for the grids row & columns class.
• $grid-namespace-row [default: row] - The name of the suffix that will be used for the grids row class.
• $grid-namespace-column [default: column] - The name of the suffix that will be used for the grids column class.

Types

Gridgraphy ships with 4 different types of grid layouts. By default grids are created using the value you've set for the $grid-type configuration variable, but can be set manually on each grid-* mixin or function.

Full Grid

The full grid type does not have a gutter between columns.

Right Grid

The right grid type has its gutter distributed to the right side of each column.

Center Grid

The center grid type has its gutter split in half and evenly distributed to both sides of each column.

Left Grid

The left grid type has its gutter distributed the the left side of each column.

Mixins

grid-row($max-width)

Sets an element as the container for your columns.

• $max-width [default: $grid-max-width] - The maximum width in pixels the row should span.

.grid-row
    @include grid-row(960px)

grid-row-nested($type)

Sets an element as the container for your columns inside another column.

• $type [default: $grid-type] - The type of grid to be used.

.grid-row
    @include grid-row-nested(left)

grid-column($columns, $type)

Sets all the properties of a column.

• $columns - The number of columns to span in the row.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
    @include grid-column(6)

grid-column-width($columns, $type)

Set only the width of a column.

Note: This mixin is called automatically when using the grid-column() mixin. You'll probably only want to use this directly if you need to keep your selectors very DRY.

• $columns - The number of columns to span in the row.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
    @include grid-column-width(6)

grid-column-base()

Set only the base properties of a column.

Note: This mixin is called automatically when using the grid-column() mixin. You'll probably only want to use this directly if you need to keep your selectors very DRY.

[class^="grid-column-"]
  @include grid-column-base()

.grid-column-1
    @include grid-column-gutter(4)

.grid-column-2
    @include grid-column-gutter(8)

grid-column-gutter($columns, $type)

Set only the gutter properties of a column.

Note: This mixin is called automatically when using the grid-column() mixin. You'll probably only want to use this directly if you need to keep your selectors very DRY.

• $columns - The number of columns to span in the row.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
    @include grid-column-gutter(6)

grid-column-offset-right($columns, $type)

Sets all the properties to offset the column from the right. (prepends empty columns)

• $columns - The number of columns to offset by.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
    @include grid-column-offest-right(6)

grid-column-offset-left($columns, $type)

Sets all the properties to offset the column from the left. (appends empty columns)

• $columns - The number of columns to offset by.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
    @include grid-column-offest-left(6)

grid-column-push($columns, $type)

Sets all the properties to push the column from the left. (moves the column without affecting surrounding elements)

• $columns - The number of columns to push by.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
    @include grid-column-push(6)

grid-column-pull($columns, $type)

Sets all the properties to pull the column towards the left. (moves the column without affecting surrounding elements)

• $columns - The number of columns to pull by.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
    @include grid-column-pull(6)

Functions

grid-column-width($columns, $type)

Returns the unitless (percentage based) width of a column.

• $columns - The number of columns to take up in a row.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
  width: #{grid-column-width(12)}%

grid-column-offset($columns, $type)

Returns the unitless (percentage based) offset width of a column.

• $columns - The number of columns to offset by.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
  left: #{grid-column-offset(12)}%

grid-column-gutter($columns, $type)

Returns the unitless (percentage based) gutter width of a column.

• $columns - The number of columns to span in the row.
• $type [default: $grid-type] - The type of grid to be used.

.grid-column
  margin-left: #{grid-column-gutter(12)}%

Demo

Run the following from the command line to build a demo project of the different types of grids provided.

$ compass create <project_name> -r gridgraphy -u gridgraphy/example