Twitter bootstrap HAML template

components.md

Table

%h1.page-header Listing users

.table-responsive
  %table.table.table-striped
    %thead
      %tr
        %th{width: '20%'} Name
        %th{width: '50%'} Email
        %th{width: '15%'} Role
        %th{width: '15%'}

    %tbody
      - @users.each do |user|
        %tr
          %td= user.name
          %td= user.email
          %td= user.role
          %td= link_to 'Show', user
          %td= link_to 'Edit', edit_user_path(user)
          %td= link_to 'Destroy', user, :method => :delete, :data => { :confirm => 'Are you sure?' }

Form

%h1.page-header New user

= form_for @user do |f|
  - if @user.errors.any?
    .text-danger
      %h2= "#{pluralize(@user.errors.count, "error")} prohibited this user from being saved:"
      %ul
        - @user.errors.full_messages.each do |msg|
          %li= msg

  .form-group
    = f.label :name
    = f.text_field :name, autocomplete: 'off', class: 'form-control'
    %span.help-block Name can't be blank.
  .form-group
    = f.label :email
    = f.text_area :email, autocomplete: 'off', class: 'form-control'
  .form-group
    = f.label :role
    = f.text_field :role, autocomplete: 'off', class: 'form-control'

  = f.submit 'Submit', class: 'btn btn-primary'

dashboard-layout.md

Dashboard layout

You need to download dashboard.css file from twitter bootstrap example dashboard source. Then added dashboard.css file in rails assets application.css file.

!!!
%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}
    %meta{:http => {:equiv => "X-UA-Compatible"}, :content => "IE=edge"}
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}
    %meta{:name => "description", :content => ""}
    %meta{:name => "author", :content => ""}
    %title Rails boot starter
    = favicon_link_tag 'favicon.ico'
    = stylesheet_link_tag 'application', :media => 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

  %body
    <!-- fixed navbar top -->
    %nav.navbar.navbar-inverse.navbar-fixed-top
      .container-fluid
        .navbar-header
          %button{:type => "button", :class => "navbar-toggle collapsed", :data => {:toggle => "collapse", :target => "#navbar"}, :aria => {:expanded=>"false", :controls => "navbar"}}
            %span.sr-only Toggle navigation
            %span.icon-bar
            %span.icon-bar
            %span.icon-bar
          %a.navbar-brand{:href => "#"} Project name

        #navbar.navbar-collapse.collapse
          %ul.nav.navbar-nav.navbar-right
            %li= link_to 'Dashboard', '#'
            %li= link_to 'Settings', '#'
            %li= link_to 'Profile', '#'
            %li= link_to 'Sign out', destroy_user_session_path, :method => :delete

          %form.navbar-form.navbar-right
            %input{type: "text", class: "form-control", placeholder: "Search..."}

    <!-- container -->
    %div.container-fluid
      .row
        <!-- sidebar left -->
        .col-sm-3.col-md-2.sidebar
          %ul.nav.nav-sidebar
            %li.active
              %a{href: '#'}
                = 'Overview'
                %span.sr-only (current)
            %li= link_to 'Reports', '#'
            %li= link_to 'Analytics', '#'
            %li= link_to 'Export', '#'
          %ul.nav.nav-sidebar
            %li= link_to 'Nav item again', '#'
            %li= link_to 'One more nav', '#'
            %li= link_to 'Another nav item', '#'

        <!-- content body -->
        .col-sm-9.col-sm-offset-3.col-md-10.col-md-offset-2.main
          %h1.page-header Dashboard

          .row.placeholders
            .col-xs-6.col-sm-3.placeholder
              %img{:src => "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", :width => "200", :height => "200", :class => "img-responsive", :alt => "Generic placeholder thumbnail"}
              %h4 Label
              %span.text-muted Something else
            .col-xs-6.col-sm-3.placeholder
              %img{:src => "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", :width => "200", :height => "200", :class => "img-responsive", :alt => "Generic placeholder thumbnail"}
              %h4 Label
              %span.text-muted Something else
            .col-xs-6.col-sm-3.placeholder
              %img{:src => "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", :width => "200", :height => "200", :class => "img-responsive", :alt => "Generic placeholder thumbnail"}
              %h4 Label
              %span.text-muted Something else
            .col-xs-6.col-sm-3.placeholder
              %img{:src => "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==", :width => "200", :height => "200", :class => "img-responsive", :alt => "Generic placeholder thumbnail"}
              %h4 Label
              %span.text-muted Something else

          %h2.sub-header Section title
          .table-responsive
            %table.table.table-striped
              %thead
                %tr
                  %th #
                  %th Header
                  %th Header
                  %th Header
                  %th Header

              %tbody
                %tr
                  %td 1,001
                  %td Lorem
                  %td ipsum
                  %td dolor
                  %td sit
                %tr
                  %td 1,002
                  %td amet
                  %td consectetur
                  %td adipiscing
                  %td elit
                %tr
                  %td 1,003
                  %td Integer
                  %td nec
                  %td odio
                  %td Praesent
                %tr
                  %td 1,003
                  %td libero
                  %td Sed
                  %td cursus
                  %td ante
                %tr
                  %td 1,004
                  %td dapibus
                  %td diam
                  %td Sed
                  %td nisi
                %tr
                  %td 1,005
                  %td Nulla
                  %td quis
                  %td sem
                  %td at

    <!-- footer -->
    %footer
      %p.text-center
        &copy; Copyright 2017

