https://github.com/snugug/aura

A Sass+Compass based Responsive Website framework
https://github.com/snugug/aura

Last synced: about 1 year ago
JSON representation

A Sass+Compass based Responsive Website framework

• Host: GitHub
• URL: https://github.com/snugug/aura
• Owner: Snugug
• License: other
• Created: 2012-01-26T23:19:15.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2012-08-07T11:52:09.000Z (almost 14 years ago)
• Last Synced: 2025-03-05T09:03:31.120Z (over 1 year ago)
• Language: Ruby
• Homepage:
• Size: 563 KB
• Stars: 39
• Watchers: 6
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Aura

Aura is a responsive framework for Sass+Compass powered by Susy

and Modular Scale. This extension requires Sass 3.2 (or the most up-to-date

beta if Sass 3.2 isn't out).

## To install:

    gem install compass-aura

    @include 'aura'

### Susy 1.0

Aura has been updated to, and now requires, Susy 1.0. See the [Susy 1.0 Changelog](https://github.com/ericam/susy/blob/master/CHANGELOG.mkdn) for tips on updating your code to be Susy 1.0 compatible. I have not built in defaults for Susy 1.0's `at-breakpoint` mixin because I firmly believe that is a design choice that should not be assumed by Aura (at least not without some out of the box thinking and some silly maths), but I have added a function, `aura-break`, that takes one of the breakpoint sizes' names that Aura generates and returns the value perfect for using with `at-breakpoint`, allowing you to do something like following:

`@include at-breakpoint(aura-break('medium') 8)`

If you want to set arbitrary breakpoints, you can use Aura's `respond-to` mixin (see advanced usage).

## Basic Setup

Set your Body Font Size, in any measurement you are comfortable in.

Suggested minimum is 16px/1em/100%/12pt

    $body-font-size: 16px;

Decide if you want your fonts to scale:

    $font-scale: true/false;

Include the setup mixin:

    @include aura-setup;

Whichever item you want as your main content wrapper, @extend .measure for

setup:

    #main-content {

      @extend .measure;

    }

To use the calculated breakpoints, use the 'respond-to' mixin with "full",

"large", "medium", or "small" as the input.

    #wrapper {

      background-color: red;

      

      @include respond-to('large') {

        background-color: green;

      }

    }

See index.html and style.scss for examples as to how to use. More to come,

including advanced usage, better documentation, and some best practices.

Setting Up Sidebars:

* Number of Sidebars (0, 1, 2). If 0, also need to set $main-content-cols and $total-cols equal.

* Side of the Sidebar (left, right, both, none).

* Sidebar Widths (Integer number of columns for left (and right) to span, such as 2, 3).

Default for 1 sidebar is difference between $main-content-cols and $total-cols.

Default for 2 sidebars is split difference between $main-content-cols and

$total-cols with left sidebar getting overflow from odd remainders.

If one width is provided and you have more than one sidebar, the same width will

be used for both sidebars.

## Advanced Usage

Todo. Respond-to mixin 

## License

This software is © Sam Richard and is available under a dual MIT/GPL2 License.