Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A fluid CSS grid framework
Tag: v0.0.1

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
README.markdown
frak.css

README.markdown

Frak CSS Grid

Copyright (c) 2010, Colin Gourlay Email: colin.j.gourlay@gmail.com

Frak is a CSS framework for creating fluid grids. Here's a frackin' example:

<div class="frak">
    <div class="half">
        Left Column
    </div>
    <div class="half">
        Right Column
    </div>
</div>

In the code above, we have a div element with a class of "frak". The classes of the divs inside this element are named to indicate the fraction of the width of its container it occupies, as follows:

  • whole = the whole frackin' thing
  • half = 1/2 of the frackin' thing
  • third = 1/3 of the frackin' thing
  • quarter = 1/4 of the frackin' thing
  • fifth = 1/5 of the frackin' thing
  • sixth = 1/6 of the frackin' thing
  • eighth = yeah, a frakin' 1/8

You can use multiples of fractions by adding a frackin' multiplier class, for example:

<div class="frak">
    <div class="quarter">
        Left Column
    </div>
    <div class="quarter x2">
        Middle Column
    </div>
    <div class="quarter">
        Right Column
    </div>
</div>

Multipliers can be used for any of the fractions defined above. You can't use a vulgar fraction as that would be larger than the width of the container, so "quarter x5" will be ignored (rather, it will be treated simply as "quarter").

If you want to minimise the number of classes you use, you are also allowed to simplify your fractions. As two quarters is a frackin' half, you can rewrite the last example as:

<div class="frak">
    <div class="quarter">
        Left Column
    </div>
    <div class="half">
        Middle Column
    </div>
    <div class="quarter">
        Right Column
    </div>
</div>

The smallest fraction defined by Frak is 1/8, but this doesn't limit you from creating more granular grids. You can do some frackin' nesting:

<div class="frak">
    <div class="quarter x3 frak">
        <div class="third">Column A</div>
        <div class="third">Column B</div>
        <div class="third">Column C</div>
    </div>
    <div class="quarter">Sidebar</div>
</div>
Something went wrong with that request. Please try again.