fishnet 1.0.1

data/app/assets/stylesheets/fishnet_styleguide.sass

@@ -0,0 +1,81 @@
+
+// ## Base Sizing
+$context_px: 16
+$base_font_size: 14
+$base_width: 1200
+$base_line_height: 1.2
+$base_vertical: $base_font_size * $base_line_height
+
+// Fishnet variables
+$column-width: 74px
+$gutter-width: 8px
+$columns: 12
+$total-width: 100%
+
+// ## Fonts
+$sans_norm: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif
+$code_norm: "Bitstream Vera Sans Mono", "Menslo LG M", "Menlo", "Monaco", monospace
+
+// colors
+$black: #000
+$grey1: #111
+$grey2: #222
+$grey3: #333
+$grey4: #444
+$grey5: #555
+$grey6: #666
+$grey7: #777
+$grey8: #888
+$grey9: #999
+$greyA: #aaa
+$greyB: #bbb
+$greyC: #ccc
+$greyD: #ddd
+$greyE: #eee
+$white: #fff
+$off_white: #fafafa
+$off_grey: #eaeaea
+
+$magenta: #ff00ff
+$cyan: #00ffff
+$red: #b22222
+$orange: #f26522
+$yellow: #ffc40d
+$green: #46a546
+$blue: #268bd2
+$indigo: #4b0082
+$violet: #ee82ee
+$standard: #f5f5f5
+
+$text_inset_dark: 0 -1px 0 rgba($black, 0.25)
+$text_drop_lite: 0 1px 0 rgba($white, 0.75)
+$drop_dark: 0 1px 4px rgba($black, 0.3)
+$inset_dark: inset 0 1px 4px rgba($black, 0.3)
+
+$radii: 0.4em
+
+@import fishnet
+@import general/helpers
+@import general/base
+@import general/tables
+@import general/wells
+@import general/notifications
+@import general/layout
+@import general/example
+
+// Debugging with mesh styles
+@import fishnet/mesh
+@import general/mesh-guide
++add-guide-column-classes()
++add-guide-column-pull-classes()
++add-guide-column-push-classes()
++add-guide-column-full-classes()
++add-guide-column-offset-left-classes()
++add-guide-column-offset-left-pull-classes()
++add-guide-column-offset-left-push-classes()
++add-guide-column-offset-left-full-classes()
++add-guide-column-offset-right-classes()
++add-guide-column-offset-right-pull-classes()
++add-guide-column-offset-right-push-classes()
++add-guide-column-offset-right-full-classes()
+

data/app/assets/stylesheets/general/_base.sass

