mirisuzanne

// Mixins --------------------------------------------------------------

=keyframes($name)
  @-moz-keyframes #{$name}
    @children
  @-webkit-keyframes #{$name}
    @children
  @keyframes #{$name}
    @chldren

mirisuzanne

// just a sample...

div[role="main"] {
  @include un-column;
  @include full;
  @include pie-clearfix;
  @include adjust-font-size-to(21px);
  // we can handle the differences inline...
  .ie7 &, .ie8 & {
    @include trailer(1, 21px); 

mirisuzanne

.text, .select, .check{
  .column0 &{

  }
  .column1 &, .column2 &{

  }
}

mirisuzanne

Susy 0.9 Tutorial

See the official Susy site for 1.0 documentation.

For this tutorial I'm assuming you are already comfortable with CSS, Sass (I'll use the SCSS syntax) and Compass. Please get set up with each one of those before attempting to use Susy. Sass and Compass both have their own setup instructions and tutorials that you can use.

There is also reference documentation in the works.

Building a Susy Grid

mirisuzanne

Susy 0.9 Reference Documentation

See the official Susy site for 1.0 documentation.

Terms

• Susy Grid: A grid that you build with Susy. You can have multiple on one page if you need.
• Grid Element: Any HTML element that is aligned to a Susy Grid.
• Container: The root element in a Susy Grid. Anything inside it is a potential Grid Element.

mirisuzanne

@function move($n,$context:false)
  $move: columns($n,$context) + gutter($context)
  @return $move

=push($n,$c:false)
  $sg: side-gutter()
  @if $c
    $sg: 0

  margin-left: $sg + move($n,$c)

mirisuzanne

@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }

mirisuzanne

// Tint and Shade for Compass ------------------------------------------------

@function tint($color, $dilution: 50) {
  $white: rgba(255, 255, 255, 1);
  @if $color == "transparent" {
    $color: rgba(0, 0, 0, 0); }
  @if $dilution < 0 or $dilution > 100 {
    @warn "Dilution #{$dilution} must be between 0 and 100"; }
  $tint-color: mix($color, $white, 100 - $dilution);
  @return $tint-color; }

mirisuzanne

Susy Goals

• DONE Stay up-to-date with the best techniques for developing fluid/elastic cross-browser grids.
• DONE Build in media-query handling for responsive design.
• DONE Add missing features such as push and pull.
• STARTED Update and maintain the documentation.
  • DONE [Reference][reference]
  • DONE [Tutorial][tutorial]
• Comparisons with other grid systems (Blueprint, 960, ...?)

mirisuzanne

Meaningful, Modular CSS (with Sass, Compass, and Susy)

CSS is becoming more powerful and more complex every year. Our designs are the best they have ever been, but the code to build them is out of control: a minefield of browser inconsistencies and secret workarounds, repetitive and inefficient declarations, and hidden meanings.

That's no way to write maintainable code.

It's time to move front-end development into the present with DRY, modular code. What if you could write CSS that made sense, everyone could read, and you could share it across projects, all without repeating yourself throughout the document? What if you could call a column a column and leave it at that?

You can. With the abstractions available in pre-processors, you can create and share simple tools that make CSS more specific, simple, and concrete than ever before. I'll show you how tools like Sass, Compass, and Susy can make your CSS workflow, maintenance, and learning-curve easier