Hello World

tl;dr

We’re Solving Similar Problems

tl;dr

We Have Unique Constraints

tl;dr

Let’s Work Together

Susy

Virgin America

Esquire UK

Media Molecule

2008 Flashback…

No Programming Skillz

I make artsy bullshit

No Original Ideas

Thanks Natalie Downe!

No Plan

Just scratching an itch

No Open Source Experience

No GitHub account!

35 Followers

I lurk exclusively

No Stinkin’ Badges

seriously, badges weren’t a thing

OddBird

Remember CSS?

.not-a-real--use-case {
  display: inline; /* double-margin hack */
  float: left;
  height: 1%; /* hasLayout hack */
  margin-right: -3px; /* sub-pixel rounding hack */
  padding: 5%;
  width: 25%;
  \width: 35%; /* box model hack */
}

Open Styling Tools!

960gs & BluePrint?

Not My Code

<div class="grid_12">940</div>
<div class="clear"></div>
<div class="grid_1">60</div>
<div class="grid_11">860</div>
<div class="clear"></div>
<div class="grid_2">140</div>
<div class="grid_10">780</div>

Not My Design

960gs

Rapid Prototypes Limitations

Preset width, columns, gutters, technique & markup

Tools Should Fit You

“Sorry, this hammer only builds patio chairs…”

Similar Layout Problems:

container, columns, padding, margins

Unique Layout Constraints?

float vs inline-block vs flexbox? gutter-handling?

CSS Systems

target / context = multiplier

everything you need to know about responsive layouts

OMG Math

// 3 columns, of 12, prefix 1...
aside {
  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%
}

Day 1 (with help): Susy 0.1

4 Settings, 5 mixins, WTF utilities

Susy Initial Commit by Carl Meyer

Shitty Docs

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

WTF

#page
#left-nav
#main-content

Complex Nesting AG Test

(Thanks Nicole Sullivan!)

10-column with defaults

1/5

1/5

1/2

1/2

1/3

1/2

1/2

1

MOAR Help!


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

DIY Grid System System

// Custom grids
$susy: (
  columns: 12,
  gutters: .25,
  gutter-position: after,
  math: fluid,
  output: float,
);
// Quick shortcuts
aside {
  @include span(3);
  @include prefix(1);
}

Make it Extensible

Shortcuts + Customization

30em 10 .25 inside

1/5

1/5

1/2

1/2

1/3

1/2

1/2

1

10 (4em 1em) inside-static

1/5

1/5

1/2

1/2

1/3

1/2

1/2

1

10 (80px 20px) static split rtl

1/5

1/5

1/2

1/2

1/3

1/2

1/2

1

(1 2 1 1 3 1 3 2 1 4) .5 before isolate

1/5

1/5

1/2

1/2

1/3

1/2

1/2

1

Do Less With Functions

Your Layout, Your Markup, Our Math

.float {
  float: left;
  width: span(3 of 12);
}
.flexbox {
  flex-grow: 1; 
  flex-basis: span(3 of 12);
}

Toolkits Are A Byproduct

DRY Code

Unique” Constraints

Join The Conversation

Don’t just fork it, pull request!

Systems > Solutions

provide tools, not pre-built structures

Find The Core

Su: 2 Settings, 5 Functions

$susy: (
  columns: 12,
  gutters: 1/4,
);
$fluid: percentage(susy(3) / susy(12));
$static: susy(3) * 4em;

CSS-Only Tabs

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?
@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;
        }
      }
    }
  }
}

What’s Essential?

@mixin input-toggle {
  @include is-hidden;

  &:checked { 
    @content; 
  }
}

Share on GitHub*

* Where the people are

Add a README

Installation & Getting Started

Copyright (c) 2015, 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.

Semantic Versioning + Tags

#  Major.Minor.Patch
git tag -a 1.4.3 -m 'version 1.4.3'
git push --tags

Document (ergo sum)

SassDoc

by Hugo Giraudel

/// Assert that a parameter is `true`
/// @access public
/// @group testing
/// @param {*} $assert - Assert
/// @param {String} $description [''] - Assert description
/// @require {mixin} _true-fail-details
/// @require {mixin} _true-assert-start
/// @require {mixin} _true-assert-stop
@mixin assert-true($assert, $description: '') {
  /* ... */
}

SassDoc

Package & Distribute*

* Where the people are

Sache.in

Copy & Paste

// sache.json
{
  "name": "susy",
  "description": "Web layout power-tools for Sass.",
  "tags": ["layout", "grid", "rwd"]
}
// bower.json
{
  "name": "susy",
  "main": "sass/_susy.scss",
  "description": "Web layout power-tools for Sass.",
  "authors": ["Eric Suzanne <eric@oddbird.net>"],
  "homepage": "http://susy.oddbird.net",
  "license": "BSD-3-Clause",
}
// package.json (with eyeglass!)
{
  "name": "susy",
  "version": "2.2.5",
  "description": "Sass power-tools for web layout.",
  "author": "Eric Suzanne <eric@oddbird.net>",
  "main": "sass/_susy.scss",
  "repository": {
    "type": "git",
    "url": "git://github.com/ericam/susy.git"
  },
  "eyeglass": {
    "exports": "eyeglass-exports.js"
  },
  "license": "BSD-3-Clause",
  "bugs": {
    "url": "https://github.com/ericam/susy/issues"
  }
}

Launch Softly

iterate, iterate, iterate

Maintain a CHANGELOG

Facilitate Community

CONTRIBUTING.md

GitHub Contrib

Give Credit

Give more credit

Respond to Issues

quickly & kindly

Test Your Logic

keep your tests passing!

True

@include test('asymmetrical columns') {
  @include assert-equal(
    column-count(1 3 5), length(1 3 5),
    'Asymmetrical grid-count should equal list length.');
}

Mocha + True

$ npm test

  Settings
    ✓ true-context
    ✓ _true-context

  Utilities
    ✓ Map Add
    ✓ String Split
    ✓ Strict Equal

  # ...

  32 passing (14ms)

Travis CI + True

GitHub Contrib

# travis.yml
language: node_js
node_js:
  - "0.10"

Go Make Shit Up!

no excuses