underoos 1.0.0 → 1.1.0

data/app/views/underoos/styleguides/components/_popovers.haml

@@ -1,33 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Popovers <span>popovers.sass</span>
-  %p(style="width:67%;") Pop Overs utilize <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Bootstrap's Popover plugin</a>. They are similar to the tool tip plugin and they require <a href="http://twitter.github.com/bootstrap/javascript.html#tooltips">Bootstrap's Tooltip plugin</a> to be included as well.
-
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Position
-        %th Markup
-    %tbody
-      %tr
-        %td <a href="#" rel="popover" data-placement="top" data-original-title="Top" data-content="This is a popover">Top</a>
-        %td.html <code>&lt;a rel="popover" data-placement="top" data-original-title="Top" data-content="..."&gt;Top&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(rel="popover" data-placement="top" data-original-title="Top" data-content="...") Top</code>
-      %tr
-        %td <a href="#" rel="popover" data-placement="bottom" data-original-title="Bottom" data-content="This is a popover">Bottom</a>
-        %td.html <code>&lt;a rel="popover" data-placement="bottom" data-original-title="Bottom" data-content="..."&gt;Bottom&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(rel="popover" data-placement="bottom" data-original-title="Bottom" data-content="...") Bottom</code>
-      %tr
-        %td <a href="#" rel="popover" data-placement="left" data-original-title="Left" data-content="This is a popover">Left</a>
-        %td.html <code>&lt;a rel="popover" data-placement="left" data-original-title="Left" data-content="..."&gt;Left&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(rel="popover" data-placement="left" data-original-title="Left" data-content="...") Left</code>
-      %tr
-        %td <a href="#" rel="popover" data-placement="right" data-original-title="Right" data-content="This is a popover">Right</a>
-        %td.html <code>&lt;a rel="popover" data-placement="right" data-original-title="Right" data-content="..."&gt;Right&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(rel="popover" data-placement="right" data-original-title="Right" data-content="...") Right</code>
-
-  .notification.important.fade.in
-    %p <strong>Note!</strong> Popovers are opt in and will only be instantiated if called directly from JavaScript:
-    %code $("a[rel=popover]").popover()
-

data/app/views/underoos/styleguides/components/_progress-bars.haml

@@ -1,72 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Progress Bars <span>progress-bars.sass</span>
-  %p(style="width:67%;") Progress bars are used to display actions being performed by the user. Utilize a bit of JavaScript to set the <code>width</code> of the <code>.progress &gt; .bar</code> to showcase it's status.
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Progress Bar
-        %th Class
-        %th Description
-    %tbody
-      %tr
-        %td
-          .progress
-            .bar(style="width:60%")
-        %td <code>.progress</code>
-        %td The default style utilizing the <code>$standard</code> value
-      %tr
-        %td
-          .progress.info
-            .bar(style="width:60%")
-        %td <code>.progress.info</code>
-        %td The info bar is typically used as an alternate to the default bar
-      %tr
-        %td
-          .progress.important
-            .bar(style="width:60%")
-        %td <code>.progress.important</code>
-        %td Typically used when performing an important action
-      %tr
-        %td
-          .progress.success
-            .bar(style="width:60%")
-        %td <code>.progress.success</code>
-        %td Used to show a successful or positive progress
-      %tr
-        %td
-          .progress.warning
-            .bar(style="width:60%")
-        %td <code>.progress.warning</code>
-        %td Used when performing cautious or potentially negative action
-      %tr
-        %td
-          .progress.danger
-            .bar(style="width:60%")
-        %td <code>.progress.danger</code>
-        %td Typically used when performing a delete or negative action
-      %tr
-        %td
-          .progress.primary
-            .bar(style="width:60%")
-        %td <code>.progress.primary</code>
-        %td Inherits the main CI color to display a progress action
-  .notification.important.fade.in
-    %p <strong>Pro Tip!</strong> Click in the progress bar container to showcase the loading animation
-
-.sg-subsection
-  %h4 Native Progress &amp; Meter Bars
-  .sg-onethird.pull
-    %p Native Progress and Meter bars are not supported in all browsers, but are available to some. We opt for using a component over these, but polyfills are available for both <a href="https://gist.github.com/667320">meter</a> and <a href="http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/">progress bars</a>. They just require a bit more css to accommodate.
-  .sg-twothird.indent
-    .well
-      %p The <code>meter</code> bar is used to indicate a scalar measurement within a known range, or a fractional value.
-      %p
-        %meter(min="0" max="100" value="50")
-      %br
-      %br
-      %p The <code>progress</code> bar is used to represent the progress of a task.
-      %p
-        %progress(min="0" max="100" value="50")
-

