Skip to content
Compass and Sass port of Nathan Smith's Formalize project
JavaScript CSS Ruby
Find file
Latest commit 6a24689 @pengwynn Merge pull request #8 from alienresident/master
Updated Compass Formalize from version 1.1 to 1.2
Failed to load latest commit information.
stylesheets Added @if $legacy-support-for-ie6 and @if $legacy-support-for-ie7 to …
templates Added jQuery legacy javascripts
.gitignore Added the compass-formalize-* to ignore the gem Added compass conditonal @if $legacy-support-for-ie7 and for @if $leg… Updated and corrected Readme
Rakefile initial commit

Compass Formalize

This is an extension for Compass for Formalize, Nathan Smith's excellent HTML Form stylesheet project.


Install the extension via Ruby Gems:

gem install compass_formalize

If you're starting from scratch, create your Compass project:

compass create my-project -r compass_formalize

If you're adding the library to an existing project, add the following to your config.rb file:

require 'compass_formalize'

To apply the Formalize pattern, run one of the following, depending on your JavaScript framework taste:

compass install formalize/dojo
compass install formalize/extjs
compass install formalize/jquery
compass install formalize/jquery-legacy
compass install formalize/mootools
compass install formalize/prototype
compass install formalize/yui

Don't forget to add this to your sass files

If you're using SCSS syntax, in your stylesheet:

@import "formalize";

or if you're using indented (Sass) syntax

@import "formalize"

After following the provided instructions, we need to tell Compass to use relative paths so that all our resources load correctly. In config.rb, we uncomment the following line:

relative_assets = true

New in version 0.0.5 If you don't need or want to support IE6 and/or IE7 you can add the following to your file before your @import "formalize"

If you're using SCSS syntax, in your stylesheet:

$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
@import "formalize";

or if you're using indented (Sass) syntax

$legacy-support-for-ie6: false
$legacy-support-for-ie7: false
@import "formalize"

This will not add the IE 6 and IE 7 css hacks and extra classes to the formalize css. You don't need the JS libraries either as the are for IE 6 & 7 also.

To remove legacy support for webkit and firefox and experimental support for opera, microsoft, and khtml css see:

And we're all set!


Licensed under MIT/GPL.

GPL license:

MIT license:

Something went wrong with that request. Please try again.