Permalink
Browse files

Namespace styleguide elements

  • Loading branch information...
Max Walker
Max Walker committed May 7, 2012
1 parent b7ecb1d commit c6f6d0708ffed190c7f389b6e3da1705fe3cb6a7
Showing with 58 additions and 71 deletions.
  1. +54 −67 app/assets/stylesheets/kss.css.sass
  2. +4 −4 lib/generators/templates/application.html.haml
@@ -14,84 +14,68 @@ $link-hover-color: lighten($blue, 10%)
// Global
// ---------------
-*
- padding: 0
- margin: 0
+
+html, body
+ height: 100%
body
font-family: Helvetica, Arial, sans-serif
font-size: 13px
-a
- outline: none
- color: $link-color
- text-decoration: none
- img
- border: none
- &:hover
- color: $link-hover-color
- text-decoration: underline
-
-h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address
- margin: 1em 0
-
-li, dd
- margin-left: 5%
-
-fieldset
- padding: .5em
-
-pre
- padding: 10px
- border: 1px solid $light-grey
- line-height: 1.2em
- color: $dark-grey
- background-color: $white-grey
-
-select option
- padding: 0 5px
-
-.access
- display: none
-
-.clear
- clear: both
- height: 0
- font-size: 0
- line-height: 0
- overflow: hidden
-
-.clearfix:after
- content: "."
- display: block
- height: 0
- clear: both
- visibility: hidden
-
-* html .clearfix
- height: 1%
-
-.clearfix
- display: inline-block
- display: block
-
+#styleguide
+ a
+ outline: none
+ color: $link-color
+ text-decoration: none
+ img
+ border: none
+ &:hover
+ color: $link-hover-color
+ text-decoration: underline
+
+ pre
+ padding: 10px
+ border: 1px solid $light-grey
+ margin: 10px 0
+ line-height: 1.2em
+ color: $dark-grey
+ background-color: $white-grey
+
+ .clear
+ clear: both
+ height: 0
+ font-size: 0
+ line-height: 0
+ overflow: hidden
+
+ .clearfix
+ display: inline-block
+ height: 1%
+ &:after
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
+
+ .access
+ display: none
// Layout
// ---------------
-header
+#styleguide
+ height: 100%
+ padding: 30px 20%
+ background: white
+
+#styleguide-header
padding: 10px 20%
- margin-bottom: 30px
font-size: 16px
color: #666
background: #f1f1f1
border-bottom: 1px solid #ddd
-#wrapper
- padding:
- left: 20%
- right: 20%
-
-#sections
+#styleguide-sections
float: left
width: 10%
margin:
@@ -112,12 +96,12 @@ header
color: black
font-weight: bold
-div[role=main]
+#styleguide-content
float: left
width: 85%
-// Styleguide Elements
+// Elements
//----------------------
h1.styleguide
margin: 0 0 -5px 0
@@ -182,7 +166,7 @@ h1.styleguide
.highlight
background: none
-ul.styleguide-modifiers
+.styleguide-modifiers
margin: 0 0 0 10px
li
list-style-type: none
@@ -193,4 +177,7 @@ ul.styleguide-modifiers
font-weight: normal
color: #222
+ul.styleguide-modifier
+ padding-left: 20px
+
//= require application
@@ -8,15 +8,15 @@
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
%body
- %header
+ %header#styleguide-header
Styleguide
- #wrapper
- %nav#sections
+ #styleguide
+ %nav#styleguide-sections
%ol{start: '0'}
- @sections.each do |section, title|
%li= link_to title, {controller: :home, action: section}, class: params[:action] == "#{section}" ? 'selected' : ''
- %div{role: 'main'}
+ #styleguide-content
= yield
= javascript_include_tag 'kss'

0 comments on commit c6f6d07

Please sign in to comment.