Unsemantic Compass Plugin

This is a Compass Plugin that utilizies the Unsemantic CSS Framework (unsemantic.com/) by Nathan Smith. This plugin is very simple way to allow people to create a Grid system for websites using the unsemantic-vars.sass file within the sass/partials folder. This does not include the adapt version. This is only for the responsive version of the framework. I have duplicated the code from sass/partials/unsemantic-vars.sass file to the main .sass file for the compass plugin so it will be easier to implement the @import. Instead of @import “compass-unsemantic/unsemantic-vars” people can just write @import “compass-unsemantic” at the appropriate places. This plugin is mainly meant for people who want to roll their own grid using the Unsemantic CSS Framework (unsemnatic.com/). For documentation on where to add these import statements refer to unsemantic.com/sass-documentation#14-roll-your-own.

Installation

Inside Terminal/Command Line:

gem install compass-unsemantic

Just add inside config.rb file of compass project:

require "compass-unsemantic"

Sass Compiler Issue github.com/nathansmith/unsemantic/issues/20. Add this to config.rb file:

disable_warnings = true

Usage

For documentation on where to add import statements refer to unsemantic.com/sass-documentation#14-roll-your-own.

Place within CSS3 Media Queries:

@import "compass-unsemantic"

Default variables to be aware of:

$unsemantic-ie7-support: true !default

$container-max-width: 1200px !default

$gutter-half: 10px !default

$lang-forward: left !default

$lang-reverse: right !default

This provides the necessary mixin functions to create the responsive grid per media query. If you don’t want to roll your own grid, you can import separate .sass files that Unsemantic provides. Read on for more information.

Available Sass Files to import independantly

If you don’t want to roll your own and instead want a pre-defined stylesheet built by Nathan Smith:

- @import "compass-unsemantic/demo"
- @import "compass-unsemantic/ie"
- @import "compass-unsemantic/reset"
- @import "compass-unsemantic/text"
- @import "compass-unsemantic/unsemantic-grid-base-tablet"
- @import "compass-unsemantic/unsemantic-grid-base"
- @import "compass-unsemantic/unsemantic-grid-desktop"
- @import "compass-unsemantic/unsemantic-grid-mobile"
- @import "compass-unsemantic/unsemantic-grid-responsive-tablet"
- @import "compass-unsemantic/unsemantic-grid-responsive"
- @import "compass-unsemantic/unsemantic-grid-tablet"
- @import "compass-unsemantic/unsemantic-ie-snap"
- @import "compass-unsemantic/unsemantic-vars"

*Note: To help people who don’t want to go through all the .sass files. The main files that gives you responsive stylesheet.

- @import "compass-unsemantic/unsemantic-grid-responsive-tablet" //This is responsive with tablet
- @import "compass-unsemantic/unsemantic-grid-responsive" // This is responsive without tablet

*Note: This is to fix windows 8 snap mode.

- @import "compass-unsemantic/unsemantic-ie-snap"