add stylus port

index.styl

@@ -0,0 +1 @@
+@import 'stylus/foundation'

package.json

@@ -1,9 +1,14 @@
 {
   "name": "zurb-foundation",
   "version": "4.0.0-wip",
+  "main": "stylus/foundation",
   "devDependencies": {
     "grunt": "~0.4.0",
     "grunt-contrib-watch": "~0.1.0",
     "grunt-contrib-qunit": "~0.1.1"
+  },
+  "dependencies": {
+    "stylus": "~0.32.1",
+    "stylus-type-utils": "~0.0.3"
   }
 }

stylus/foundation.js

@@ -0,0 +1,27 @@
+
+/**
+ * Library version.
+ */
+exports.version = require('../package.json').version;
+
+/**
+ * Stylus path.
+ */
+
+exports.path = __dirname;
+
+/**
+ * Return the plugin callback for stylus.
+ *
+ * @return {Function}
+ * @api public
+ */
+
+function plugin() {
+  return function(style){
+    style.include(__dirname);
+    style.use(require('stylus-type-utils')());
+  };
+}
+
+exports = module.exports = plugin;

stylus/foundation.styl

@@ -0,0 +1,42 @@
+// Make sure the charset is set appropriately
+@charset "UTF-8";
+
+// This includes all of the foundation global elements that are needed to work with any of the other files.
+@import "foundation/foundation-global";
+
+// Foundation Components
+@import "foundation/components/global";
+@import "foundation/components/grid";
+@import "foundation/components/visibility";
+@import "foundation/components/block-grid";
+@import "foundation/components/type";
+@import "foundation/components/buttons";
+@import "foundation/components/forms";
+@import "foundation/components/custom-forms";
+@import "foundation/components/button-groups";
+@import "foundation/components/dropdown-buttons";
+@import "foundation/components/split-buttons";
+@import "foundation/components/flex-video";
+@import "foundation/components/section";
+@import "foundation/components/top-bar";
+@import "foundation/components/orbit";
+@import "foundation/components/reveal";
+@import "foundation/components/joyride";
+@import "foundation/components/clearing";
+@import "foundation/components/alert-boxes";
+@import "foundation/components/breadcrumbs";
+@import "foundation/components/keystrokes";
+@import "foundation/components/labels";
+@import "foundation/components/inline-lists";
+@import "foundation/components/pagination";
+@import "foundation/components/panels";
+@import "foundation/components/pricing-tables";
+@import "foundation/components/progress-bars";
+@import "foundation/components/side-nav";
+@import "foundation/components/sub-nav";
+@import "foundation/components/switch";
+@import "foundation/components/magellan";
+@import "foundation/components/tables";
+@import "foundation/components/thumbs";
+@import "foundation/components/tooltips";
+@import "foundation/components/dropdown";

stylus/foundation/components/alert-boxes.styl

@@ -0,0 +1,118 @@
+//
+// Alert Variables
+//
+
+// We use this to control alert padding.
+$alert-padding-top ?= emCalc(11px);
+$alert-padding-left ?= $alert-padding-top;
+$alert-padding-right ?= $alert-padding-top + emCalc(10px);
+$alert-padding-bottom ?= $alert-padding-top + emCalc(1px);
+
+// We use these to control text style.
+$alert-font-weight ?= bold;
+$alert-font-size ?= emCalc(14px);
+$alert-font-color ?= #fff;
+$alert-font-color-alt ?= darken($secondary-color, 60%);
+
+// We use this for close hover effect.
+$alert-function-factor ?= 10%;
+
+// We use these to control border styles.
+$alert-border-style ?= solid;
+$alert-border-width ?= 1px;
+$alert-border-color ?= darken($primary-color, $alert-function-factor);
+$alert-bottom-margin ?= emCalc(20px);
+
+// We use these to style the close buttons
+$alert-close-color ?= #333;
+$alert-close-position ?= emCalc(5px);
+$alert-close-font-size ?= emCalc(22px);
+$alert-close-opacity ?= 0.3;
+$alert-close-opacity-hover ?= 0.5;
+$alert-close-padding ?= 5px 4px 4px;
+
+// We use this to control border radius
+$alert-radius ?= $global-radius;
+
+//
+// Alert Mixins
+//
+
+// We use this mixin to create a default alert base.
+alert-base() {
+  border-style: $alert-border-style;
+  border-width: $alert-border-width;
+  display: block;
+  font-weight: $alert-font-weight;
+  margin-bottom: $alert-bottom-margin;
+  position: relative;
+  padding: $alert-padding-top $alert-padding-right $alert-padding-bottom $alert-padding-left;
+  font-size: $alert-font-size;
+}
+
+// We use this mixin to add alert styles
+alert-style($bg=$primary-color) {
+
+  // This find the lightness percentage of the background color.
+  $bg-lightness = lightness($bg);
+
+  // We control which background color and border come through.
+  background-color: $bg;
+  border-color: darken($bg, $alert-function-factor);
+
+  // We control the text color for you based on the background color.
+  if $bg-lightness > 70% {
+    color $alert-font-color-alt;
+  } else {
+    color $alert-font-color;
+  }
+}
+
+// We use this to create the close button.
+alert-close() {
+  font-size: $alert-close-font-size;
+  padding: $alert-close-padding;
+  line-height: 0;
+  position: absolute;
+  top: $alert-close-position + emCalc(2px);
+  {$default-opposite}: $alert-close-position;
+  color: $alert-close-color;
+  opacity: $alert-close-opacity;
+  &:hover,
+  &:focus { opacity: $alert-close-opacity-hover; }
+}
+
+// We use this to quickly create alerts with a single mixin.
+alert($bg=$primary-color, $radius=false) {
+  alert-base();
+  alert-style($bg);
+  radius($radius);
+}
+
+if $include-html-alert-classes {
+  /* Foundation Alerts */
+  .alert-box {
+    alert();
+
+    .close {
+      alert-close();
+    }
+
+    &.radius {
+      radius($alert-radius);
+    }
+    &.round {
+      radius($global-rounded);
+    }
+
+    &.success {
+      alert-style($success-color);
+    }
+    &.alert {
+      alert-style($alert-color);
+    }
+    &.secondary {
+      alert-style($secondary-color);
+    }
+  }
+}

