smashing-layout

Smashing Layout

A Sass project that began as an experiment to recreate Smashing Magazine's layout (circa 2009).

Installation

(sudo) gem install smashing-layout

Add require 'smashing-layout' to your Compass config file.

Usage

There are two mixins that produce all the magic in Smashing Layout. The smashing-layout mixin and the smashing-width mixin. I'll cover those in more detail below. But in the meantime, here are the details for the default variables and how to override them.

Default variables

The smashing-layout mixin sets up the core layout based on the default variable configuration or your overrides.

The default configuration of Smashing Layout is listed below. If you plan to override any of these values, do so prior to importing smashing-layout.

// Configuration
$smashing-direction: right
$smashing-max-width: 1200px
$smashing-min-width: 960px
$smashing-cushion: 2.5%
$smashing-devine: false

Import Smashing Layout from the extension, like so:

@import smashing-layout

Overriding the default variables

A proper example of overriding the default variables would look something like this.

The code below assumes you are keeping the default max and min width, but you'd like to set the sidebar to display on the left vs the default setting of displaying on the right. It also assumes you'd like a bit more cushion on the outside of the layout by setting the $smashing-cushion, and sets the left and right padding on the .width selector to 5% each vs the default of 2.5%.

// Configuration
$smashing-direction: left
$smashing-cushion: 5%
@import smashing-layout

Assumed markup and selectors

The following markup and selector structure is assumed to create the two-column Smashing Layout.

.your-class
  .width
    .padding
      .primary
         ...
      .secondary
         ...

I realize this means you are using more presentational selector names in your markup, but that doesn't mean you can't combine those class names with HTML5 elements.

Smashing Mixins

There are two mixins to use when using Smashing Layout.

• smashing-layout, which takes care of creating the layout
• smashing-width, which sets up just the width for keeping sections of the design outside the layout the same flexible width

smashing-layout

Assumes the following markup and selector structure to work.

.your-class
  .width
    .padding
      .primary
         ...
      .secondary
         ...

smashing-width

Assumes the following markup and selector structure to work.

.your-class
  .width
    ...

License

Copyright (c) 2009-2011 Adam Stacoviak

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.