Pine

CSS grid that smell of pine. In SCSS, based on 1140 for Compass. Pines are evergreen.

Installation

The best way to install Pine is with RubyGems:

$ [sudo] gem install pine

You can safely include the whole framework. Nothing is being mixed into the global scope by default:

require 'pine'

And in your main SCSS file:

@import "pine";

The Reset

Pine includes a very basic reset mixin which contains only the rules required in order to make the grid work. It is not intended to be a general CSS reset.

@include grid-reset;

The Grid

Basics

Pine is a fluid, response 12-column grid, based on 1140 by Andy Taylor. To create a grid, simply include the container, row and column mixins:

.container {
  @include grid-container;

  .row {
    @include grid-row;

    // Define 3 4-column wide columns.
    .column1 {
      @include grid-column(4);
    }

    .column2 {
      @include grid-column(4);
    }

    .column3 {
      // Pass 'last' as an additional argument to indicate the last column
      // in a row and clear the right margin.
      @include grid-column(4, last);
    }
  }
}

Media queries

Pine automatically generates media queries for each of your grid containers and columns to stack columns on top of each other if the browser window sizes reaches 767px or less. The following SCSS code:

.container {
  @include grid-container;

  .row {
    @include grid-row;

    .column1 {
      @include grid-column(12);
    }
  }
}

Compiles to:

.container {
  padding-left: 20px;
  padding-right: 20px;
}

@media handheld, only screen and (max-width: 767px) {
  .container {
    width: auto;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.container .row {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  overflow: hidden;
}

.container .row .column1 {
  width: 100.0%;
  margin-right: 3.8%;
  float: left;
}

@media handheld, only screen and (max-width: 767px) {
  .container .row .column1 {
    width: auto;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

Of course it is possible to disable automatic media queries with:

$grid-media-queries: false;

As opposed to 1140, Pine supports floating-point column widths:

@include grid-column(1.5);

Configuration

Pine adds a few new things to the 1140 grid system. You can set the overall grid width with:

$grid-width: 1140px;

Enable debug mode (background + border-bottom) with:

$grid-debug: true;

And also change the color and borders used in debug mode:

$grid-debug-background: #FDD;
$grid-debug-border-bottom: 1px solid #977;

Internet Explorer

To make all this work in Internet Explorer, simply import "pine/ie" into your Internet Explorer specific stylesheet before using any of the mixins.

@import "pine/ie";

Contributing

If you'd like to contribute to Pine, start by forking my repo on GitHub:

http://github.com/tobiassvn/pine

To get all of the dependencies, install the gem first. The best way to get your changes merged back into core is as follows:

Clone down your fork
Create a thoughtfully named topic branch to contain your change
Hack away
If you are adding new functionality, document it in the README
Do not change the version number, I will do that on my end
If necessary, rebase your commits into logical chunks, without errors
Push the branch up to GitHub
Send a pull request to the tobiassvn/pine project.