Skeleton 2.0, stylus version (adapted)

skeleton.styl

@import 'nib'
global-reset()

/**
 * Derived from Skeleton V2.0.4
 * Copyright 2014, Dave Gamache
 * www.getskeleton.com
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 12/9/2014
 */

/**
 * Table of contents
 * ––––––––––––––––––––––––––––––––––––––––––––––––––
 * - Variables
 * - Grid
 * - Base Styles
 * - Typography
 * - Links
 * - Buttons
 * - Forms
 * - Lists
 * - Code
 * - Tables
 * - Spacing
 * - Utilities
 * - Clearing
 * - Media Queries
 * ––––––––––––––––––––––––––––––––––––––––––––––––––
 */

// Variables

// Breakpoints
$bp-width-xxs ?= 400px
$bp-width-xs ?= 550px
$bp-width-sm ?= 750px
$bp-width-md ?= 1000px
$bp-width-lg ?= 1200px

// Colors
$light-grey ?= #e1e1e1
$dark-grey ?= #333333
$primary-color ?= #33c3f0
$secondary-color ?= lighten($dark-grey, 13.5%)
$border-color ?= #bbbbbb
$link-color ?= #1eaedb
$font-color ?= #222222

// Typography
$font-family ?= Raleway, HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif

// Grid Variables
$container-width ?= 960px
$container-width-xxs ?= 85%
$container-width-xs ?= 80%
$total-columns = 12
$column-width = 100 / $total-columns // calculates individual column width based off of # of columns
$column-margin = 4% // space between columns

// Misc
$global-radius = 4px

// Functions
grid-column-width($n)
  $column-width * $n - $column-margin * ($total-columns - $n) / $total-columns
grid-offset-length($n)
  grid-column-width($n) + $column-margin


// Grid
//––––––––––––––––––––––––––––––––––––––––––––––––––

.container
  position: relative
  width: 100%
  max-width: $container-width
  margin: 0 auto
  padding: 0 20px
  box-sizing: border-box

.column,
.columns
  width: 100%
  float: left
  box-sizing: border-box

// For devices larger than 400px
@media (min-width: $bp-width-xxs)
  .container
    width: $container-width-xxs
    padding: 0

// For devices larger than 550px
@media (min-width: $bp-width-xs)
  .container
    width: $container-width-larger-than-phablet
  .column,
  .columns
    margin-left: $column-margin
  .column:first-child,
  .columns:first-child
    margin-left: 0

  .one.column,
  .one.columns
    width: grid-column-width(1)
  .two.columns
    width: grid-column-width(2)
  .three.columns
    width: grid-column-width(3)
  .four.columns
    width: grid-column-width(4)
  .five.columns
    width: grid-column-width(5)
  .six.columns
    width: grid-column-width(6)
  .seven.columns
    width: grid-column-width(7)
  .eight.columns
    width: grid-column-width(8)
  .nine.columns
    width: grid-column-width(9)
  .ten.columns
    width: grid-column-width(10)
  .eleven.columns
    width: grid-column-width(11)
  .twelve.columns
    width: 100%
    margin-left: 0

  .one-third.column
    width: grid-column-width(4)
  .two-thirds.column
    width: grid-column-width(8)
  .one-half.column
    width: grid-column-width(6)

  // Offsets

  .offset-by-one.column,
  .offset-by-one.columns
    margin-left: grid-offset-length(1)
  .offset-by-two.column,
  .offset-by-two.columns
    margin-left: grid-offset-length(2)
  .offset-by-three.column,
  .offset-by-three.columns
    margin-left: grid-offset-length(3)
  .offset-by-four.column,
  .offset-by-four.columns
    margin-left: grid-offset-length(4)
  .offset-by-five.column,
  .offset-by-five.columns
    margin-left: grid-offset-length(5)
  .offset-by-six.column,
  .offset-by-six.columns
    margin-left: grid-offset-length(6)
  .offset-by-seven.column,
  .offset-by-seven.columns
    margin-left: grid-offset-length(7)
  .offset-by-eight.column,
  .offset-by-eight.columns
    margin-left: grid-offset-length(8)
  .offset-by-nine.column,
  .offset-by-nine.columns
    margin-left: grid-offset-length(9)
  .offset-by-ten.column,
  .offset-by-ten.columns
    margin-left: grid-offset-length(10)
  .offset-by-eleven.column,
  .offset-by-eleven.columns
    margin-left: grid-offset-length(11)

  .offset-by-one-third.column,
  .offset-by-one-third.columns
    margin-left: grid-offset-length(4)
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns
    margin-left: grid-offset-length(8)

  .offset-by-one-half.column,
  .offset-by-one-half.column
    margin-left: grid-offset-length(6)


