shipyard-framework 0.6.1 → 0.7.0

data/assets/stylesheets/shipyard/utilities/_float.sass

@@ -0,0 +1,4 @@
++utility(float)
+
+.clearfix
+  +clearfix

data/assets/stylesheets/shipyard/utilities/_font-family.sass

@@ -0,0 +1 @@
++utility(font-family)

data/assets/stylesheets/shipyard/utilities/_font-size.sass

@@ -0,0 +1 @@
++utility(font-size)

data/assets/stylesheets/shipyard/utilities/_font-style.sass

@@ -0,0 +1 @@
++utility(font-style)

data/assets/stylesheets/shipyard/utilities/_font-weight.sass

@@ -0,0 +1 @@
++utility(font-weight)

data/assets/stylesheets/shipyard/utilities/_height.sass

@@ -0,0 +1 @@
++utility(height)

data/assets/stylesheets/shipyard/utilities/_margin.sass

@@ -0,0 +1 @@
++utility(margin)

data/assets/stylesheets/shipyard/utilities/_opacity.sass

@@ -1,4 +1 @@
-.o
-  @each $opacity, $value in $opacities
-    &-#{$opacity}
-      opacity: $value
++utility(opacity)

data/assets/stylesheets/shipyard/utilities/_overflow.sass

@@ -1,11 +1,3 @@
-.overflow
-  &-auto
-    overflow: auto
-  &-hidden
-    overflow: hidden
-  &-visible
-    overflow: visible
-  &-x-scroll
-    overflow-x: auto
-  &-y-scroll
-    overflow-y: auto
++utility(overflow)
++utility(overflow-x)
++utility(overflow-y)

data/assets/stylesheets/shipyard/utilities/_padding.sass

@@ -0,0 +1 @@
++utility(padding)

data/assets/stylesheets/shipyard/utilities/_position.sass

@@ -1,4 +1 @@
-@each $value in (static, relative, absolute, fixed)
-  .#{$value}
-    +all-media-sizes
-      position: $value
++utility(position)

data/assets/stylesheets/shipyard/utilities/_text-align.sass

@@ -0,0 +1 @@
++utility(text-align)

data/assets/stylesheets/shipyard/utilities/_text-decoration.sass

@@ -0,0 +1 @@
++utility(text-decoration)

data/assets/stylesheets/shipyard/utilities/_text-overflow.sass

@@ -0,0 +1 @@
++utility(text-overflow)

data/assets/stylesheets/shipyard/utilities/_text-shadow.sass

@@ -0,0 +1 @@
++utility(text-shadow)

data/assets/stylesheets/shipyard/utilities/_text-transform.sass

@@ -0,0 +1 @@
++utility(text-transform)

data/assets/stylesheets/shipyard/utilities/_transform.sass

@@ -0,0 +1 @@
++utility(transform)

data/assets/stylesheets/shipyard/utilities/_transition.sass

@@ -0,0 +1 @@
++utility(transition)

data/assets/stylesheets/shipyard/utilities/_white-space.sass

@@ -0,0 +1 @@
++utility(white-space)

data/assets/stylesheets/shipyard/utilities/_z-index.sass

@@ -0,0 +1 @@
++utility(z-index)

data/assets/stylesheets/shipyard/variables/_color_utilities.sass

@@ -4,81 +4,81 @@ $white: color('white') !default
 
 // Gray
 $gray: color('gray') !default
-$gray-light: color('gray', 'light') !default
-$gray-lighter: color('gray', 'lighter') !default
-$gray-lightest: color('gray', 'lightest') !default
-$gray-dark: color('gray', 'dark') !default
-$gray-darker: color('gray', 'darker') !default
-$gray-darkest: color('gray', 'darkest') !default
+$gray-light: color('gray-light') !default
+$gray-lighter: color('gray-lighter') !default
+$gray-lightest: color('gray-lightest') !default
+$gray-dark: color('gray-dark') !default
+$gray-darker: color('gray-darker') !default
+$gray-darkest: color('gray-darkest') !default
 
 // Green
 $green: color('green') !default