Replace body content .col-sm-9.col-sm-offset-3.col-md-10.col-md-offset-2.main section by below to load view for each controller action.

.col-sm-9.col-sm-offset-3.col-md-10.col-md-offset-2.main
  - if notice
    .alert.alert-info
      = notice
  - elsif alert
    .alert.alert-danger
      = alert
  = yield

dropdown-layout.md

User dropdown profile, settings, sing out

!!!
%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}
    %meta{:http => {:equiv => "X-UA-Compatible"}, :content => "IE=edge"}
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}
    %meta{:name => "description", :content => ""}
    %meta{:name => "author", :content => ""}
    %title Rails boot starter
    = favicon_link_tag 'favicon.ico'
    = stylesheet_link_tag 'application', :media => 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

  %body
    <!-- fixed navbar top -->
    %nav.navbar.navbar-inverse.navbar-fixed-top
      .container-fluid
        .navbar-header
          %button{:type => "button", :class => "navbar-toggle collapsed", :data => {:toggle => "collapse", :target => "#navbar"}, :aria => {:expanded=>"false", :controls => "navbar"}}
            %span.sr-only Toggle navigation
            %span.icon-bar
            %span.icon-bar
            %span.icon-bar
          %a.navbar-brand{:href => "#"} Rails boot starter

        #navbar.navbar-collapse.collapse
          %ul.nav.navbar-nav.navbar-left
            %li= link_to 'Dashboard', '#'
            %li= link_to 'Reports', '#'
            %li= link_to 'Others', '#'

          %ul.nav.navbar-nav.navbar-right
            %li.dropdown
              %a.dropdown-toggle{href: '#', data: {toggle: 'dropdown'}, role: 'button', aria: {haspopup: 'true', expanded: 'false'}}
                = "Welcome, #{current_user.name}"
                %span.caret
              %ul.dropdown-menu
                %li= link_to 'Profile', '#'
                %li= link_to 'Settings', '#settings'
                %li.divider{role: 'separator'}
                %li= link_to 'Sign out', destroy_user_session_path, :method => :delete

          %form.navbar-form.navbar-left
            %input{type: "text", class: "form-control", placeholder: "Search..."}

    <!-- container -->
    %div.container-fluid
      - if notice
        .alert.alert-info
          = notice
      - elsif alert
        .alert.alert-danger
          = alert

      = yield

    <!-- footer -->
    %footer
      %p.text-center
        &copy; Copyright 2017