// Base Styles
//––––––––––––––––––––––––––––––––––––––––––––––––––
// NOTE
// html is set to 62.5% so that all the REM measurements throughout Skeleton
// are based on 10px sizing. So basically 1.5rem = 15px :)

html
  font-size: 62.5%
body
  font-size: 1.5em // currently ems cause chrome bug misinterpreting rems on body element
  line-height: 1.6
  font-weight: 400
  font-family: $font-family
  color: $font-color


// Typography
//––––––––––––––––––––––––––––––––––––––––––––––––––

h1, h2, h3, h4, h5, h6
  margin-top: 0
  margin-bottom: 2rem
  font-weight: 300
h1
  font-size: 4.0rem
  line-height: 1.2
  letter-spacing: -.1rem
h2
  font-size: 3.6rem
  line-height: 1.25
  letter-spacing: -.1rem
h3
  font-size: 3.0rem
  line-height: 1.3
  letter-spacing: -.1rem
h4
  font-size: 2.4rem
  line-height: 1.35
  letter-spacing: -.08rem
h5
  font-size: 1.8rem
  line-height: 1.5
  letter-spacing: -.05rem
h6
  font-size: 1.5rem
  line-height: 1.6
  letter-spacing: 0

// Larger than phablet
@media (min-width: $bp-width-xs)
  h1
    font-size: 5.0rem
  h2
    font-size: 4.2rem
  h3
    font-size: 3.6rem
  h4
    font-size: 3.0rem
  h5
    font-size: 2.4rem
  h6
    font-size: 1.5rem

p
  margin-top: 0


// Links
//––––––––––––––––––––––––––––––––––––––––––––––––––

a
  color: $link-color
  &:hover
    color: darken($link-color, 5%)


// Buttons
//––––––––––––––––––––––––––––––––––––––––––––––––––

.button,
button
  display: inline-block
  height: 38px
  padding: 0 30px
  color: $secondary-color
  text-align: center
  font-size: 11px
  font-weight: 600
  line-height: 38px
  letter-spacing: .1rem
  text-transform: uppercase
  text-decoration: none
  white-space: nowrap
  background-color: transparent
  border-radius: $global-radius
  border: 1px solid $border-color
  cursor: pointer
  box-sizing: border-box

input
  &[type="submit"],
  &[type="reset"],
  &[type="button"]
    display: inline-block
    height: 38px
    padding: 0 30px
    color: $secondary-color
    text-align: center
    font-size: 11px
    font-weight: 600
    line-height: 38px
    letter-spacing: .1rem
    text-transform: uppercase
    text-decoration: none
    white-space: nowrap
    background-color: transparent
    border-radius: $global-radius
    border: 1px solid $border-color
    cursor: pointer
    box-sizing: border-box

.button:hover,
button:hover
  color: $dark-grey
  border-color: lighten($dark-grey, 33.3%)
  outline: 0

input
  &[type="submit"]:hover,
  &[type="reset"]:hover,
  &[type="button"]:hover
    color: $dark-grey
    border-color: lighten($dark-grey, 33.3%)
    outline: 0

.button:focus,
button:focus
  color: $dark-grey
  border-color: lighten($dark-grey, 33.3%)
  outline: 0

input
  &[type="submit"]:focus,
  &[type="reset"]:focus,
  &[type="button"]:focus
    color: $dark-grey
    border-color: lighten($dark-grey, 33.3%)
    outline: 0

.button.button-primary,
button.button-primary
  color: #fff
  background-color: $primary-color
  border-color: $primary-color

input
  &[type="submit"].button-primary,
  &[type="reset"].button-primary,
  &[type="button"].button-primary
    color: #fff
    background-color: $primary-color
    border-color: $primary-color

.button.button-primary:hover,
button.button-primary:hover
  color: #fff
  background-color: $link-color
  border-color: $link-color

input
  &[type="submit"].button-primary:hover,
  &[type="reset"].button-primary:hover,
  &[type="button"].button-primary:hover
    color: #fff
    background-color: $link-color
    border-color: $link-color

.button.button-primary:focus,
button.button-primary:focus
  color: #fff
  background-color: $link-color
  border-color: $link-color

