Generic Compass Blueprint Layout & Styles

application.html.haml

!!! Strict
%html{locale_attrs}
  %head
    %title&= yield(:title) || t(:site_name)
    %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
    %meta{ :name => "description", :content => "" }/
    %meta{ :name => "keywords", :content => "" }/
    = stylesheet_link_tag 'screen', :media => 'screen, projection'
    = stylesheet_link_tag 'print', :media => 'print'
    = stylesheet_link_tag 'buttons', :media => 'screen, projection'
    = stylesheet_link_tag "formtastic", :media => 'screen, projection'
    = stylesheet_link_tag "formtastic_changes", :media => 'screen, projection'
    /[if lt IE 8]
      = stylesheet_link_tag 'ie', :media => 'screen, projection'
    = javascript_include_tag :defaults, 'jquery.js', 'jquery.form.js'
    = active_scaffold_includes
    = yield(:head)
  %body
    .container
      #navigation
        = link_to "Home", root_path 
        |
        - if current_user
          = link_to_with_highlight "My Account", edit_user_path(current_user) 
          |
          = link_to_with_highlight "Logout", logout_path
        - else
          = link_to_with_highlight "Register", new_user_path 
          |
          = link_to_with_highlight "Login", login_path
      #header
        %h1= t(:site_name)
        #navset
          = navigation [:root]
          = yield(:subnav)
      #content
        - flash.each do |name, msg|
          = content_tag :div, msg, :id => "flash_#{name}"
        = yield
      #sidebar
        .block
          %h3= yield :title_sidebar
          .content
            %p= yield :sidebar
      #extra
      #footer
        %p= t(:copyright)

behaviors.sass

=round-top
  :-moz-border-radius-topleft 4px
  :-webkit-border-top-left-radius 4px
  :-moz-border-radius-topright 4px
  :-webkit-border-top-right-radius 4px

=round-bottom
  :-moz-border-radius-bottomleft 4px
  :-webkit-border-bottom-left-radius 4px
  :-moz-border-radius-bottomright 4px
  :-webkit-border-bottom-right-radius 4px

=black-border
  :border = 1px "solid" #262626

colors.sass

!small = 11px
!primary_color = #4B7399
!red_wine = #7A1818
!red_wine_dark = #470E0E
!yellow_light = #FFFFCC
!gray = #999999
!gray_lightest = #F0F0EE
!gray_ultralight = #EEE
!black_font = #222
!black_darker = #262626
!white = #FFF

screen.sass

@import compass/reset.sass
@import compass/utilities.sass
@import compass/layout.sass
@import blueprint.sass
@import blueprint/modules/scaffolding.sass
@import blueprint/modules/buttons.sass
@import blueprint/modules/fancy_type.sass
@import blueprint/modules/link_icons.sass
@import colors
@import behaviors

+blueprint

body
  :color = !black_font
  :background = !gray_lightest
  :font-size = 1em

a
  :color = !link_color
  :-moz-outline none

.container
  :background #fff
  :padding 20px 40px
  :border solid 1px black
  :margin-top 20px
  :-moz-border-radius 5px
  :-webkit-border-radius 5px

#header
  +column(24)
  h1
    +replace-text("/images/logo-sm.png", 0, 0)
    :height 70px
    :width 62px
    :cursor pointer
  
  #navset
    .navigation
      :border-bottom 1px solid #ccc
      :height 1%
      :margin 0 0 .75em 0
      :min-height auto
      :overflow auto

      li
        :border 1px solid #ccc
        :border-bottom none
        :float left
        :line-height 1.5
        :list-style-type none
        :margin 0 .25em 0 0
        :padding 0
        
        &.current
          :background #666
          :border 1px solid #666
          :border-bottom none
          :color #fff
          :cursor default

        a
          :background #ddd
          :border 1px solid #eee
          :border-bottom none
          :color #222
          :cursor pointer
          :display block
          :float left
          :font-weight bold
          :padding .15em .33em .25em .33em
          :text-decoration none

          &.current
            :background #666
            :border 1px solid #666
            :border-bottom none
            :color #fff
            :cursor default

            &:focus, &:hover
              :color #fafafa

          &:focus, &:hover
            :text-decoration none
            :color #555
            :outline none
    
#navigation
  +column(5)
  +prepend(19)

#content
  +column(16)  
  .label
    :font-weight bold

  form
    dd
      :margin-left 0
      :margin-bottom 8px

  #flash_notice,
  #flash_error
    :font-weight bold
    :padding 5px 8px
    :margin 10px 0
    :clear both
    :-moz-border-radius 5px
    :-webkit-border-radius 5px

  #flash_notice
    :background-color = !notice_bg_color
    :border solid 1px 
    :border-color = !notice_border_color

  #flash_error
    :background-color = !error_bg_color
    :border solid 1px
    :border-color = !error_border_color

  .fieldWithErrors
    :display inline        
    input
      :background-color #fbe3e4

  #errorExplanation
    +column(24)
    :-moz-border-radius 5px
    :-webkit-border-radius 5px
    :border 2px solid 
    :border-color = !error_border_color
    :padding-bottom 12px
    :margin-bottom 20px
    :background-color = !error_bg_color
    h2
      :-moz-border-radius 5px
      :-webkit-border-radius 5px
      :text-align left
      :padding 5px 5px 5px 15px
      :font
        :weight bold
        :size 12px
      :background-color #c00
      :color #fff
    p
      :color #333
      :margin-bottom 0
      :padding 8px
    ul
      :margin 2px 24px
      li
        :font-size 12px
        :list-style disc
  
  .pagination
    :padding 3px
    :margin 3px
    a
      :padding 2px 5px 2px 5px
      :margin 2px
      :border 1px solid #aaaadd
      :text-decoration none
      :color #000099
    a.hover, a.active
      :border 1px solid #000099
      :color #000
    span.current
      :padding 2px 5px 2px 5px
      :margin 2px
      :border 1 px solid #000099
      :font-weight bold
      :background-color #000099
      :color #fff
    span.disabled
      :padding 2px 5px 2px 5px
      :margin 2px
      :border 1px solid #eee
      :color #ddd
  
  #sidebar
    +round-bottom

    .block
      :background = !white
      +round-top
      +round-bottom

    h3
      :background = !red_wine
      :color = !white
      :border-bottom = 10px "solid" !black_darker
      +round-top

    ul

      li a
        &:link, &:visited
          :background = !white
          :border-bottom = 1px "solid" !gray_lightest
          :text-decoration none

        &:hover, &:active
          :background = !red_wine_dark
          :color = !white

      &.navigation
        +round-bottom  
    
#footer
  +column(24)
  :font-size 0.8em
  :margin-top 20px