-$green-light: color('green', 'light') !default
-$green-lighter: color('green', 'lighter') !default
-$green-lightest: color('green', 'lightest') !default
-$green-dark: color('green', 'dark') !default
-$green-darker: color('green', 'darker') !default
-$green-darkest: color('green', 'darkest') !default
+$green-light: color('green-light') !default
+$green-lighter: color('green-lighter') !default
+$green-lightest: color('green-lightest') !default
+$green-dark: color('green-dark') !default
+$green-darker: color('green-darker') !default
+$green-darkest: color('green-darkest') !default
 
 // Blue
 $blue: color('blue') !default
-$blue-light: color('blue', 'light') !default
-$blue-lighter: color('blue', 'lighter') !default
-$blue-lightest: color('blue', 'lightest') !default
-$blue-dark: color('blue', 'dark') !default
-$blue-darker: color('blue', 'darker') !default
-$blue-darkest: color('blue', 'darkest') !default
+$blue-light: color('blue-light') !default
+$blue-lighter: color('blue-lighter') !default
+$blue-lightest: color('blue-lightest') !default
+$blue-dark: color('blue-dark') !default
+$blue-darker: color('blue-darker') !default
+$blue-darkest: color('blue-darkest') !default
 
 // Teal
 $teal: color('teal') !default
-$teal-light: color('teal', 'light') !default
-$teal-lighter: color('teal', 'lighter') !default
-$teal-lightest: color('teal', 'lightest') !default
-$teal-dark: color('teal', 'dark') !default
-$teal-darker: color('teal', 'darker') !default
-$teal-darkest: color('teal', 'darkest') !default
+$teal-light: color('teal-light') !default
+$teal-lighter: color('teal-lighter') !default
+$teal-lightest: color('teal-lightest') !default
+$teal-dark: color('teal-dark') !default
+$teal-darker: color('teal-darker') !default
+$teal-darkest: color('teal-darkest') !default
 
 // Red
 $red: color('red') !default
-$red-light: color('red', 'light') !default
-$red-lighter: color('red', 'lighter') !default
-$red-lightest: color('red', 'lightest') !default
-$red-dark: color('red', 'dark') !default
-$red-darker: color('red', 'darker') !default
-$red-darkest: color('red', 'darkest') !default
+$red-light: color('red-light') !default
+$red-lighter: color('red-lighter') !default
+$red-lightest: color('red-lightest') !default
+$red-dark: color('red-dark') !default
+$red-darker: color('red-darker') !default
+$red-darkest: color('red-darkest') !default
 
 // Yellow
 $yellow: color('yellow') !default
-$yellow-light: color('yellow', 'light') !default
-$yellow-lighter: color('yellow', 'lighter') !default
-$yellow-lightest: color('yellow', 'lightest') !default
-$yellow-dark: color('yellow', 'dark') !default
-$yellow-darker: color('yellow', 'darker') !default
-$yellow-darkest: color('yellow', 'darkest') !default
+$yellow-light: color('yellow-light') !default
+$yellow-lighter: color('yellow-lighter') !default
+$yellow-lightest: color('yellow-lightest') !default
+$yellow-dark: color('yellow-dark') !default
+$yellow-darker: color('yellow-darker') !default
+$yellow-darkest: color('yellow-darkest') !default
 
 // Orange
 $orange: color('orange') !default
-$orange-light: color('orange', 'light') !default
-$orange-lighter: color('orange', 'lighter') !default
-$orange-lightest: color('orange', 'lightest') !default
-$orange-dark: color('orange', 'dark') !default
-$orange-darker: color('orange', 'darker') !default
-$orange-darkest: color('orange', 'darkest') !default
+$orange-light: color('orange-light') !default
+$orange-lighter: color('orange-lighter') !default
+$orange-lightest: color('orange-lightest') !default
+$orange-dark: color('orange-dark') !default
+$orange-darker: color('orange-darker') !default
+$orange-darkest: color('orange-darkest') !default
 
 // Coral
 $coral: color('coral') !default
-$coral-light: color('coral', 'light') !default
-$coral-lighter: color('coral', 'lighter') !default
-$coral-lightest: color('coral', 'lightest') !default
-$coral-dark: color('coral', 'dark') !default
-$coral-darker: color('coral', 'darker') !default
-$coral-darkest: color('coral', 'darkest') !default
+$coral-light: color('coral-light') !default
+$coral-lighter: color('coral-lighter') !default
+$coral-lightest: color('coral-lightest') !default
+$coral-dark: color('coral-dark') !default
+$coral-darker: color('coral-darker') !default
+$coral-darkest: color('coral-darkest') !default
 
 // Purple
 $purple: color('purple') !default