data/app/views/underoos/styleguides/components/_tabs-pills.haml

@@ -1,241 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Tabs &amp; Pills <span>tabs.sass, pills.sass</span>
-
-.sg-subsection
-  .sg-half.pull
-    %h4 Default Tabs
-    %p Attach the classes <code>.nav .tabs</code> to the <code>ol</code> or <code>ul</code> elements.
-    .well(style="margin-top:1.25em;")
-      %nav
-        %ul.nav.tabs
-          %li
-            %a(href="#tab_one" data-toggle="tab") Tab One
-          %li.active
-            %a(href="#tab_two" data-toggle="tab") Tab Two
-          %li
-            %a(href="#tab_three" data-toggle="tab") Tab Three
-          %li.dropdown
-            %a.dropdown-toggle(href="#" data-toggle="dropdown") Tab Four<span class="caret"></span>
-            %ul.dropdown-menu
-              %li
-                %a(href="#tab_four-1" data-toggle="tab") Subnav 1
-              %li
-                %a(href="#tab_four-2" data-toggle="tab") Subnav 2
-              %li.divider
-              %li
-                %a(href="#tab_four-3" data-toggle="tab") Subnav 3
-      .tab-content(style="margin-top:1.25em;")
-        .tab-pane#tab_one
-          %p Tab <span class="decal primary">one</span> content
-        .tab-pane#tab_two.active
-          %p Tab <span class="decal primary">two</span> content
-        .tab-pane#tab_three
-          %p Tab <span class="decal primary">three</span> content
-        .tab-pane#tab_four-1
-          %p Tab <span class="decal primary">four</span>: subnav <span class="decal primary">1</span> content
-        .tab-pane#tab_four-2
-          %p Tab <span class="decal primary">four</span>: subnav <span class="decal primary">2</span> content
-        .tab-pane#tab_four-3
-          %p Tab <span class="decal primary">four</span>: subnav <span class="decal primary">3</span> content
-
-  .sg-half.push
-    %h4 Default Pills
-    %p Attach the classes <code>.nav .pills</code> to the <code>ol</code> or <code>ul</code> elements.
-    .well(style="margin-top:1.25em;")
-      %nav
-        %ul.nav.pills
-          %li
-            %a(href="#pill_one" data-toggle="pill") Pill One
-          %li.active
-            %a(href="#pill_two" data-toggle="pill") Pill Two
-          %li
-            %a(href="#pill_three" data-toggle="pill") Pill Three
-          %li.dropdown
-            %a.dropdown-toggle(href="#" data-toggle="dropdown") Pill Four<span class="caret"></span>
-            %ul.dropdown-menu
-              %li
-                %a(href="#pill_four-1" data-toggle="pill") Subnav 1
-              %li
-                %a(href="#pill_four-2" data-toggle="pill") Subnav 2
-              %li.divider
-              %li
-                %a(href="#pill_four-3" data-toggle="pill") Subnav 3
-      .pill-content(style="margin-top:1.25em;")
-        .pill-pane#pill_one
-          %p Pill <span class="decal primary">one</span> content
-        .pill-pane#pill_two.active
-          %p Pill <span class="decal primary">two</span> content
-        .pill-pane#pill_three
-          %p Pill <span class="decal primary">three</span> content
-        .pill-pane#pill_four-1
-          %p Pill <span class="decal primary">four</span>: subnav <span class="decal primary">1</span> content
-        .pill-pane#pill_four-2
-          %p Pill <span class="decal primary">four</span>: subnav <span class="decal primary">2</span> content
-        .pill-pane#pill_four-3
-          %p Pill <span class="decal primary">four</span>: subnav <span class="decal primary">3</span> content
-
-
-.sg-subsection
-  .sg-half.pull
-    %h4 Stacked Tabs
-    %p Stack tabs by adding the class <code>.stacked</code> to the <code>.tabs</code> element.
-    .well(style="margin-top:1.25em;")
-      %nav
-        %ul.nav.tabs.stacked
-          %li
-            %a(href="#") Tab One
-          %li.active
-            %a(href="#") Tab Two
-          %li.dropdown
-            %a.dropdown-toggle(href="#" data-toggle="dropdown") Tab Three<span class="caret"></span>
-            %ul.dropdown-menu
-              %li
-                %a(href="#") Subnav 1
-              %li
-                %a(href="#") Subnav 2
-              %li.divider
-              %li
-                %a(href="#") Subnav 3
-          %li
-            %a(href="#") Tab Four
-
-  .sg-half.push
-    %h4 Stacked Pills
-    %p Stack pills by adding the class <code>.stacked</code> to the <code>.pills</code> element.
-    .well(style="margin-top:1.25em; padding-bottom:1em;")
-      %nav
-        %ul.nav.pills.stacked
-          %li
-            %a(href="#") Pill One
-          %li.active
-            %a(href="#") Pill Two
-          %li.dropdown
-            %a.dropdown-toggle(href="#" data-toggle="dropdown") Pill Three<span class="caret"></span>
-            %ul.dropdown-menu
-              %li
-                %a(href="#") Subnav 1
-              %li
-                %a(href="#") Subnav 2
-              %li.divider
-              %li
-                %a(href="#") Subnav 3
-          %li
-            %a(href="#") Pill Four
-
-
-.sg-subsection
-  .sg-half.pull
-    %h4 Tabs structure
-    %p Tabs structure shown with a dropdown.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav>
-            <!-- Add `.stacked` to the ul below -->
-            <ul class="nav tabs">
-              <li><a>Tab 1</a></li>
-              <li><a class="active">Tab 2</a></li>
-              <li class="dropdown">
-                <a data-toggle="dropdown">Tab 3<span class="caret">...
-                <ul class="dropdown-menu">
-                  ...
-                </ul>
-              </li>
-            </ul>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav
-            %ul.nav.tabs
-              %li
-                %a(href="#") Tab One
-              %li.active
-                %a(href="#") Tab Two
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown")
-                  Tab Three
-                  %span.caret
-                %ul.dropdown-menu
-                  ...
-
-  .sg-half.push
-    %h4 Pills structure
-    %p Pills structure shown with a dropdown.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav>
-            <!-- Add `.stacked` to the ul below -->
-            <ul class="nav pills">
-              <li><a>Pill 1</a></li>
-              <li><a class="active">Pill 2</a></li>
-              <li class="dropdown">
-                <a data-toggle="dropdown">Pill 3<span class="caret">...
-                <ul class="dropdown-menu">
-                  ...
-                </ul>
-              </li>
-            </ul>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav
-            %ul.nav.pills
-              %li
-                %a(href="#") Pill One
-              %li.active
-                %a(href="#") Pill Two
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown")
-                  Pill Three
-                  %span.caret
-                %ul.dropdown-menu
-                  ...
-
-
-.sg-subsection
-  %h4 Togglable Tabs &amp; Pills
-  %p(style="width:67%;") To utilize a drop dead simple version of hiding and showing content related to a tab/pill, utilize <a href="http://twitter.github.com/bootstrap/javascript.html#tabs">Bootstrap's Tab</a> plugin. The base structure of tabs and pills doesn't change, except to include a few more classes on the links and the <code>href</code> attribute the button will target.
-  %pre.prettyprint.html
-    = preserve do
-      :escaped
-        <nav>
-          <ul class="nav tabs">
-            <li>
-              <a data-toggle="tab" href="#tab_one">Tab One</a>
-            </li>
-            <li class="active">
-              <a data-toggle="tab" href="#tab_two">Tab Two</a>
-            </li>
-          </ul>
-        </nav>
-        <!-- tab-content holds all tab-pane markup -->
-        <div class="tab-content">
-          <div class="tab-pane" id="tab_one">
-            <p>Tab one content</p>
-          </div>
-          <div class="tab-pane active" id="tab_two">
-            <p>Tab two content</p>
-          </div>
-        </div>
-  %pre.prettyprint.haml.hidden
-    = preserve do
-      :escaped
-        %nav
-          %ul.nav.tabs
-            %li
-              %a(data-toggle="tab" href="#tab_one") Tab One
-            %li.active
-              %a(data-toggle="tab" href="#tab_two") Tab Two
-
-        .tab-content
-          #tab_one.tab-pane
-            %p Tab one content
-          #tab_two.tab-pane.active
-            %p Tab two content
-  .notification.important.fade.in
-    %p <strong>Note!</strong> When targeting pills, use <code>data-toggle="pill"</code> for links and <code>.pill-content</code>, <code>.pill-pane</code> for content elements.
-