input
  &[type="submit"].button-primary:focus,
  &[type="reset"].button-primary:focus,
  &[type="button"].button-primary:focus
    color: #fff
    background-color: $link-color
    border-color: $link-color
  &[type="email"],
  &[type="number"],
  &[type="search"],
  &[type="text"],
  &[type="tel"],
  &[type="url"],
  &[type="password"]
    height: 38px
    padding: 6px 10px // The 6px vertically centers text on FF, ignored by Webkit
    background-color: #fff
    border: 1px solid lighten($border-color, 8.8%)
    border-radius: $global-radius
    box-shadow: none
    box-sizing: border-box


// Forms
//––––––––––––––––––––––––––––––––––––––––––––––––––

textarea,
select
  height: 38px
  padding: 6px 10px // The 6px vertically centers text on FF, ignored by Webkit
  background-color: #fff
  border: 1px solid lighten($border-color, 8.8%)
  border-radius: $global-radius
  box-shadow: none
  box-sizing: border-box // Removes awkward default styles on some inputs for iOS

input
  &[type="email"],
  &[type="number"],
  &[type="search"],
  &[type="text"],
  &[type="tel"],
  &[type="url"],
  &[type="password"]
    appearance: none

textarea
  appearance: none
  min-height: 65px
  padding-top: 6px
  padding-bottom: 6px

input
  &[type="email"]:focus,
  &[type="number"]:focus,
  &[type="search"]:focus,
  &[type="text"]:focus,
  &[type="tel"]:focus,
  &[type="url"]:focus,
  &[type="password"]:focus
    border: 1px solid $primary-color
    outline: 0

textarea:focus,
select:focus
  border: 1px solid $primary-color
  outline: 0

label,
legend
  display: block
  margin-bottom: .5rem
  font-weight: 600

fieldset
  padding: 0
  border-width: 0

input
  &[type="checkbox"],
  &[type="radio"]
    display: inline

label > .label-body
  display: inline-block
  margin-left: .5rem
  font-weight: normal


// Lists
//––––––––––––––––––––––––––––––––––––––––––––––––––

ul
  list-style: circle inside

ol
  list-style: decimal inside
  padding-left: 0
  margin-top: 0

ul
  padding-left: 0
  margin-top: 0
  ul, ol
    margin: 1.5rem 0 1.5rem 3rem
    font-size: 90%

ol
  ol, ul
    margin: 1.5rem 0 1.5rem 3rem
    font-size: 90%

li
  margin-bottom: 1rem


// Code
//––––––––––––––––––––––––––––––––––––––––––––––––––

code
  padding: .2rem .5rem
  margin: 0 .2rem
  font-size: 90%
  white-space: nowrap
  background: lighten($light-grey, 6.4%)
  border: 1px solid $light-grey
  border-radius: $global-radius

pre > code
  display: block
  padding: 1rem 1.5rem
  white-space: pre


// Tables
//––––––––––––––––––––––––––––––––––––––––––––––––––

th,
td
  padding: 12px 15px
  text-align: left
  border-bottom: 1px solid $light-grey
  &:first-child
    padding-left: 0
  &:last-child
    padding-right: 0


// Spacing
//––––––––––––––––––––––––––––––––––––––––––––––––––

button,
.button
  margin-bottom: 1rem

input,
textarea,
select,
fieldset
  margin-bottom: 1.5rem

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form
  margin-bottom: 2.5rem


// Utilities
//––––––––––––––––––––––––––––––––––––––––––––––––––

.u-full-width
  width: 100%
  box-sizing: border-box

.u-max-full-width
  max-width: 100%
  box-sizing: border-box

.u-pull-right
  float: right

.u-pull-left
  float: left


// Misc
//––––––––––––––––––––––––––––––––––––––––––––––––––

hr
  margin-top: 3rem
  margin-bottom: 3.5rem
  border-width: 0
  border-top: 1px solid $light-grey


// Clearing
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Self Clearing Goodness

.container:after,
.row:after,
.u-cf
  content: ""
  display: table
  clear: both


// Media Queries
//––––––––––––––––––––––––––––––––––––––––––––––––––
// Note: The best way to structure the use of media queries is to create the queries
// near the relevant code. For example, if you wanted to change the styles for buttons
// on small devices, paste the mobile query code up in the buttons section and style it
// there.

@media (min-width: $bp-width-xxs)
  // Larger than mobile

@media (min-width: $bp-width-xs)
  // Larger than phablet (also point when grid becomes active)

@media (min-width: $bp-width-sm)
  // Larger than tablet

@media (min-width: $bp-width-md)
  // Larger than desktop

@media (min-width: $bp-width-lg)
  // Larger than Desktop HD

The only difference with the Sass version is the name & usage of the breakpoint variables (I use simple sizes instead of "mobile", "phablet" etc.)