Merge pull request #210 from jenius/remove-nib

Remove Nib

Author: Jeff Escalante

axis/buttons.styl

@@ -12,7 +12,7 @@
 // ex. highlight: .7
 
 -highlight($strength = .3)
-  box-shadow(s("inset 0 1px 0 %s", rgba(255,255,255,$strength)))
+  box-shadow: s("inset 0 1px 0 %s", rgba(255,255,255,$strength))
 
 // Function: parse
 // Used internally for setting button sizes.
@@ -142,7 +142,7 @@ glossy-button($color = $default-color, $size = "medium", $text-color = null, $sh
     text-shadow: 1px 1px 1px $hover-color
 
   &:active
-    box-shadow(s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6)))
+    box-shadow: s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6))
     text-shadow: $down-shadow
     border-color: darken($color, 18%)
 

axis/forms.styl

@@ -7,7 +7,7 @@
 
 -focus-glow($color = $default-color)
   &:focus
-    box-shadow(0 0 5px rgba($color,.7))
+    box-shadow: 0 0 5px rgba($color,.7)
     border: 1px solid desaturate($color, 35%)
     outline: none
 
@@ -22,7 +22,7 @@
 // ex. input: #D45D86 400px
 
 input($color = $aqua, $width = 250px)
-  box-shadow(inset 0 1px 1px rgba(#000, 0.1))
+  box-shadow: inset 0 1px 1px rgba(#000, 0.1)
   -webkit-font-smoothing: antialiased
   font-size: unit($font-size, 'px')
   font-family: $font-stack
@@ -35,7 +35,6 @@ input($color = $aqua, $width = 250px)
   width: $width
   text-shadow: 0 0 1px rgba(#fff, .1)
   transition()
-  pie()
   if color
     -focus-glow($color)
   else

axis/gradients.styl

@@ -21,10 +21,7 @@ gradient($color1, $color2 = null, $strength = 10%)
   $start = $color2 ? $color1 : lighten($color1, $strength)
   $end = $color2 ? $color2 : darken($color1, $strength)
   background: $start
-  background: $end linear-gradient(top, $start, $end) repeat-x
-  if $pie-enabled
-    -pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
-    pie()
+  background: $end linear-gradient(180deg, $start, $end) repeat-x
 
 // Mixin: Image Gradient
 //
@@ -45,7 +42,4 @@ image-gradient($color1, $color2 = null, $image-path = 'noise.png', $strength = 1
   $start = $color2 ? $color1 : lighten($color1, $strength)
   $end = $color2 ? $color2 : darken($color1, $strength)
   background: $start
-  background: url($img-path $image-path) repeat, $end linear-gradient(top, $start, $end) repeat-x
-  if $pie-enabled
-    -pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
-    pie()
+  background: url($img-path $image-path) repeat, $end linear-gradient(180deg, $start, $end) repeat-x

axis/index.styl

@@ -4,7 +4,6 @@
 
 @import 'settings'
 @import 'reset'
-@import 'vendor'
 @import 'utilities'
 @import 'gradients'
 @import 'images'

axis/layout.styl

@@ -1,7 +1,55 @@
-// Alias: group
-// Clearfix with a better name. Excellent for wrangling floats.
+// Mixin: group
+// Clearfix with a better name. Excellent for wrangling floats. Taken from
+// http://www.cssmojo.com/latest_new_clearfix_so_far/
+// Does not support IE 6 and 7 because you should not support them either.
+
+group()
+  &:after
+    content: ""
+    display: table
+    clear: both
+
+// Alias: clearfix
+// Group with a worse name. If you need really can't break the habit.
+clearfix = group
+
+// Function: pos
+// Backs position helpers, found below
+-pos(type, args)
+  i = 0
+  position: unquote(type)
+  for j in (1..4)
+    if length(args) > i
+      {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
+    i += 1
+
+// Mixin: Positions
+// Syntax shortcuts for absolute, relative, and fixed positioning. Ported
+// from nib: https://github.com/tj/nib/blob/master/lib/nib/positions.styl
+
+fixed()
+  -pos('fixed', arguments)
+
+absolute()
+  -pos('absolute', arguments)
+
+relative()
+  -pos('relative', arguments)
+
+// Mixin: Size
+// Shortcut for setting width and height quickly. If passed one value, sets this
+// value as both width and height.
+//
+// ex. size: 10px 30px
+// ex. size: 10px
 
-group = clearfix
+size()
+  if length(arguments) == 1
+    width: arguments[0]
+    height: arguments[0]
+  else
+    width: arguments[0]
+    height: arguments[1]
 
 // Mixin: Columns
 //
@@ -30,19 +78,6 @@ columns($count = 3, $gap = 30px, $width = null, $rule = null)
 avoid-column-break()
   column-break-inside: avoid
 
-// Alias: Inline Block
-// Cross browser inline block display. Saves many IE headaches.
-
-inline-block()
-  display: inline-block
-
-  if support-for-ie
-    display: -moz-inline-stack
-    vertical-align: baseline
-    zoom: 1
-    *display: inline
-    *vertical-align: auto
-
 // Mixin: Vertically Align
 // Cross browser vertical align. Works down to IE9.
 //
@@ -73,24 +108,24 @@ vertically-align($reset = null)
 // direct children. The first one will float to the left, the second one will be
 // to the right of the first, and third will go farthest right.
 //
-// ex. media()
-// ex. media: 15px
-// ex. media: 15px 10px
+// ex. media-object()
+// ex. media-object: 15px
+// ex. media-object: 15px 10px
 
-media($margin = 10px)
+media-object($margin = 10px)
 
   $left-margin = $margin
   $right-margin = $margin
 
-  if length($arguments) > 1
-    $left-margin = $arguments[0]
-    $right-margin = $arguments[1]
+  if length(arguments) > 1
+    $left-margin = arguments[0]
+    $right-margin = arguments[1]
 
   overflow: hidden
   zoom: 1
 
   & > *
-    inline-block()
+    display: inline-block
     overflow: hidden
   & > *:first-child
     float: left

axis/reset.styl

@@ -2,9 +2,86 @@
 // Reset
 // -----
 
-// global-reset delegated to nib
-
-$support-for-ie ?= true
+// Global Reset
+// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
+// ported from Nib
+
+global-reset()
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td
+    reset-box-model()
+    reset-font()
+  body
+    reset-body()
+  ol, ul
+    list-style: none
+  table
+    reset-table()
+  caption, th, td
+    reset-table-cell()
+  a img
+    border: none
+
+nested-reset()
+  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+  pre, a, abbr, acronym, address, code, del, dfn, em, img,
+  dl, dt, dd, ol, ul, li, fieldset, form, label,
+  legend, caption, tbody, tfoot, thead, tr
+    reset-box-model()
+    reset-font()
+  table
+    reset-table()
+  caption, th, td
+    reset-table-cell()
+  a img
+    border: none
+
+reset-box-model()
+  margin: 0
+  padding: 0
+  border: 0
+  outline: 0
+
+reset-font()
+  font-weight: inherit
+  font-style: inherit
+  font-family: inherit
+  font-size: 100%
+  vertical-align: baseline
+
+reset-body()
+  line-height: 1
+  color: black
+  background: white
+
+reset-table()
+  border-collapse: separate
+  border-spacing: 0
+  vertical-align: middle
+
+reset-table-cell()
+  text-align: left
+  font-weight: normal
+  vertical-align: middle
+
+reset-html5()
+  article, aside, canvas, details, figcaption,
+  figure, footer, header, hgroup, menu, nav,
+  section, summary, main
+    reset-box-model()
+    display: block
+  audio, canvas, video
+    display inline-block
+    *display inline
+    *zoom 1
+  audio:not([controls]),[hidden]
+    display none
 
 // Mixin: Normalize CSS
 // Based on v3.0.1 https://github.com/necolas/normalize.css

axis/settings.styl

@@ -34,48 +34,33 @@ $silver   = #DDDDDD
 $gray     = #AAAAAA
 $black    = #222222
 
-//Use as default HTML colors
-navy = $navy
-blue = $blue
-aqua = $aqua
-teal = $teal
-olive = $olive
-green = $green
-lime = $lime
-yellow = $yellow
-orange = $orange
-red = $red
-maroon = $maroon
+// Use as default HTML colors
+navy    = $navy
+blue    = $blue
+aqua    = $aqua
+teal    = $teal
+olive   = $olive
+green   = $green
+lime    = $lime
+yellow  = $yellow
+orange  = $orange
+red     = $red
+maroon  = $maroon
 fuchsia = $fuchsia
-purple = $purple
-white = $white
-silver = $silver
-gray = $gray
-black = $black
+purple  = $purple
+white   = $white
+silver  = $silver
+gray    = $gray
+black   = $black
 
 // Default color
 $default-color = $blue
 
 // Text highlight color
 $highlight-color = $blue
 
-// Custom image base path for roots mixins
+// Custom image base path for axis mixins
 $img-path = ''
 
-// Support for old IE
-support-for-ie = $support-for-ie  // Needed until we port/drop nib
-$support-for-ie = false
-
 // Ligatures
 $ligatures = false
-
-// Vertical rhythm
-$base-line-height = 24px
-$default-rhythm-border-style = solid
-$relative-font-sizing = true
-$round-to-nearest-half-line = false
-$min-line-padding = 2px
-
-// Progressive IE (http://css3pie.com/)
-$pie-enabled = false
-$pie-path = '/pie.htc'

axis/typography.styl

@@ -47,6 +47,20 @@ font-face($name, $folder, $weight = 'normal', $style = 'normal')
     font-weight: unquote($weight)
     font-style: unquote($style)
 
+
+// Mixin: Ellipsis
+// Truncate text to the width of its container...
+// ex: ellipsis()
+// ex: ellipsis: 300px
+
+ellipsis($width = 100%)
+  white-space: nowrap
+  display: inline-block
+  max-width: 100%
+  overflow: hidden
+  text-overflow: ellipsis
+  word-wrap: normal
+
 // Function: Line Height
 //
 // If there is a font-size set on the parent element, adjusts the line height to
@@ -56,7 +70,7 @@ font-face($name, $folder, $weight = 'normal', $style = 'normal')
   if @font-size
     line-height: 1.6em
   else
-    line-height: unit(font-size*1.6, 'px')
+    line-height: unit($font-size*1.6, 'px')
     line-height: 1.6rem
 
 // Mixin: Text Margin
@@ -381,6 +395,17 @@ hyphenation()
     -webkit-hyphenate-after:  3
     hyphenate-lines:          3
 
+// Mixin: Shadow Stroke
+//
+// Creates a text outline using text-shadow. Ported from nib.
+// Takes a color.
+//
+// ex: shadow-stroke()
+// ex: sahdow-stroke(red)
+
+shadow-stroke($color = $blue)
+  text-shadow: -1px -1px 0 $color, 1px -1px 0 $color, -1px 1px 0 $color, 1px 1px 0 $color
+
 // Additive Mixin: Base
 //
 // WARNING: Creates classes in your css and styles them - not to be used inside