data/app/views/underoos/styleguides/components/_tooltips.haml

@@ -1,37 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Tooltips <span>tooltips.sass</span>
-  %p(style="width:50%;")
-    Tool tips utilize <a href="http://twitter.github.com/bootstrap/javascript.html#tooltips">Bootstrap's Tooltip plugin</a>. You can control various options of how a tool tip is shown based on attributes set in the link.
-    %br
-    %br
-    Styles are automatically generated based on the inverted colors of the body's <code>background-color</code> and font <code>color</code>.
-
-.sg-subsection
-  %table.box.banded.thead-decorate.tools
-    %thead
-      %tr
-        %th Position
-        %th Markup
-    %tbody
-      %tr
-        %td <a href="#" rel="tooltip" data-placement="top" data-original-title="Top">Top</a>
-        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="top" data-original-title="Top"&gt;Top&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="top" data-original-title="Top") Top</code>
-      %tr
-        %td <a href="#" rel="tooltip" data-placement="bottom" data-original-title="Bottom">Bottom</a>
-        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="bottom" data-original-title="Bottom"&gt;Bottom&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="bottom" data-original-title="Bottom") Bottom</code>
-      %tr
-        %td <a href="#" rel="tooltip" data-placement="left" data-original-title="Left">Left</a>
-        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="left" data-original-title="Left"&gt;Left&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="left" data-original-title="Left") Left</code>
-      %tr
-        %td <a href="#" rel="tooltip" data-placement="right" data-original-title="Right" data-offset="10">Right</a>
-        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="right" data-original-title="Right"&gt;Right&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="right" data-original-title="Right") Right</code>
-
-  .notification.important.fade.in
-    %p <strong>Note!</strong> Tooltips are opt in and will only be instantiated if called directly from JavaScript:
-    %code $("a[rel=tooltip]").tooltip()
-

