added clearfix()

lib/nib/clearfix.styl

@@ -0,0 +1,23 @@
+
+/*
+ * The Magnificent CLEARFIX.
+ *
+ * Useful for clearing floats without structural markup. This specific
+ * clearfix method also prevents margin-collapsing on child elements.
+ *
+ * See http://j.mp/bestclearfix
+ *
+ */
+
+clearfix()
+  &:before,
+  &:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    overflow: hidden;
+  }
+  &:after {
+    clear: both;
+  }
+  zoom: 1;

test/cases/clearfix.css

@@ -0,0 +1,13 @@
+#clearfix {
+  zoom: 1;
+}
+#clearfix:before,
+#clearfix:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  overflow: hidden;
+}
+#clearfix:after {
+  clear: both;
+}

test/cases/clearfix.styl

@@ -0,0 +1,5 @@
+
+@import 'nib/clearfix'
+
+#clearfix
+  clearfix()

test/clearfix.styl

@@ -0,0 +1,12 @@
+
+@import 'nib/clearfix'
+
+#clearfix
+  clearfix()
+  background-color: green
+  padding: 5px
+
+#clearfix div
+  background-color: blue
+  width: 30%
+  float: left

test/index.jade

@@ -1,9 +1,10 @@
 html
-  head 
+  head
     title Nib
     link(rel='stylesheet', href='/test.css')
     link(rel='stylesheet', href='/gradients.css')
     link(rel='stylesheet', href='/buttons.css')
+    link(rel='stylesheet', href='/clearfix.css')
     script(src='/jquery.min.js')
     script
       $(function(){
@@ -38,12 +39,19 @@ html
           td hover
           - each name in names
             td: input(type='button', value=name, class=name).hover
-        tr 
+        tr
           td active
           - each name in names
             td: button(class=name).active= name
         tr
           td focus
           - each name in names
             td: button(class=name).focus= name
-
+    h2 Clearfix
+    div#clearfix
+      div
+        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo
+        | turpis quis mauris tempus commodo a non tellus. Sed eu convallis
+        | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed
+        | risus lectus. Proin vulputate elit sed eros consectetur interdum.
+      | Suspendisse potenti.