Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A mixin for Sass files using the grid classes from Blueprint CSS. It let's you DRY up your Haml CSS selectors!
branch: master

[FIX] Bad path for grid.png

latest commit 5710c7b824
John Schult authored

README.mdown

What is this mixin thingy?

It is a Sass file that contains the grid CSS (Sassified) from the Blueprint CSS Framework project. Its aim is to DRY up your Haml files by allowing you to create your own classes that mix in the grid classes.

This Sass file is not transformed into CSS like other Sass files. It creates variables like span-x, prepend-x, etc… that get utilized when evaluating a Sass file that includes it.

What is Haml?

Haml takes your gross, ugly templates and replaces them with veritable Haiku. Haml is the next step in generating views in your Ruby web application. Haml is a refreshing take that is meant to free us from the shitty templating languages we have gotten used to.

Haml is based on one primary principal. Markup should be beautiful.

What is Sass?

Sass is a meta-language on top of CSS that‘s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

What is a Sass Mixin?

Mixins enable you to define groups of CSS attributes and then include them inline in any number of selectors throughout the document.

How do I use this mixin?

Place the blueprint_grid_mixin.sass file in the stylesheets/sass directory of your project and then use something like the following in one of your Sass files.

@import blueprint_grid_mixin.sass

.post
  +span-8
  +prepend-2
  +append-4
  +last
  +colborder
  :background-color #FFFFFF
  :font-size 0.9em

Why should I use it?

Instead of your once beautiful Haml poetry looking like this...

.span-8.prepend-2.append-4.colborder.last.post
  I love Blueprint CSS, but gosh darnit, my Haml is looking really funky now :(

you could have this... Enough said?

.post Hey, I found this great new way to use Blueprint CSS in my Sass!

Still not convinced?

Try out Haml and Sass yourself online. No really, I dare you! Then quickly go and download the Blueprint CSS Framework along with this mixin and just see how Haml/Sass outshines your old crusty ERB templates :)

Something went wrong with that request. Please try again.