-$purple-light: color('purple', 'light') !default
-$purple-lighter: color('purple', 'lighter') !default
-$purple-lightest: color('purple', 'lightest') !default
-$purple-dark: color('purple', 'dark') !default
-$purple-darker: color('purple', 'darker') !default
-$purple-darkest: color('purple', 'darkest') !default
+$purple-light: color('purple-light') !default
+$purple-lighter: color('purple-lighter') !default
+$purple-lightest: color('purple-lightest') !default
+$purple-dark: color('purple-dark') !default
+$purple-darker: color('purple-darker') !default
+$purple-darkest: color('purple-darkest') !default

data/assets/stylesheets/shipyard/variables/_colors.scss

@@ -1,89 +1,102 @@
-$colors: (
-  "black": (
-    base: #000
-  ),
-  "white": (
-    base: #fff
-  ),
-  "gray": (
-    base: #788594,
-    light: #bac5d2,
-    lighter: #dfe6eb,
-    lightest: #f2f5f7,
-    dark: darken(#788594, 18%),
-    darker: #313a44,
-    darkest: #1e252c
-  ),
-  "green": (
-    base: darken(#3acc7c, 3%),
-    light: lighten(#3acc7c, 22%),
-    lighter: lighten(#3acc7c, 34%),
-    lightest: lighten(#3acc7c, 41%),
-    dark: darken(#3acc7c, 18%),
-    darker: darken(#3acc7c, 26%),
-    darkest: darken(#3acc7c, 32%)
-  ),
-  "blue": (
-    base: #1ca1e3,
-    light: lighten(#5eb9e6, 15%),
-    lighter: lighten(#9ed8f5, 9%),
-    lightest: lighten(#9ed8f5, 15%),
-    dark: #0075b0,
-    darker: darken(#0075b0, 7%),
-    darkest: darken(#004d73, 5%)
-  ),
-  "teal": (
-    base: #20a5a8,
-    light: #6ab7b9,
-    lighter: #b2dbdc,
-    lightest: lighten(#b2dbdc, 13%),
-    dark: darken(#20a5a8, 8%),
-    darker: darken(#20a5a8, 16%),
-    darkest: darken(#20a5a8, 24%)
-  ),
-  "red": (
-    base: #e06158,
-    light: lighten(#e06158, 8%),
-    lighter: lighten(#e06158, 16%),
-    lightest: lighten(#e06158, 32%),
-    dark: #b13b39,
-    darker: #892120,
-    darkest: desaturate(darken(#892120, 8%), 0%)
-  ),
-  "yellow": (
-    base: #ffca49,
-    light: lighten(#ffca49, 8%),
-    lighter: #ffe7b1,
-    lightest: lighten(#ffe7b1, 7%),
-    dark: darken(#ffca49, 20%),
-    darker: darken(#ffca49, 30%),
-    darkest: darken(#ffca49, 47%)
-  ),
-  "orange": (
-    base: #ff9f49,
-    light: lighten(#ff9f49, 7%),
-    lighter: lighten(#ff9f49, 14%),
-    lightest: lighten(#ff9f49, 21%),
-    dark: desaturate(darken(#ff9f49, 10%), 35%),
-    darker: desaturate(darken(#ff9f49, 20%), 25%),
-    darkest: desaturate(darken(#ff9f49, 30%), 15%)
-  ),
-  "purple": (
-    base: #bf8df6,
-    light: lighten(#bf8df6, 10%),
-    lighter: lighten(#bf8df6, 15%),
-    lightest: lighten(#bf8df6, 20%),
-    dark: desaturate(darken(#bf8df6, 20%), 35%),
-    darker: desaturate(darken(#bf8df6, 35%), 35%),
-    darkest: desaturate(darken(#bf8df6, 50%), 35%)
-  ),
-  "coral": (
-    base: #f9657a,
-    light: lighten(#f9657a, 8%),
-    lighter: lighten(#f9657a, 16%),
-    lightest: lighten(#f9657a, 25%),
-    dark: desaturate(darken(#f9657a, 20%), 35%),
-    darker: desaturate(darken(#f9657a, 30%), 25%),
-    darkest: desaturate(darken(#f9657a, 40%), 15%)
-  )
+$shipyard-colors: (
+  'black': #000,
+
+  // Shipyard: White
+  'white': #fff,
+  'white-90': rgba(#fff, .9),
+  'white-80': rgba(#fff, .8),
+  'white-70': rgba(#fff, .7),
+  'white-60': rgba(#fff, .6),
+  'white-50': rgba(#fff, .5),
+  'white-40': rgba(#fff, .4),
+
+  // Shipyard: Gray
+  'gray': #788594,
+  'gray-light': #bac5d2,
+  'gray-lighter': #dfe6eb,
+  'gray-lightest': #f2f5f7,
+  'gray-dark': darken(#788594, 18%),
+  'gray-darker': #313a44,
+  'gray-darkest': #1e252c,
+
+  // Shipyard: Green
+  'green': darken(#3acc7c, 3%),
+  'green-light': lighten(#3acc7c, 22%),
+  'green-lighter': lighten(#3acc7c, 34%),
+  'green-lightest': lighten(#3acc7c, 41%),
+  'green-dark': darken(#3acc7c, 18%),
+  'green-darker': darken(#3acc7c, 26%),
+  'green-darkest': darken(#3acc7c, 32%),
+
+  // Shipyard: Blue
+  'blue': #1ca1e3,
+  'blue-light': lighten(#5eb9e6, 15%),
+  'blue-lighter': lighten(#9ed8f5, 9%),
+  'blue-lightest': lighten(#9ed8f5, 15%),
+  'blue-dark': #0075b0,
+  'blue-darker': darken(#0075b0, 7%),
+  'blue-darkest': darken(#004d73, 5%),
+
+  // Shipyard: Teal
+  'teal': #20a5a8,
+  'teal-light': #6ab7b9,
+  'teal-lighter': #b2dbdc,
+  'teal-lightest': lighten(#b2dbdc, 13%),
+  'teal-dark': darken(#20a5a8, 8%),
+  'teal-darker': darken(#20a5a8, 16%),
+  'teal-darkest': darken(#20a5a8, 24%),
+
+  // Shipyard: Red
+  'red': #e06158,
+  'red-light': lighten(#e06158, 8%),
+  'red-lighter': lighten(#e06158, 16%),
+  'red-lightest': lighten(#e06158, 32%),
+  'red-dark': #b13b39,
+  'red-darker': #892120,
+  'red-darkest': desaturate(darken(#892120, 8%), 0%),
+
+  // Shipyard: Yellow
+  'yellow': #ffca49,
+  'yellow-light': lighten(#ffca49, 8%),
+  'yellow-lighter': #ffe7b1,
+  'yellow-lightest': lighten(#ffe7b1, 7%),
+  'yellow-dark': darken(#ffca49, 20%),
+  'yellow-darker': darken(#ffca49, 30%),
+  'yellow-darkest': darken(#ffca49, 47%),
+
+  // Shipyard: Orange
+  'orange': #ff9f49,
+  'orange-light': lighten(#ff9f49, 7%),
+  'orange-lighter': lighten(#ff9f49, 14%),
+  'orange-lightest': lighten(#ff9f49, 21%),
+  'orange-dark': desaturate(darken(#ff9f49, 10%), 35%),
+  'orange-darker': desaturate(darken(#ff9f49, 20%), 25%),
+  'orange-darkest': desaturate(darken(#ff9f49, 30%), 15%),
+
+  // Shipyard: Purple
+  'purple': #bf8df6,
+  'purple-light': lighten(#bf8df6, 10%),
+  'purple-lighter': lighten(#bf8df6, 15%),
+  'purple-lightest': lighten(#bf8df6, 20%),
+  'purple-dark': desaturate(darken(#bf8df6, 20%), 35%),
+  'purple-darker': desaturate(darken(#bf8df6, 35%), 35%),
+  'purple-darkest': desaturate(darken(#bf8df6, 50%), 35%),
+
+  // Shipyard: Coral
+  'coral': #f9657a,
+  'coral-light': lighten(#f9657a, 8%),
+  'coral-lighter': lighten(#f9657a, 16%),
+  'coral-lightest': lighten(#f9657a, 25%),
+  'coral-dark': desaturate(darken(#f9657a, 20%), 35%),
+  'coral-darker': desaturate(darken(#f9657a, 30%), 25%),
+  'coral-darkest': desaturate(darken(#f9657a, 40%), 15%),
+
+  // Shipyard: Text Colors
+  'text-darkest': #162b44,
+  'text-darker': rgba(#162b44, .9),
+  'text-dark': rgba(#162b44, .8),
+  'text-normal': rgba(#162b44, .7),
+  'text-light': rgba(#162b44, .6),
+  'text-lighter': rgba(#162b44, .5),
+  'text-lightest': rgba(#162b44, .4)
 ) !default;

data/assets/stylesheets/shipyard/variables/_components.scss

@@ -1,6 +1,5 @@
 $component-defaults: (
   header: (
-    z-index: 100,
     background: #fff,
     color: $text-color-light,
     box-shadow: $box-shadow,

data/assets/stylesheets/shipyard/variables/_options.scss

@@ -0,0 +1,322 @@
+$shipyard-defaults: (
+
+  // Shipyard: Color Utilities
+  color: (
+    prefix: null,
+    responsive: false,
+    values: $shipyard-colors
+  ),
+
+  // Shipyard: Color Utilities
+  background-color: (
+    prefix: 'bg',
+    responsive: false,
+    values: $shipyard-colors
+  ),
+
+  // Shipyard: Box-Shadow Utility
+  box-shadow: (
+    prefix: 'box-shadow',
+    responsive: false,
+    values: (
+      '': 0 1px 2px rgba($gray-darkest, .08),
+      hover: 0 0 4px 1px rgba($blue, .5),
+      active: 0 0 4px 1px rgba($green, .75)
+    )
+  ),
+
+  // Shipyard: Breakpoints
+  breakpoints: (
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px
+  ),
+
+  // Shipyard: Margins (TODO: Deprecate this map)
+  margins: (
+    all: 10px,
+    sm: 20px,
+    md: 30px,
+    lg: 30px,
+    xl: 40px
+  ),
+
+  // Shipyard: Grid Component
+  grid: (
+    prefix: 'col',
+    responsive: true,
+    values: (0, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
+  ),
+
+  // Shipyard: Height Component
+  height: (
+    prefix: 'h',
+    responsive: true,
+    values: (
+      '50': 50px,
+      '60': 60px,
+      '70': 70px,
+      '80': 80px,
+      '90': 90px,
+      '100': 100px
+    )
+  ),
+
+  // Shipyard: Cursor Utility
+  cursor: (
+    prefix: 'cursor',
+    responsive: false,
+    values: (auto, pointer, default)
+  ),
+
+  // Shipyard: Center
+  center: (
+    prefix: 'center',
+    responsive: true,
+    values: ()
+  ),
+
+  // Shipyard: Margin Utilities
+  margin: (
+    prefix: 'm',
+    responsive: true,
+    variants: (t: top, b: bottom, l: left, r: right),
+    values: (
+      0: 0,
+      5: 5px,
+      10: 10px,
+      15: 15px,
+      20: 20px,
+      30: 30px,
+      40: 40px,
+      auto: auto
+    )
+  ),
+
+  // Shipyard: Padding Utilities
+  padding: (
+    prefix: 'p',
+    responsive: true,
+    variants: (t: top, b: bottom, l: left, r: right),
+    values: (
+      0: 0,
+      5: 5px,
+      10: 10px,
+      15: 15px,
+      20: 20px,
+      30: 30px,
+      40: 40px
+    )
+  ),
+
+  // Shipyard: Display Utilities
+  display: (
+    prefix: null,
+    responsive: true,
+    values: (
+      'flex': flex,
+      'block': block,
+      'table': table,
+      'inline': inline,
+      'inline-block': inline-block,
+      'hidden': none
+    )
+  ),
+
+  // Shipyard: Font-Family Utility
+  font-family: (
+    prefix: null,
+    responsive: false,
+    values: (
+      'sans-serif': $font-family,
+      'monospace': $font-monospace
+    )
+  ),
+
+  // Shipyard: Font-Size Utility
+  font-size: (
+    prefix: 'text',
+    responsive: true,
+    values: $font-sizes
+  ),
+
+  // Shipyard: Font-Style Utility
+  font-style: (
+    prefix: null,
+    responsive: false,
+    values: (italic)
+  ),
+
+  // Shipyard: Font-Weight Utility
+  font-weight: (
+    prefix: null,
+    responsive: true,
+    values: (
+      normal: normal,
+      bold: bold
+    )
+  ),
+
+  // Shipyard: White-Space Utilities
+  white-space: (
+    prefix: 'white-space',
+    responsive: true,
+    values: (normal, pre, nowrap)
+  ),
+
+  // Shipyard: Text-Align Utilities
+  text-align: (
+    prefix: 'align',
+    responsive: true,
+    values: (center, left, right)
+  ),
+
+  // Shipyard: Text-Direction Utilities
+  text-decoration: (
+    prefix: null,
+    responsive: false,
+    values: (
+      'line-through': line-through,
+      'underline': underline,
+      'no-underline': none
+    )
+  ),
+
+  // Shipyard: Text-Align Utilities
+  text-shadow: (
+    prefix: 'text-shadow',
+    responsive: false,
+    values: (
+      xs: 0 1px 0 rgba(#000,.1),
+      sm: 0 1px 1px rgba(#000, .1)
+    )
+  ),
+
+  // Shipyard: Text-Transform Utility
+  text-transform: (
+    prefix: null,
+    responsive: false,
+    values: (uppercase, lowercase, capitalize)
+  ),
+
+  // Shipyard: Float Utilities
+  float: (
+    prefix: 'float',
+    responsive: true,
+    values: (none, left, right)
+  ),
+
+  // Shipyard: Overflow Utility
+  overflow: (
+    prefix: 'overflow',
+    responsive: true,
+    values: (auto, hidden, visible)
+  ),
+
+  overflow-x: (
+    prefix: 'overflow-x',
+    responsive: true,
+    values: (scroll: auto)
+  ),
+
+  overflow-y: (
+    prefix: 'overflow-y',
+    responsive: true,
+    values: (scroll: auto)
+  ),
+
+  // Shipyard: Flex Direction Utility
+  flex-direction: (
+    prefix: 'flex',
+    responsive: true,
+    values: (
+      'row': row,
+      'row-reverse': row-reverse,
+      'col': column,
+      'col-reverse': column-reverse
+    )
+  ),
+
+  // Shipyard: Border-Radius Utility
+  border-radius: (
+    prefix: 'rounded',
+    responsive: true,
+    values: (
+      '': 5px,
+      '0': 0,
+      'xs': 2px,
+      'sm': 3px,
+      'md': 5px,
+      'pill': 999px
+    )
+  ),
+
+  // Shipyard: Opacity Utility
+  opacity: (
+    prefix: 'o',
+    responsive: false,
+    values: (
+      '90': .9,
+      '80': .8,
+      '70': .7,
+      '60': .6,
+      '50': .5,
+      '40': .4,
+      '30': .3,
+      '20': .2,
+      '10': .1,
+      '0': 0
+    )
+  ),
+
+  // Shipyard: Position Utility
+  position: (
+    prefix: null,
+    responsive: true,
+    values: (static, relative, absolute, fixed)
+  ),
+
+  // Shipyard: Text-Overflow Utility
+  text-overflow: (
+    prefix: null,
+    responsive: true,
+    values: (ellipsis, clip)
+  ),
+
+  // Shipyard: Transition Utility Speeds
+  transition: (
+    prefix: 'ease',
+    responsive: false,
+    values: (
+      '150ms': all 150ms ease,
+      '300ms': all 300ms ease,
+      '600ms': all 600ms ease
+    )
+  ),
+
+  // Shipyard: Transform Utility
+  transform: (
+    prefix: null,
+    responsive: false,
+    values: (
+      rotate-45: rotate(45deg),
+      rotate-90: rotate(90deg)
+    )
+  ),
+
+  // Shipyard: Z-Index Utility
+  z-index: (
+    prefix: 'z',
+    responsive: false,
+    values: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, auto)
+  )
+);
+
+// Merge the default options and the custom options together.
+$shipyard-options: () !default;
+$shipyard-options: map-merge-options($shipyard-defaults, $shipyard-options);
+
+// TODO: Remove these variables someday in favor of the maps.
+$margins: map-get($shipyard-options, margins);
+$breakpoints: map-get($shipyard-options, breakpoints);