@@ -0,0 +1,227 @@
+
+// HTML 5 definitions and normalization
+article, aside, details, figcaption, figure,
+footer, header, hgroup, nav, section
+  display: block
+  margin: 0
+  padding: 0
+
+// Reset margins, paddings and borders
+html, body, div, span, hr, img,
+h1, h2, h3, h4, h5, h6, p, a, small, strong, em,
+address, abbr, dfn, sub, sup, del, ins,
+blockquote, q, cite, pre, code, kbd, samp,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, button, input, select, textarea,
+table, caption, tbody, tfoot, thead, tr, th, td,
+summary, time, mark
+  margin: 0
+  padding: 0
+
+img
+  border: 0
+  -ms-interpolation-mode: bicubic
+  max-width: 100%
+
+button[disabled],
+a.disabled,
+li.disabled > a
+  cursor: default
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+  max-width: 100%
+
+// Top level elements
+html
+  font-size: 100%
+  overflow-y: scroll
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  -webkit-font-smoothing: antialiased
+  -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%
+
+html, button, input, select, textarea
+  color: $grey3
+  font-family: $sans_norm
+
+body
+  background: $white
+  +font-sizes($base_font_size)
+  line-height: $base_line_height
+
+\::-moz-selection
+  background: $blue
+  color: $white
+  text-shadow: none
+
+\::selection
+  background: $blue
+  color: $white
+  text-shadow: none
+
+// Links
+a, a:visited
+  color: $blue
+  text-decoration: none
+
+a:focus
+  outline: thin dotted
+
+a:hover, a:active
+  outline: 0
+  text-decoration: none
+
+a:hover,
+a:active,
+a.active,
+.active > a
+  color: darken($blue, 20%)
+
+
+a:link
+  -webkit-tap-highlight-color: $blue
+
+// ## Typography
+
+// Heading Styles
+h1, h2, h3, h4, h5, h6
+  color: $grey3
+  line-height: 1
+  margin-bottom: 0.1em
+
+h1
+  +font-sizes(36)
+
+h2
+  +font-sizes(30)
+
+h3
+  +font-sizes(24)
+  margin-top: 2em
+
+h4
+  +font-sizes(20)
+
+h5
+  +font-sizes(18)
+
+h6
+  +font-sizes(18)
+  font-style: italic
+
+// Paragraph Styles
+p
+  font-style: normal
+p a:hover
+  text-decoration: underline
+
+small
+  font-size: 85%
+
+// Code
+pre, code
+  font-family: $code_norm
+  _font-family: "courier new", monospace
+
+code
+  background: $off_white
+  border: 1px solid lighten($greyC, 10%)
+  color: $red
+  font-size: 85%
+  padding: 0 0.3em
+
+pre
+  background: $off_white
+  border: 1px solid $greyC
+  margin: 1em 0
+  padding: 0.75em
+  font-size: 85%
+  text-shadow: 0 1px 0 $white
+  white-space: pre
+  white-space: pre-wrap
+  word-wrap: break-word
+  overflow: hidden
+
+pre code
+  padding: 0
+  border: 0
+  background: transparent
+
+// .pln, .pun, .opn, .clo => color: body_color
+pre.prettyprint
+  .com
+    color: #93a1a1
+  .lit
+    color: #195f91
+  .fun
+    color: #cb4b15
+  .kwd, .tag
+    color: #258ad2
+  .str, .atv
+    color: #859900
+  .atn, .type, .dec, .var
+    color: #d33682
+
+// Misc
+hr
+  display: block
+  height: 1px
+  border: 0
+  border-top: 1px solid $grey6
+  margin: 1em 0
+  &.dotted
+    border-top-style: dotted
+  &.dashed
+    border-top-style: dashed
+
+
+// LISTS
+
+// Ordered and Unordered Lists
+ul
+  list-style: square inside
+
+ol
+  list-style: decimal inside
+
+ul li, ol li
+  margin-left: 0.25em
+
+ul ul li, ul ol li,
+ol ul li, ol ol li
+  margin-left: 1.5em
+
+// Navigation and unstyled Lists
+nav ul, nav ol, ul.unstyled, ol.unstyled
+  list-style: none
+  list-style-image: none
+  margin: 0
+  padding: 0
+  ul li, ol li, li
+    margin-left: 0
+    padding: 0
+
+// Base Navs, used by tabs, pills, breadcrumbs, pagination, and navigation lists
+.nav
+  +clearfixer
+  list-style: none
+
+.nav > li > a
+  display: block
+
+.nav.inline > li
+  float: left
+
+.nav.inline > li > a
+  padding-left: 0.5em
+  padding-right: 0.5em
+
+// Active states for navs get a default cursor
+.nav > .active > a,
+.nav > .active > a:hover
+  cursor: default
+.nav > .dropdown.active > a:hover
+  cursor: pointer
+

data/app/assets/stylesheets/general/_example.sass

