Show Your Work & Share Your Toys

Eric Meyer Suzanne | @ericmsuzanne

SUMMARY: 55 Tests, 55 Passed, 0 Failed

Arty Bullshit

Writing+Music+Performance

Susy

tl;dr

We're all solving similar problems

tl;dr

We can solve them better together

tl;dr

Join the conversation!

No Ruby Skillz

No Original Ideas

No Plan

No Experience

No Followers

No Stinkin’ Badges

2008: OddBird

2008: CSS Systems

Natalie Downe

target / context = multiplier

// span 3 of 12 prefix 1...
.widget {
  width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
  margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
  padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
}

2009: Compass + Sass

Susy 0.1

4 Settings, 5 mixins

=get_col_width(!n, !context = !total_cols)
  :width= ((!n * !col_width) + ((!n - 1) * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"

// Example:
#page
  +grid-container
  #left-nav
    +grid-col(3)
  #main-content
    +grid-prefix(1)
    +grid-col(4, 10, true)

#page

#left-nav

#main-content

Community Review

Carl Meyer
Jonny Gerig Meyer
Chris Eppstein
Aaron Gray
Jina Bolton
Danny Palmer
Tsachi Shlidor
Rachel Nabors
Mason Wendell
Scott Kellum
Sam Richard
Daniel Bayerlein
Matija Marohnic
Thomas bredin-Grey
Tim Berman
djessup
Rémi Barraquand
Leo Picado
Ben Frain
Bart Olsthoorn
aaandre
Hilary (hilz) Holz
Tony Adams
Kenny Rasschaert
Patrick Marsceill
Jinzhu
Zendy Wongso
Rasmus Kjær
Fazal Khan
Steven Noble
Norris

Show Your Work

Plugins are byproducts

Systems > Solutions

Minimum Possible

Avoid leaky abstractions

CSS-Only Tabs

Equal-height with float isolation!

one two three

Responsive CSS Tabs in Sass, with help from the float isolation method.

Container wraps all tabs dynamically
Container remains equal-height
No JS Height calculations
The entire thing is responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Illum, deserunt, nihil excepturi eius quisquam aspernatur aperiam error ut reiciendis numquam quasi accusantium rerum nesciunt tempore expedita velit laborum architecto quod?

Just the system

one two three

Responsive CSS Tabs in Sass, with help from the float isolation method.

Container wraps all tabs dynamically
Container remains equal-height
No JS Height calculations
The entire thing is responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Illum, deserunt, nihil excepturi eius quisquam aspernatur aperiam error ut reiciendis numquam quasi accusantium rerum nesciunt tempore expedita velit laborum architecto quod?

VS.

@mixin tabs(
  $slugs,
  $nested: $default-nested-selectors,
  $checked: $default-checked-selector
) {
  $nested-tabs: $nested;
  $nested-content: $nested;
  @if length($nested) > 1 {
    $nested-tabs: nth($nested, 1);
    $nested-content: nth($nested, 2);
  }

  @each $slug in $slugs {
    $toggle   : '[#{$toggle-attribute}*="#{$slug}"]';
    $title    : '[#{$title-attribute}*="#{$slug}"]';
    $content  : '[#{$content-attribute}*="#{$slug}"]';

    #{$content} { @extend %hide-tab-content; }
    #{$toggle} {
      @extend %hide-tab-toggle;
      &#{$checked} {
        & ~ #{$nested-tabs} #{$title} {
          @extend %active-tab-title !optional;
        }
        & ~ #{$nested-content} #{$content} {
          @extend %show-tab-content;
        }
      }
    }
  }
}

@mixin toggle {
  @extend %hide;
  &:checked { @content; }
}

Observe wild code

Watch. Listen. Adjust.

Add a Readme

Installation & Getting Started

Choose a license

BSD, MIT... [GPL, Apache, MPL]

Thanks Carl Meyer and Jacob Kaplan-Moss

Copyright (c) 2014, Eric M. Suzanne
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of the author nor the names of other
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Publish on Github

Semantic Version & tag

#  Major.Minor.Patch
git tag v1.4.3
git push --tags

Document (ergo sum)

Sphinx + ReadTheDocs

Maintain a Changelog

Launch softly

Ask for Feedback

@ericmsuzanne

Help us help you

CONTRIBUTING.md

Give too much credit

Respond to issues

Quickly + kindly

Package & Distribute

Compass, RubyGems, Sache, Bower

# command line
compass create susy --using compass/extension -x scss

# sache.json
{
  "name": "susy",
  "description": "Web layout power-tools for Sass.",
  "tags": ["layout", "grid", "rwd"]
}

# bower.json
{
  "name": "susy",
  "version": "2.1.0",
  "main": "sass/_susy.scss",
  "description": "Web layout power-tools for Sass.",
  "authors": ["Eric Suzanne <eric@oddbird.net>"],
  "homepage": "http://susy.oddbird.net",
  "keywords": [
    "layout", "grid", "sass", "compass", "responsive", "rwd", "semantic"
  ],
  "license": "BSD-3-Clause",
}

Test your logic

Keep tests passing!

True

@include test('column-count') {

  @include assert-equal(
    column-count(12), 12,
    'Symmetrical grid-count should equal $columns setting.');

  @include assert-equal(
    column-count(1 2 3), 3,
    'Asymmetrical grid-count should equal the list-length of $columns setting.');

}

Travis

# travis.yml
language: ruby
script: "rake"
rvm:
  - 2.0.0

Copy & Paste

Make shit up!

No excuses

DIY Grids with Su

2 Settings & 5 Functions

$susy: (
  columns: 12,
  gutters: 1/4,
);

$fluid: percentage(susy(3) / susy(12));
$static: susy(3) * 4em;