Update style guide

source/assets/stylesheets/components/_alerts.scss

@@ -26,7 +26,7 @@
   @extend %reset-list;
   text-align: inherit;
 
-  @include breakpoint($mobile-small) { @extend %horizontal-list-mobile-small; }
+  @include breakpoint($tablet-small) { @extend %horizontal-list-tablet-small; }
 }
 
 .release-name { white-space: nowrap; }

source/assets/stylesheets/components/_lists.scss.erb

@@ -73,17 +73,24 @@
   }
 }
 
-ol.list-columns {
-  list-style: decimal {
-    position: inside;
-  }
+ol {
+  &.list-columns,
+  &.list-feature {
+    list-style: decimal {
+      position: inside;
+    }
 
-  ul,
-  ol { list-style-position: outside; }
+    ul,
+    ol { list-style-position: outside; }
+  }
 }
 
 %description-list {
-  @include breakpoint($mobile-large) { dd { margin-left: 0; } }
+  max-width: none;
+
+  @include breakpoint($mobile-large) {
+    dd { margin-left: 0; }
+  }
 
   @include breakpoint($tablet-small) {
     @extend %table-layout-tablet-small;

source/assets/stylesheets/components/_logos.scss

@@ -0,0 +1,5 @@
+.logos li {
+  @include padding-leader;
+  @include padding-trailer;
+  text-align: center;
+}

source/assets/stylesheets/foundation/_code.scss

@@ -16,15 +16,13 @@ pre {
 code {
   padding: .25em;
   line-height: 0;
-  white-space: nowrap;
 }
 
 pre {
   @include trailer;
   @include rhythm(.5, .5, .5, .5);
-  @include bleed;
+  @include bleed(1em);
   display: block;
-  // max-height: 340px;
   overflow-y: auto;
   margin: auto 0 25px;
   word: {

source/assets/stylesheets/regions/_contentinfo.scss

@@ -1,7 +1,6 @@
 .contentinfo {
   @include padding-leader;
   @include padding-trailer;
-  background: $color-background;
   color: $color-text-weak;
 
   .container {

source/assets/stylesheets/sass.css.scss

@@ -42,6 +42,7 @@
 @import "components/get-started";
 @import "components/slides";
 @import "components/icons";
+@import "components/logos";
 
 
 

source/assets/stylesheets/styleguide/_color.scss.erb

@@ -10,7 +10,10 @@ $contrasted-lightness-threshold: 75%;
     color: inherit;
   }
 
-  pre { @include box-shadow(0 0 1px $color-shadow); }
+  pre {
+    @include box-shadow(0 0 1px $color-shadow);
+    overflow: hidden;
+  }
 
   code { @include ellipsis; }
 
@@ -31,6 +34,11 @@ ul.swatches { @extend .list-tiled; }
   .swatch-color-<%= color.name %> { @include contrasted($color-<%= color.name %>); }
 <% end %>
 
+// Override Contrast
+.swatch-color-shadow { color: $contrasted-dark-default; }
+
+
+
 @include breakpoint($mobile-large) {
   ul.swatches pre {
     margin: {

source/assets/stylesheets/styleguide/_guide.scss

@@ -4,6 +4,8 @@
 .guide-description-list {
   @extend %description-list;
 
+  .content-primary & { max-width: none; }
+
   %split-by { vertical-align: middle; }
 }
 
@@ -77,7 +79,7 @@
 
   .frame {
     float: left;
-    margin: 0 ($gutter-width / 2);
+    margin: 0 .5em;
   }
 }
 

source/layouts/regions/_toolkit.haml

@@ -1,11 +1,12 @@
-- if current_page.url =~ /styleguide/
-  .toolkit
-    .container
-      %ul
-        %li
-          %button.toggle-baseline(type="button") Baseline
-        %li
-          %button.toggle-grid(type="button") Grid
-        %li.separator
-        %li
-          %button.url-responsive(type="button") Responsive Test
+-#- if current_page.url =~ /styleguide/
+-#  .toolkit
+-#    .container
+-#      %ul
+-#        %li
+-#          %button.toggle-baseline(type="button") Baseline
+-#        %li
+-#          %button.toggle-grid(type="button") Grid
+-#        %li.separator
+-#        %li
+-#          %button.url-responsive(type="button") Responsive Test
+-#

source/styleguide/01_brand.html.haml

@@ -2,4 +2,32 @@
 title: Brand Guidelines
 ---
 
-Soon
+%h2 Logo Usage
+
+%ul
+  %li
+    Please do not stretch or distort the logo. Use the “seal”
+    version of the logo when needing to use a square image (like avatars).
+
+  %li
+    If you have to put the logo on a busy/colorful background, please use one
+    of the reversed (on white) logos.
+
+%p= link_to "Download vector logos", "/assets/images/styleguide/sass-logo.zip", class: "button primary"
+
+.logos
+  %h3 Standard
+  %ul.list-columns
+    %li= image_tag "styleguide/color.png", height: "80"
+    %li= image_tag "styleguide/seal-color.png", height: "80"
+
+  %h3 White
+  %ul.list-columns
+    %li.swatch-color-background-shade= image_tag "styleguide/white.png", height: "80"
+    %li.swatch-color-background-shade= image_tag "styleguide/seal-black-reversed.png", height: "80"
+
+  %h3 Black
+  %ul.list-columns
+    %li= image_tag "styleguide/black.png", height: "80"
+    %li= image_tag "styleguide/seal-black.png", height: "80"
+

source/styleguide/05_responsive.html.haml

@@ -3,10 +3,11 @@ title: Responsive Design
 ---
 
 %h2 Tools & Resources
-%ul
+%ul.list-feature
   %li
-    %strong.introduction= link_to "Responsive Test", "/styleguide/responsive-test"
+    %strong= link_to "Responsive Test", "/styleguide/responsive-test"
   %li= link_to "Susy", "http://susy.oddbird.net/"
+  %li= link_to "Breakpoint", "http://breakpoint-sass.com/"
   %li= link_to "The EMs have it: Proportional Media Queries FTW!", "http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/"
 
 %h2 Resolutions

source/styleguide/06_library.html.haml

@@ -2,15 +2,4 @@
 title: UI Library
 ---
 
-%dl.guide-description-list
-  %dt
-    :markdown
-      ```
-      .alert
-        .container
-          %p This is an alert.
-      ```
-  %dd
-    .alert
-      .container
-        %p This is an alert.
+%p Soon!

source/styleguide/07_code.html.haml

@@ -16,11 +16,11 @@ title: Code Style Guide
   If you need to use regular HTML anywhere, write HTML5, but favor a strict
   XHTML style:
 
-    - Use well-formed markup; elements are nested properly and do not overlap.
-    - Write elements and attributes in lowercase.
-    - Quote all attributes.
-    - Self-close empty elements with a space before the trailing slash:
-      (`<br />`)
+  - Use well-formed markup; elements are nested properly and do not overlap.
+  - Write elements and attributes in lowercase.
+  - Quote all attributes.
+  - Self-close empty elements with a space before the trailing slash:
+    (`<br />`)
 
   ## Style
   This website uses Sass (duh) in the newer SCSS syntax. We also use the
@@ -31,3 +31,12 @@ title: Code Style Guide
 
   Make sure you're using the mixins and such that they have to offer before
   rewriting something, unless you can justify otherwise.
+
+  - Use hyphenated class names (no camelCase or snake_case).
+  - For naming, use the broad-to-specific approach. See
+    [this article](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-name-your-sass-variables-modularly/)
+    for more details.
+  - Avoid nesting too deep.
+  - Write comma-delimited selectors on separate lines.
+
+

source/styleguide/index.html.haml

@@ -2,9 +2,13 @@
 title: Style Guide
 ---
 
-%h2 Objectives
+- content_for (:introduction) do
+  Contributing to this website? Awesome! Use this style guide, developed by
+  Team Sass Design. If you add new design, please document it here.
 
-%ol
+%h2 Site Objectives
+
+%ol.list-feature
   %li Show why Sass is the best CSS Preprocessor,
 and why you should use it.
   %li
     Be a resource for those who are already using Sass,