data/app/views/underoos/styleguides/components/_wells.haml

@@ -1,29 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Wells <span>wells.sass</span>
-  .sg-half.pull
-    %p Wells are simple containers for popping elements off the page. They come in a few different flavors.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <div class="well">...</div>
-          <div class="well lite">...</div>
-          <div class="well dark">...</div>
-          <div class="well primary">...</div>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          .well ...
-          .well.lite ...
-          .well.dark ...
-          .well.primary ...
-  .sg-half
-    .well
-      %code .well
-    .well.lite
-      %code .well.lite
-    .well.dark
-      %code .well.dark
-    .well.primary
-      %code .well.primary
-

data/app/views/underoos/styleguides/index.html.haml

@@ -1,259 +0,0 @@
-!!! 5
-%html
-  %head
-    %title underoos.
-    %meta(content="IE=edge,chrome=1" http-equiv="X-UA-Compatible")
-    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")
-    %meta(name="description" content="")
-    %meta(name="author" content="mode set")
-    %meta(name="keywords" content="")
-    %meta(name="imagetoolbar" content="no")
-    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
-    %meta(name="apple-touch-fullscreen" content="YES")
-    %meta(name="apple-mobile-web-app-capable" content="YES")
-    %meta(name="apple-mobile-web-app-status-bar-style" content="black")
-
-    <!--[if lt IE 9]>
-    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
-    = stylesheet_link_tag 'underoos'
-    = stylesheet_link_tag 'styleguide'
-
-  %body(data-spy="scroll" data-target=".spy")
-    .navbar.fixed.sg-navbar
-      .navbar-inner
-        .container.outer
-          %a.btn.info.btn-navbar(data-toggle="collapse" data-target=".nav-collapse")
-            %span.icon-bar
-            %span.icon-bar
-            %span.icon-bar
-          %a#page_title.brand(href="/styleguide") underoos.
-          %nav.spy.nav-collapse
-            %ul.nav
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown") Typography<span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#typography") Description
-                  %li
-                    %a(href="#type_headings") Headings
-                  %li
-                    %a(href="#type_paragraphs") Inline Paragraph Elements
-                  %li
-                    %a(href="#type_rules") Rules
-                  %li
-                    %a(href="#type_lists") Lists
-                  %li
-                    %a(href="#type_code") Code
-
-              %li
-                %a(href="#palettes") Palettes
-
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown") Elements<span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#elements") Description
-                  %li
-                    %a(href="#elements_basenav") Base Nav
-                  %li
-                    %a(href="#elements_buttons") Buttons
-                  %li
-                    %a(href="#elements_images") Images
-                  %li
-                    %a(href="#elements_video") Video
-
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown") Components<span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#components") Description
-                  %li
-                    %a(href="#components_buttongroups") Button Groups
-                  %li
-                    %a(href="#components_dropdowns") Dropdowns
-                  %li
-                    %a(href="#components_tabs_pills") Tabs &amp; Pills
-                  %li
-                    %a(href="#components_nav_lists") Navigation Lists
-                  %li
-                    %a(href="#components_breadcrumbs") Breadcrumbs
-                  %li
-                    %a(href="#components_pagination") Pagination
-                  %li
-                    %a(href="#components_navs_showcase") Navs Showcase
-                  %li
-                    %a(href="#components_accordions") Accordions
-                  %li
-                    %a(href="#components_navbars") Navbars
-                  %li
-                    %a(href="#components_paddles") Paddles
-                  %li
-                    %a(href="#components_modals") Modals
-                  %li
-                    %a(href="#components_notifications") Notifications
-                  %li
-                    %a(href="#components_decals") Decals
-                  %li
-                    %a(href="#components_tooltips") Tooltips
-                  %li
-                    %a(href="#components_popovers") Popovers
-                  %li
-                    %a(href="#components_progress_bars") Progress Bars
-                  %li
-                    %a(href="#components_carets") Carets
-                  %li
-                    %a(href="#components_close") Close Icons
-                  %li
-                    %a(href="#components_wells") Wells
-                  %li
-                    %a(href="#components_media") Media Grid
-              %li
-                %a(href="#tables") Tables
-
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown") Forms<span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#forms") Description
-                  %li
-                    %a(href="#forms_type") Form Types
-                  %li
-                    %a(href="#forms_example") Example Forms
-                  %li
-                    %a(href="#forms_vertical") Vertical Form
-                  %li
-                    %a(href="#forms_horizontal") Horizontal Form
-                  %li
-                    %a(href="#forms_structure") Form Structure
-                  %li
-                    %a(href="#forms_state") Form States
-                  %li
-                    %a(href="#forms_inputs") Additional Input Controls
-                  %li
-                    %a(href="#forms_typeahead") Typeahead
-                  %li
-                    %a(href="#forms_editable") Content Editable
-
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown") Layouts<span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#layouts") Description
-                  %li
-                    %a(href="#layouts_containers") Containers
-                  %li
-                    %a(href="#layouts_queries") Media Queries
-                  %li
-                    %a(href="#layouts_upgrades") Upgrades
-
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown") Assets<span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#assets") Description
-                  %li
-                    %a(href="#assets_icons") Favicon &amp; Touch Icons
-                  %li
-                    %a(href="#assets_gui") UI Elements
-
-              %li.dropdown
-                %a.dropdown-toggle(href="#" data-toggle="dropdown") Utilities<span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#utilities") Description
-                  %li
-                    %a(href="#utils_helpers") Helpers
-                  %li
-                    %a(href="#utils_transitions") Transitions
-                  %li
-                    %a(href="#utils_mixins") Mixins
-                  %li
-                    %a(href="#utils_functions") Functions
-                  %li
-                    %a(href="#utils_polyfill") Polyfills
-
-
-    .container.outer
-
-      #typography.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Typography
-          %p.sg-note Heading, paragraph, lists, and inline typographic elements.
-        = render :partial => 'typography'
-
-      #palettes.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Palettes
-          %p.sg-note Various color palettes and themes used in the application. All properties are found under the themes directory
-        = render :partial => 'palettes'
-
-
-      #elements.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Elements
-          %p.sg-note Base class styles to enhance common elements found in an application.
-        = render :partial => 'elements'
-
-      #components.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Components
-          %p.sg-note Components are common patterns used in many applications but are not defined as base element tags.
-        = render :partial => 'components'
-
-      #tables.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Tables
-          %p.sg-note Tables are used to represent tabular data.
-        = render :partial => 'tables'
-
-      #forms.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Forms
-          %p.sg-note Inputs, textarea, labels, selects, and other controls associated with form elements. Tuned to play with <a href="https://github.com/justinfrench/formtastic">formtastic</a>.
-        = render :partial => 'forms'
-
-      #layouts.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Layouts
-          %p.sg-note Layouts consists of various templates that are specific to the application.
-        = render :partial => 'layouts'
-
-      #assets.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Assets
-          %p.sg-note Showcases the various assets in use by the application.
-        = render :partial => 'assets'
-
-      #utilities.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Utilities
-          %p.sg-note Various utility, helpers and miscellaneous classes, commonly used for extension.
-        = render :partial => 'utilities'
-
-
-      #resources.sg-spy-landing
-      .sg-section
-        .well.dark
-          %h2.sg-heading Resources
-          %p.sg-note References, links, credits, and various information related to the styleguide.
-        = render :partial => 'resources'
-
-    #flash_messages.flash-messages
-
-    = render :partial => 'shared/upgrades'
-
-    = javascript_include_tag 'underoos'
-    = javascript_include_tag 'prettify'
-    = javascript_include_tag 'styleguide'
-