A semantic, fluid, responsive SASS framework cobbled together from several awesome projects by people much more clever than myself.


I believe in a variation of Zawinski's Law, that goes something like:

Every program used by a software developer is modified until they eventually rewrite it, those that can't be modified are replaced with ones that can.

Thus began the takitapart SASS framework.

In a nutshell, it's a series of intelligent defaults and SASS mixins that I've put together over the last few years. I've cleaned it up and packaged it as a Compass plugin.


gem install compass.takitapart.framework

require "takitapart"


// Base font-size in pixels.
$font-size: 16;

// Base line-height.
$line: $font-size * 1.5;
$em: $font-size * 1;

// Number of columns.
$columns: 12;

// Width of the outer margin, in percent.
$outer-margin: 5.55555%;


The framework is broken into several modules. They are mostly standalone, and may be included as necessary.


@import "takitapart/normalize";


@import "takitapart/typography";

Available mixins:

@mixin baseline-grid()

@mixin font-size()

@mixin leading-before()

@mixin leading-after()

@mixin leading($amount-before, $amount-after)

Shortcut mixing to set both leading before and after.

@mixin indented()

@mixin first-line-small-caps()

Style the first line with small caps.

@mixin drop-cap()

Creates a drop cap for the first letter in the element.


@import "takitapart/grid";

Available mixins:

@mixin grid()

@mixin subgrid($columns, $of-columns)

@mixin column($columns, $of-columns)

@mixin push($columns, $of-columns)

Adds extra margin to the left, in number of column width, pushing it to the right.

@mixin pull($columns, $of-columns)

Adds extra column's-width of margin to the right side of a column, pulling it to the left.

@mixin block($width, $height, $padding)

block creates fluid, but equal-height, column blocks.


@import "takitapart/form";

Available mixins:

@mixin field-width()

@mixin field-width-grid()

@mixin inline-fields()

@mixin label-below()

@mixin label-left()


@import "takitapart/utility";

Other useful mixins and functions.

Available mixins:

@mixin limit($count, $display-type)

When applied to a set of elements, for example <li>, it hides all instances after $count. The visible elements are displayed according to $display-type, defaulting to block.

More details in this post.


The demo page is included and hosted as part of the GitHub repository.