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

Overview

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.

Installation

gem install compass.takitapart.framework

require "takitapart"

Configuration

// 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%;

Modules

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

Normalize

@import "takitapart/normalize";

Typography

@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.

Grid

@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.

Forms

@import "takitapart/form";

Available mixins:


@mixin field-width()


@mixin field-width-grid()


@mixin inline-fields()


@mixin label-below()


@mixin label-left()

Utility

@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.

Demos

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