@@ -0,0 +1,57 @@
+
+@mixin _box-setting($hv:100px)
+  background-color: $grey6
+  height: $hv
+  line-height: $hv
+  margin-bottom: 0.5em
+  text-align: center
+  overflow: hidden
+
+.masthead
+  +column-full(12)
+  +_box-setting(100px)
+  margin-top: 3em
+
+.gallery
+  +column(12)
+  +_box-setting(300px)
+
+.promo
+  +_box-setting(75px)
+
+.promo.recent
+  +column-pull(6)
+.promo.ancient
+  +column-push(6)
+
+.article
+  +column(6)
+  +_box-setting(100px)
+
+.aside
+  +column-offset-left(4,2)
+  +_box-setting(100px)
+
+.footer
+  +column-full(12)
+  +clearfixer
+  background-color: $grey9
+  margin-bottom: 3em
+
+.footer-nav
+  +column-pull(8)
+  +_box-setting(100px)
+
+.social-nav
+  +column-offset-left-full(3,1)
+  +_box-setting(100px)
+
+.copy, .terms
+  +_box-setting(25px)
+  margin-bottom: 0
+
+.copy
+  +column-offset-right-full(4,2)
+.terms
+  +column-offset-left-full(4,2)
+

data/app/assets/stylesheets/general/_helpers.sass

@@ -0,0 +1,42 @@
+
+// Converts target `px` value to `em` in context constraints of the base font size
+@function to_em($target_px, $context:$base_font_size)
+  @return ($target_px / $context) * 1em
+
+// Converts target `px` value to `rem` in context constraints of the user's base font size
+@function to_rem($target_px, $context:$context_px)
+  @return ($target_px / $context) * 1rem
+
+// Converts target `px` value to `percentage` in context constraints of the container's width
+@function to_percent($target_px, $context:$base_width)
+  @return percentage($target_px / $context)
+
+// Returns the vertical rhythm in pixels calculated from the `$base_vertical` setting
+@function vertical_pixel($target_px)
+  @return ($base_vertical / $target_px) * 1px
+
+// Returns the vertical rhythm in em calculated from the `$base_vertical` setting
+@function vertical_em($target_px)
+  @return to_em(($base_vertical / $target_px), $base_font_size)
+
+// Returns the vertical rhythm in percent calculated from the `$base_vertical` setting
+@function vertical_percent($target_px)
+  @return to_percent(($base_vertical / $target_px), $base_font_size)
+
+// Use `rems` to insert a font size
+@mixin font-sizes($target_px, $context:$context_px)
+  font-size: $target_px * 1px
+  font-size: to_rem($target_px, $context)
+
+@mixin clearfixer
+  zoom: 1
+  &:before,
+  &:after
+    content: ""
+    display: table
+  &:after
+    clear: both
+
+.clearfixer
+  +clearfixer
+

data/app/assets/stylesheets/general/_layout.sass

@@ -0,0 +1,74 @@
+
+.container
+  +clearfixer
+  max-width: $base_width * 1px
+  margin: 0 auto
+  padding: 0 1%
+  &.fluid, &.fixed
+    max-width: none
+  &.fixed
+    width: $base_width * 1px
+
+// Site Layout
+.section
+  +clearfixer
+  margin-top: 2em
+.sub-section
+  +clearfixer
+  margin-top: 1em
+
+.section-heading
+  border-bottom: 1px solid $greyC
+  line-height: 1.4
+  margin-bottom: 1em
+  & span
+    float: right
+    font-size: 0.5em
+    margin-top: 1.5em
+
+.section-subheading
+  margin-bottom: 0.5em
+  & span
+    font-size: 0.65em
+    margin-left: 0.5em
+  & + p
+    margin-bottom: 1em
+
+.pre-column
+  +base-column
+  width: 48%
+  // float: left
+  &.sass
+    margin-right: 1%
+  &.markup
+    margin-left: 1%
+
+// Accordians
+.collapse
+  position: relative
+  overflow: hidden
+  height: 0
+  &.in
+    height: auto
+
+.page-info.fixed
+  position: fixed
+  top: 0
+  right: 0
+  left: 0
+  z-index: 1010
+
+.page-info span
+  display: block
+  color: $greyC
+  font-weight: bold
+  float: right
+  background: rgba(white,0.9)
+  padding: $radii
+  -webkit-border-radius: $radii
+  -moz-border-radius: $radii
+  border-radius: $radii
+
+body > .container
+  margin-top: 3em
+