stylus/foundation/components/block-grid.styl

@@ -0,0 +1,68 @@
+//
+// Block Grid Variables
+//
+
+// We use this to control the maximum number of block grid elements per row
+$block-grid-elements ?= 12;
+$block-grid-default-spacing ?= 10px;
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+$block-grid-media-queries ?= true;
+
+//
+// Block Grid Mixins
+//
+
+// We use this mixin to create different block-grids. You can apply per-row and spacing options.
+// Setting $base-style to false will ommit default styles.
+block-grid($per-row=false, $spacing=$block-grid-default-spacing, $base-style=true) {
+
+  if $base-style {
+    display: block;
+    padding: 0;
+    margin: 0 0-($spacing);
+    clearfix();
+
+    &>li {
+      display: block;
+      height: auto;
+      float: $default-float;
+      padding: 0 $spacing $spacing;
+    }
+  }
+
+  if $per-row {
+    &>li {
+      width: (100%/$per-row);
+      padding: 0 $spacing $spacing;
+
+      &:nth-of-type({$per-row}n+1) { clear: both; }
+    }
+  }
+
+}
+
+if $block-grid-media-queries {
+  /* Foundation Block Grids for below small breakpoint */
+  @media only screen {
+    [class*="block-grid-"] {
+      block-grid();
+    }
+
+    for $i in (1..$block-grid-elements) {
+      .small-block-grid-{$i} {
+        block-grid($i,$block-grid-default-spacing,false);
+      }
+    }
+  }
+
+  /* Foundation Block Grids for above small breakpoint */
+  @media $small {
+    for $i in (1..$block-grid-elements) {
+      .large-block-grid-{$i} {
+        block-grid($i,$block-grid-default-spacing,false);
+      }
+    }
+    [class*="small-block-grid-"] > li { clear: none !important; }
+  }
+}

stylus/foundation/components/breadcrumbs.styl

@@ -0,0 +1,119 @@
+//
+// Breadcrumb Variables
+//
+
+// We use this to set the background color for the breadcrumb container.
+$crumb-bg ?= lighten($secondary-color, 5%);
+
+// We use these to set the padding around the breadcrumbs.
+$crumb-padding ?= emCalc(6px) emCalc(14px) emCalc(9px);
+$crumb-side-padding ?= emCalc(12px);
+
+// We use these to control border styles.
+$crumb-function-factor ?= 10%;
+$crumb-border-size ?= 1px;
+$crumb-border-style ?= solid;
+$crumb-border-color ?= darken($crumb-bg, $crumb-function-factor);
+$crumb-radius ?= $global-radius;
+
+// We use these to set various text styles for breadcrumbs.
+$crumb-font-size ?= emCalc(11px);
+$crumb-font-color ?= $primary-color;
+$crumb-font-color-current ?= #333;
+$crumb-font-color-unavailable ?= #999;
+$crumb-font-transform ?= uppercase;
+$crumb-link-decor ?= underline;
+
+// We use these to control the slash between breadcrumbs
+$crumb-slash-color ?= #aaa;
+$crumb-slash ?= "/";
+
+//
+// Breakcrumb Mixins
+//
+
+// We use this mixin to create a container around our breadcrumbs
+crumb-container() {
+  display: block;
+  padding: $crumb-padding;
+  overflow: hidden;
+  margin-{$default-float}: 0;
+  list-style: none;
+  border-style: $crumb-border-style;
+  border-width: $crumb-border-size;
+
+  // We control which background color and border come through.
+  background-color: $crumb-bg;
+  border-color: $crumb-border-color;
+}
+
+// We use this mixin to create breadcrumb styles from list items.
+crumbs() {
+
+  // A normal state will make the links look and act like clickable breadcrumbs.
+  margin: 0;
+  padding: 0 $crumb-side-padding 0 0;
+  float: $default-float;
+
+  &:hover a,
+  &:focus a { text-decoration: $crumb-link-decor; }
+
+  a,
+  span {
+    font-size: $crumb-font-size;
+    padding-{$default-float}: $crumb-side-padding;
+    text-transform: $crumb-font-transform;
+    color: $crumb-font-color;
+  }
+
+  // Current is for the link of the current page
+  &.current {
+    a {
+      cursor: default;
+      color: $crumb-font-color-current;
+    }
+
+    &:hover a,
+    &:focus a { text-decoration: none; }
+  }
+
+  // Unavailable removed color and link styles so it looks inactive.
+  &.unavailable {
+    a { color: $crumb-font-color-unavailable; }
+
+    &:hover a,
+    a:focus {
+      text-decoration: none;
+      color: $crumb-font-color-unavailable;
+      cursor: default;
+    }
+  }
+
+  &:before {
+    content: '' + $crumb-slash + '';
+    color: $crumb-slash-color;
+    position: relative;
+    top: 1px;
+  }
+  &:first-child a,
+  &:first-child span {
+    padding-{$default-float}: 0;
+  }
+  &:first-child:before { content: " "; }
+
+}
+
+
+if $include-html-nav-classes {
+
+  /* Breadcrumbs */
+  .breadcrumbs {
+    crumb-container();
+    radius($crumb-radius);
+
+    li {
+      crumbs();
+    }
+  }
+
+}