ceo 0.1.7 → 0.2.0

data/app/controllers/admin/ceo_controller.rb

@@ -0,0 +1,235 @@
+module Admin
+  # Public: A base controller for admin pages.
+  #
+  # This class is the meat of CEO. It contains the helper methods and pages
+  # that make CEO what it is.
+  class CEOController < AdminController
+    before_action :find_thing, only: [:show, :edit, :update, :destroy]
+
+    helper_method :thing_path
+    helper_method :things_path
+    helper_method :new_thing_path
+    helper_method :edit_thing_path
+    helper_method :thing_page_path
+
+    # GET /things
+    # Public: Indexes all things in the model.
+    #
+    # Uses pagination by default.
+    #
+    # Sets several variables and renders to a view.
+    def index(options = {})
+      options[:query] ||= []
+      @page = (params[:page] || 1).to_i
+      @route_name ||= @controller_name ||= controller_name
+
+      @iterator = CEO::Iterator.new(
+        thing,
+        query: options[:query],
+        current_page: @page,
+        per_page: options.fetch(:per_page, 20),
+        filters: {
+          only: options[:only],
+          except: options[:except]
+        }
+      )
+
+      @things = @iterator.all || []
+      @total_pages = @iterator.total_pages
+
+      @model_name ||= thing.to_s.underscore
+      @human_model = @model_name.humanize
+      @title = thing.to_s.titleize.pluralize
+      render 'admin/index'
+    end
+
+    # GET /:things/:id
+    def show(options = {})
+      @model = thing
+      @title = @model.to_s.titleize.pluralize
+      if options[:query]
+        query_out = {}
+        iterator = CEO::Iterator.new(thing)
+        options[:query].each do |q|
+          query_out.merge! iterator.query_eval(@thing, q)
+        end
+      end
+
+      filtered_keys = CEO::Iterator.filter(keys(@thing), options)
+      @thing_attrs = @thing.attributes.select do |k, _|
+        filtered_keys.include? k
+      end
+
+      @thing_attrs.transform_keys! { |k| CEO::Iterator.acronymize(k) }
+      @thing_attrs.merge! query_out if query_out
+
+      render 'admin/show'
+    end
+
+    # GET /:things/new
+    def new(options = { only: [], except: [:id, :created_at, :updated_at], required: [] })
+      @thing_model = thing
+      @thing = @thing_model.new
+      @attrs = CEO::Iterator.filter(@thing.attributes.keys, options)
+      @route_name ||= @controller_name ||= controller_name
+      @index_route = send(:"admin_#{@route_name}_path")
+
+      render 'admin/new'
+    end
+
+    # GET /:things/edit
+    #
+    # options - hash of options
+    #   only - filter attributes to edit by whitelist
+    #   except - filter attributes to edit by blacklist (has some preset defaults that you probably don't want)
+    def edit(options = { only: [], except: [:id, :created_at, :updated_at], required: [] })
+      @required_keys = options[:required]
+      @attrs = CEO::Iterator.filter(@thing.attributes.keys, options)
+      @model = @thing.model_name.name.constantize
+      @route_name ||= @controller_name ||= controller_name
+      @index_route = send(:"admin_#{@route_name}_path")
+
+      render 'admin/edit'
+    end
+
+    # POST /:things
+    def create
+      @thing = thing.new(thing_params)
+      @route_name ||= @controller_name ||= controller_name
+
+      if @thing.save
+        flash[:notice] = "#{thing} successfully created."
+        redirect_to things_path(@route_name), notice: "#{thing.to_s.titleize} successfully created."
+      else
+        render 'admin/new'
+      end
+    end
+
+    # PATCH/PUT /:things/:id
+    def update
+      @route_name ||= @controller_name ||= controller_name
+
+      if @thing.update(thing_params)
+        redirect_to things_path(@route_name), notice: "#{@controller_name.titleize} successfully updated."
+      else
+        @model = @thing.model_name.name.constantize
+        render 'admin/edit'
+      end
+    end
+
+    # DELETE /:things/:id
+    def destroy
+      @thing.destroy
+
+      flash[:notice] = "#{thing} #{@thing.id} was successfully destroyed."
+      redirect_to action: :index
+    end
+
+    private
+
+    # Internal: Finds the ActiveRecord object of the current controller.
+    #
+    # Returns an ActiveRecord class.
+    def thing
+      controller_name.classify.constantize
+    end
+
+    # Private: Permits all model-defined parameters.
+    #
+    # Retuns a hash of parameters.
+    def thing_params
+      @params ||= thing.new.attributes.keys.map(&:to_sym)
+      params.require(thing.name.underscore.to_sym).permit(
+        @params,
+        :page
+      )
+    end
+
+    # Private: Finds an ActiveRecord object by id.
+    #
+    # Sets a variable `@thing`, which contains the object.
+    def find_thing
+      @thing = thing.find(params[:id])
+    end
+
+    # Private: Returns keys for a given model.
+    #
+    # Arguments:
+    #   - model: the model object to get the keys from
+    #
+    # Returns an array of keys.
+    def keys(model)
+      model.attributes.keys
+    end
+
+    # Private: Returns the path of the thing.
+    #
+    # object - An instance of a model.
+    #
+    # Returns the path of the thing.
+    def thing_path(model, object)
+      id = object['ID'] || object['id']
+      send(:"admin_#{undersingularize(model)}_path", id: id)
+    end
+
+    # Private: Returns the index path of a model.
+    #
+    # object - An instance of a model.
+    #
+    # Returns the path of many things.
+    def things_path(object = nil)
+      object ||= @route_name || controller_name
+      send(:"admin_#{underpluralize(object)}_path")
+    end
+
+    # Private
+    #
+    # model - The model name.
+    # object - An instance of a model.
+    #
+    # Returns the edit path of a model.
+    def edit_thing_path(model, object)
+      id = object['ID'] || object['id']
+      send(:"edit_admin_#{undersingularize(model)}_path", id: id)
+    end
+
+    # Private
+    #
+    # model - The model name.
+    # object - An instance of a model.
+    #
+    # Returns the new path of a model.
+    def new_thing_path(model)
+      send(:"new_admin_#{undersingularize(model)}_path")
+    end
+
+    # Private
+    #
+    # model - The model name.
+    # page - The page number.
+    #
+    # Returns the paginated path of an object.
+    def thing_page_path(model, page)
+      send(:"page_admin_#{underpluralize(model)}_path", page: page)
+    end
+
+    # Private
+    #
+    # noun - Something to underpluralize. (String)
+    #
+    # Returns an underscored and pluralized string.
+    def underpluralize(noun)
+      noun.to_s.underscore.pluralize.downcase
+    end
+
+    # Private
+    #
+    # noun - Something to undersingularize. (String)
+    #
+    # Returns an underscored and singularized string.
+    def undersingularize(noun)
+      noun.to_s.underscore.singularize.downcase
+    end
+  end
+end
+

data/app/views/admin/edit.html.erb

@@ -1,8 +1,13 @@
-<h1>New <%= @model.to_s.titleize %></h1>
+<div class='title-bar'>
+  <h1 class='title-bar__text'><%= "Editing  #{@model.to_s.titleize}" %></h1>
+</div>
 
-<%= link_to 'Back', things_path(@model) %>
 
-<%= form_for([:admin, @thing]) do |form| %>
+<%= simple_form_for ([:admin, @thing]), { wrapper: :ceo } do |form| %>
   <%= render 'form', f: form %>
-  <%= form.button :submit %>
+
+  <div class='list__item list__item--form'>
+    <%= link_to 'Cancel', thing_path(@model, @thing), class: 'button', data: { confirm: "Are you sure? Nothing in this form will be saved." } %>
+    <%= form.button :submit, class: 'button' %>
+  </div>
 <% end %>

data/app/views/admin/index.html.erb

@@ -1,78 +1,81 @@
-<h1><%= @title %></h1>
+<div class='title-bar'>
+  <h1 class='title-bar__text'><%= @title %></h1>
+  <%= link_to "New #{@model_name.titleize}", send(:"new_admin_#{@model_name}_path"), class: "title-bar__action title-bar__action--add" %>
+</div><!-- .title-bar -->
 
-<div>
-  <p><%= link_to "New #{@title.singularize}", new_thing_path(@model_name), id: "new-#{@model_name}" %></p>
-  <p><%= "There are no #{@human_model.downcase.pluralize} in the database." if @things.blank? %></p>
-</div>
-
-<table>
-  <thead>
-    <tr>
-      <% unless @things.blank? %>
+<table class='table table--responsive'>
+  <thead class='table--responsive__head'>
+    <tr class='table--responsive__row'>
+      <% if @things.blank? %>
+        <%= "There are no #{@model_name.pluralize} in the database." %>
+      <% else %>
         <% @things.first.each_key do |heading| %>
-          <th>
-            <%= heading %>
-          </th>
+          <th class='table--responsive__cell' scope='col'><%= heading %></th>
         <% end %>
+        <th class='table--responsive__function-cell' scope='col'></th>
+        <th class='table--responsive__function-cell' scope='col'></th>
       <% end %>
     </tr>
   </thead>
 
-  <tbody>
+  <tbody class='table--responsive__body'>
     <% @things.each do |thing| %>
-      <tr id="#{@controller_name}-#{thing.id}">
-      <% thing.each do |heading, value| %>
-        <td label="<%= heading %>: ">
-          <%= value %>
+      <tr class='table--responsive__row'>
+        <% thing.each do |heading, value| %>
+          <td class='table--responsive__cell' label=<%= "#{heading}: " %>><%= value %></td>
+        <% end %>
+
+        <td class='table--responsive__function-cell'>
+          <%= link_to send(:"edit_admin_#{@model_name}_path", thing['ID']), class: 'table__link' do %>
+            <%= inline_svg "admin/pencil.svg" %>
+          <% end %>
         </td>
 
-        <div class="actions">
-          <td><%= link_to("Edit", edit_thing_path(@model_name, thing)) %></td>
-          <td><%= link_to("Show", thing_path(@model_name, thing)) %></td>
-        </div>
-      <% end %>
+        <td class='table--responsive__function-cell'>
+          <%= link_to send(:"admin_#{@model_name}_path", thing['ID']), class: 'table__link' do %>
+            <%= inline_svg "admin/eye.svg" %>
+          <% end %>
+        </td>
       </tr>
     <% end %>
   </tbody>
 </table>
 
-<nav class="navigation" role="navigation">
-  <ul>
-    <% if @page == 1 %>
-      <li><a>1</a></li>
-    <% else %>
-      <!-- First Page -->
-      <li>
-        <%= link_to('1', thing_page_path(@model_name, @page - 1)) %>
+<% if @total_pages.to_i > 1 %>
+  <ul class='nav nav--pagination' role='navigation'>
+    <!-- First Page -->
+    <% unless @page == 1 %>
+      <li class='nav__item nav__item--horizontal'>
+        <%= link_to "&#171;".html_safe, thing_page_path(@model_name, 1), class: 'nav__link nav__link--pagination' %>
       </li>
     <% end %>
 
-    <% if @page.to_i > 2 %>
-      <!-- Previous Page -->
-      <li>
-        <%= link_to("#{@page - 1}", thing_page_path(@model_name, @page - 1)) %>
+    <!-- Previous Page -->
+    <% if @page > 1 %>
+      <li class='nav__item nav__item--horizontal'>
+        <%= link_to "&#139;".html_safe, thing_page_path(@model_name, @page - 1), class: 'nav__link nav__link--pagination' %>
       </li>
     <% end %>
 
-    <% unless @page == 1 %>
-      <!-- Current Page -->
-      <li>
-        <a><%= @page %></a>
+    <!-- Current Page -->
+    <% unless @total_pages == 1 %>
+      <li class='nav__item nav__item--horizontal'>
+        <a class='nav__link nav__link--pagination nav__link--current'><%= @page %></a>
       </li>
     <% end %>
 
-    <% if @page < @total_pages && @page + 1 < @total_pages %>
-      <!-- Next Page -->
-      <li>
-        <%= link_to("#{@page + 1}", thing_page_path(@model_name, @page + 1)) %>
+    <!-- Next Page -->
+    <% if @page < @total_pages %>
+      <li class='nav__item nav__item--horizontal'>
+        <%= link_to "&#155;".html_safe, thing_page_path(@model_name, @page + 1), class: 'nav__link nav__link--pagination' %>
       </li>
     <% end %>
 
+    <!-- Last Page -->
     <% unless @page == @total_pages %>
-      <!-- Last Page -->
-      <li>
-        <%= link_to("#{@total_pages}", thing_page_path(@model_name, @total_pages)) %>
+      <li class='nav__item nav__item--horizontal'>
+        <%= link_to "&#187;".html_safe, thing_page_path(@model_name, @total_pages), class: 'nav__link nav__link--pagination' %>
       </li>
     <% end %>
   </ul>
-</nav>
+<% end %>

data/app/views/admin/new.html.erb

@@ -1,8 +1,12 @@
-<h1>Editing <%= @model.to_s.titleize %></h1>
+<div class='title-bar'>
+  <h1 class='title-bar__text'><%= "New #{@thing_model}" %></h1>
+</div>
 
-<%= link_to 'Back', things_path(@model) %>
-
-<%= form_for([:admin, @thing]) do |form| %>
+<%= simple_form_for ([:admin, @thing]), { wrapper: :ceo } do |form| %>
   <%= render 'form', f: form %>
-  <%= form.button :submit %>
+
+  <div class="list__item list__item--form">
+    <%= link_to "Cancel", things_path(@thing_model), class: 'button', data: { confirm: "Are you sure? Nothing in this form will be saved." } %>
+    <%= form.button :submit, class: 'button' %>
+  </div>
 <% end %>

data/app/views/admin/show.html.erb

@@ -1,16 +1,20 @@
-<h1><%= @title %> #<%= @thing.id %></h1>
+<div class='title-bar'>
+  <h1 class='title-bar__text'><%= "Details for #{@title.singularize} #{@thing.id}" %></h1>
 
-<div>
-  <%= link_to 'Back', things_path(@model) %>
-</div>
+  <%= link_to "Back", things_path(@model), class: 'title-bar__action' %>
+  <%= link_to "Edit", send(:"edit_admin_#{@title.downcase.singularize.parameterize.underscore}_path", @thing.id), class: 'title-bar__action' %>
+  <%= link_to "Delete", send(:"admin_#{@title.downcase.singularize.parameterize.underscore}_path", @thing.id), method: :delete, data: { confirm: "Are you sure you want to delete #{@thing.class} ##{@thing.id}?" }, class: 'title-bar__action' %>
 
-<table>
+</div><!-- .title-bar -->
+
+<table class='table'>
   <tbody>
     <% @thing_attrs.each do |thing| %>
       <tr>
         <th><%= thing.first %></th>
-        <td><%= thing.last %></th>
+        <td><%= thing.last %></td>
       </tr>
     <% end %>
   </tbody>
 </table>
+

data/app/views/admin/styleguide.html.erb

@@ -0,0 +1,779 @@
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Colors</h1>
+  </div>
+  <div class="panel panel--dashboard">
+    <div class="panel--dashboard__section panel--dashboard__section--primary">Primary</div>
+    <div class="panel--dashboard__section panel--dashboard__section--secondary">Secondary</div>
+    <div class="panel--dashboard__section panel--dashboard__section--accent">Accent</div>
+    <div class="panel--dashboard__section panel--dashboard__section--alert">Alert</div>
+    <div class="panel--dashboard__section panel--dashboard__section--success">Success</div>
+    <div class="panel--dashboard__section panel--dashboard__section--warning">Warning</div>
+    <div class="panel--dashboard__section panel--dashboard__section--secure">Secure</div>
+
+    <!-- TODO: Fix inverted button -->
+    <div class="panel--dashboard__section panel--dashboard__section">Inverted</div>
+  </div>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Headers</h1>
+  </div>
+  <p>
+    <h1>h1 Hello, World</h1>
+    <h2>h2 Hello, World</h2>
+    <h3>h3 Hello, World</h3>
+    <h4>h4 Hello, World</h4>
+    <h5>h5 Hello, World</h5>
+    <h6>h6 Hello, World</h6>
+  </p>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Type Selectors</h1>
+  </div>
+  <p>Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.</p>
+  <p>Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.</p>
+  <p>
+    <b>Bold Text</b>
+  </p>
+  <p>
+    <strong>Strong Text</strong>
+  </p>
+  <p>
+    <i>Italic Text</i>
+  </p>
+  <p>
+    <em>Emphasized Text</em>
+  </p>
+  <p>
+    <u>Underlined Text</u>
+  </p>
+  <p>
+    <strike>Strikethrough text</strike>
+  </p>
+  <p>
+    This is an example of
+    <sup>Superscript text</sup>
+  </p>
+  <p>
+    This is an example of
+    <sub>Subscript text</sub>
+  </p>
+  <p>
+    This is
+    <small>small text</small>
+  </p>
+  <p>
+    <abbr title="Abbreviation">abbr</abbr>
+    is an abbreviation
+  </p>
+  <p>
+    To submit a form, press the key labeled
+    <kbd>enter</kbd>
+  </p>
+  <p>
+    <q cite="http://example.com">Quoted text</q>
+  </p>
+  <p>
+    <blockquote>
+      <p>Blockquote - Nunc mi urna, sodales eu varius tincidunt, gravida id nisl. Vestibulum at enim in tortor consectetur sagittis vitae nec tellus. Integer a gravida felis. Suspendisse pharetra elementum enim. Phasellus urna eros, accumsan at ante ut, sollicitudin sodales neque. Proin egestas vitae dui eget scelerisque. Nulla feugiat ex at erat porta, ac porttitor turpis sagittis.</p>
+      <cite>
+        <a>William Shatner</a>
+      </cite>
+    </blockquote>
+  </p>
+  <p>
+    <dfn>The definition</dfn>
+    is the word being defined
+  </p>
+  <p>
+    <mark>Mark text</mark>
+  </p>
+  <p>
+    <samp>Sample Text</samp>
+  </p>
+  <p>
+    var =
+    <var>x</var>
+  </p>
+  <p>
+    <time>20:00</time>
+    <time datetime="2001-05-15 19:00">May 15</time>
+  </p>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Unordered Lists</h1>
+  </div>
+  <ul class="ul">
+    <li>
+      Proin vitae euismod urna. Praesent.
+      <ul class="ul">
+        <li>
+          Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
+        </li>
+        <li>
+          Suspendisse blandit diam eu turpis.
+          <ul class="ul">
+            <li>
+              Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
+            </li>
+            <li>
+              Suspendisse blandit diam eu turpis.
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <% 3.times do %>
+      <li>Curabitur semper purus erat, non.</li>
+    <% end %>
+  </ul>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Ordered Lists</h1>
+  </div>
+  <ol class="ol">
+    <li>
+      Proin vitae euismod urna. Praesent.
+      <ol class="ol">
+        <li>
+          Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
+        </li>
+        <li>
+          Suspendisse blandit diam eu turpis.
+        </li>
+      </ol>
+    </li>
+    <% 3.times do %>
+      <li>Curabitur semper purus erat, non.</li>
+    <% end %>
+  </ol>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Definition Lists</h1>
+  </div>
+  <dl class="dl">
+    <dt>This is a definition title</dt>
+    <dd>This is a definition about the definition title</dd>
+  </dl>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">List</h1>
+  </div>
+  <ul class="ul list">
+    <% 3.times do %>
+      <li class="list__item">Curabitur semper purus erat, non.</li>
+    <% end %>
+  </ul>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">List Horizontal</h1>
+  </div>
+  <ul class="ul list">
+    <% 3.times do %>
+      <li class="list__item list__item--horizontal">Curabitur semper purus erat, non.</li>
+    <% end %>
+  </ul>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Nav</h1>
+  </div>
+  <nav>
+    <ul class="ul nav">
+      <% 3.times do %>
+        <li class="nav__item">
+          <a class="nav__link">Curabitur</a>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Nav Horizontal</h1>
+  </div>
+  <nav>
+    <ul class="ul nav">
+      <% 3.times do %>
+        <li class="nav__item--horizontal">
+          <a class="nav__link">Curabitur</a>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Links</h1>
+  </div>
+  <p>
+    <a class="link" href="#">Default Link</a>
+    <a class="link link--primary" href="#">Primary Link</a>
+    <a class="link link--secondary" href="#">Secondary Link</a>
+    <a class="link link--alert" href="#">Alert Link</a>
+    <a class="link link--success" href="#">Success Link</a>
+    <a class="link link--warning" href="#">Warning Link</a>
+    <a class="link link--secure" href="#">Secure Link</a>
+  </p>
+  <p>
+    Nunc a dui vitae odio condimentum dignissim.
+    <a class="link" href="#">Nunc vel urna</a>
+    non nibh commodo vehicula at laoreet sem. Donec nisi purus,
+    <a class="link link--warning" href="#">hendrerit eget eleifend</a>
+    vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi.
+    <a class="link link--primary" href="#">Sed orci ante</a>
+    facilisis quis ornare a,
+    <a class="link link--alert" href="#">iaculis ac enim</a>
+    fermentum nulla et sollicitudin viverra. Duis vulputate,
+    <a class="link link--secure" href="#">dolor quis porttitor</a>
+    feugiat, odio urna semper odio, eu dictum magna
+    <a class="link link--success" href="#">lacus sit</a>
+    amet arcu.
+    <a class="link link--secondary" href="#">Curabitur hendrerit nunc</a>
+    id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.
+  </p>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Buttons</h1>
+  </div>
+  <p>
+    <button class="button">Default Button</button>
+    <button class="button button--primary">Primary Button</button>
+    <button class="button button--secondary">Secondary Button</button>
+    <button class="button button--alert">Alert Button</button>
+    <button class="button button--success">Success Button</button>
+    <button class="button button--warning">Warning Button</button>
+    <button class="button button--secure">Secure Button</button>
+  </p>
+  <p>
+    <button class="button">Default Button</button>
+    <button class="button button--primary">Primary Button</button>
+    <button class="button button--secondary">Secondary Button</button>
+    <button class="button button--alert">Alert Button</button>
+    <button class="button button--success">Success Button</button>
+    <button class="button button--warning">Warning Button</button>
+    <button class="button button--secure">Secure Button</button>
+  </p>
+  <p>
+    <button class="button button--inverted">Default Button</button>
+    <button class="button button--primary--inverted">Primary Button</button>
+    <button class="button button--secondary--inverted">Secondary Button</button>
+    <button class="button button--alert--inverted">Alert Button</button>
+    <button class="button button--success--inverted">Success Button</button>
+    <button class="button button--warning--inverted">Warning Button</button>
+    <button class="button button--secure--inverted">Secure Button</button>
+  </p>
+  <p>
+    <button class="button button--inverted">Default Button</button>
+    <button class="button button--primary--inverted">Primary Button</button>
+    <button class="button button--secondary--inverted">Secondary Button</button>
+    <button class="button button--alert--inverted">Alert Button</button>
+    <button class="button button--success--inverted">Success Button</button>
+    <button class="button button--warning--inverted">Warning Button</button>
+    <button class="button button--secure--inverted">Secure Button</button>
+  </p>
+  <p>
+    <button class="button button--small">Small Button</button>
+    <button class="button button-medium">Default/Medium Button</button>
+    <button class="button button--large">Large Button</button>
+  </p>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Checkboxes</h1>
+  </div>
+  <ul class="ul list list--unstyled">
+    <li class="list__item list__item--form">
+      <label class="label" for="check1">All Ideas (68)</label>
+      <input class="boolean" id="check1" type="checkbox"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="check2">Completed (25)</label>
+      <input class="boolean" id="check2" type="checkbox"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="check3">In Progress (35)</label>
+      <input class="boolean" id="check3" type="checkbox"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="check4">Planned (7)</label>
+      <input class="boolean" id="check4" type="checkbox"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="check5">Under Consideration (1)</label>
+      <input class="boolean" id="check5" type="checkbox"></input>
+    </li>
+  </ul>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Radio Buttons</h1>
+  </div>
+  <ul class="ul list list--unstyled">
+    <li class="list__item list__item--form">
+      <label class="label" for="filtercheck1">All Ideas (68)</label>
+      <input class="radio" id="filtercheck1" name="radio-example" type="radio"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="filtercheck2">Completed (25)</label>
+      <input class="radio" id="filtercheck2" name="radio-example" type="radio"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="filtercheck3">In Progress (35)</label>
+      <input class="radio" id="filtercheck3" name="radio-example" type="radio"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="filtercheck4">Planned (7)</label>
+      <input class="radio" id="filtercheck4" name="radio-example" type="radio"></input>
+    </li>
+    <li class="list__item list__item--form">
+      <label class="label" for="filtercheck5">Under Consideration (1)</label>
+      <input class="radio" id="filtercheck5" name="radio-example" type="radio"></input>
+    </li>
+  </ul>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Inputs</h1>
+  </div>
+  <form>
+    <p>
+      <label class="label" for="text-input">Text Input</label>
+      <input class="input" id="text-input" placeholder="Text Input" type="text"></input>
+    </p>
+    <p>
+      <label class="label" for="email-input">Email Input</label>
+      <input class="input" id="email-input" placeholder="Email Input" type="email"></input>
+    </p>
+    <p>
+      <label class="label" for="password-input">Password Input</label>
+      <input class="input" id="password-input" placeholder="Password Input" type="password"></input>
+    </p>
+    <p>
+      <label class="label" for="tel-input">Telephone Input</label>
+      <input class="input" id="tel-input" placeholder="+1 (123) 456-7890" type="tel"></input>
+    </p>
+    <p>
+      <label class="label" for="search-input">Search Input</label>
+      <input class="input input--search" id="search-input" placeholder="search" type="search"></input>
+    </p>
+    <p>
+      <label class="label" for="url-input">URL Input</label>
+      <input class="input" id="url-input" placeholder="http://example.com" type="url"></input>
+    </p>
+    <p>
+      <label class="label" for="date-input">Date Input</label>
+      <input class="input" id="date-input" placeholder="1/15/19" type="date"></input>
+    </p>
+    <p>
+      <label class="label" for="file-input">File Input</label>
+      <input class="input" id="file-input" type="file"></input>
+    </p>
+    <p>
+      <label class="label" for="number-input">Number Input</label>
+      <input class="input" id="number-input" placeholder="123" type="number"></input>
+    </p>
+    <p>
+      <label class="label" for="range-input">Range Input</label>
+      <input class="input input--range" id="range-input" type="range"></input>
+      (ONLY WORKS IN WEBKIT AT THE MOMENT)
+    </p>
+    <p>
+      <label class="label">Text Area</label>
+      <textarea class="textarea" placeholder="Text Area"></textarea>
+    </p>
+    <p>
+      <label class="label">Select</label>
+      <select class="select">
+        <option>Select Input</option>
+        <option>Select Option</option>
+      </select>
+    </p>
+    <p>
+      <input class="button" type="submit" value="Submit your post"></input>
+    </p>
+  </form>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Input Statuses</h1>
+  </div>
+  <form>
+    <p>
+      <label class="label error" for="input-error">Text Input Error</label>
+      <input class="input input--error" id="input-error" placeholder="Text Input Error" type="text"></input>
+    </p>
+    <p>
+      <label class="label success">Text Input Success</label>
+      <input class="input input--success" placeholder="Text Input Success" type="text"></input>
+    </p>
+    <p>
+      <label class="label">Text Input Disabled</label>
+      <input class="input" placeholder="Text Input Disabled" type="text"></input>
+    </p>
+  </form>
+</section>
+<section>
+  <div class="filter-bar">
+    <div class="title-bar">
+      <h1 class="title-bar__text">Filters</h1>
+    </div>
+    <div class="filter">
+      <label class="filter__label" for="item_1">Part</label>
+      <div class="filter__wrapper filter__wrapper--select">
+        <select class="select filter__select">
+          <option>Option</option>
+          <option>Option two</option>
+        </select>
+      </div>
+      <input class="input filter__input" id="item_1" placeholder="Search" type="text"></input>
+    </div>
+    <div class="filter">
+      <label class="filter__label" for="item_6">Part</label>
+      <div class="filter__wrapper filter__wrapper--select">
+        <select class="select filter__select" id="item_6">
+          <option>Option</option>
+          <option>Option two</option>
+        </select>
+      </div>
+    </div>
+    <div class="filter">
+      <label class="filter__label" for="item_2">Storage</label>
+      <input class="input filter__input" id="item_2" placeholder="Part 123456" type="text"></input>
+    </div>
+    <div class="filter">
+      <label class="filter__label">Multi-select</label>
+      <input class="input input--checkbox filter__input filter__input--checkbox" id="item_3" type="checkbox"></input>
+      <label class="filter__wrapper filter__wrapper--checkbox" for="item_3">
+        Something
+      </label>
+      <input class="input input--checkbox filter__input filter__input--checkbox" id="item_4" type="checkbox"></input>
+      <label class="filter__wrapper filter__wrapper--checkbox" for="item_4">
+        Something
+      </label>
+    </div>
+    <div class="filter">
+      <label class="filter__label" for="item_5">Checkbox</label>
+      <input class="input input--checkbox filter__input filter__input--checkbox" id="item_5" type="checkbox"></input>
+      <label class="filter__wrapper filter__wrapper--checkbox" for="item_5"></label>
+    </div>
+    <div class="filter">
+      <input class="button" type="submit" value="Submit"></input>
+    </div>
+  </div>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Search</h1>
+  </div>
+  <p>
+    <div class="search">
+      <input class="input input--search search__input" placeholder="Search" type="search"></input>
+      <button class="button search__button" type="submit">
+        <%= inline_svg "search.svg", class: "search__icon" %>
+      </button>
+    </div>
+  </p>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Alerts</h1>
+  </div>
+  <p>
+    <div class="notifier">
+      <div class="notifier__content">
+        Notifier Bar Default
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+    <div class="notifier notifier--primary">
+      <div class="notifier__content">
+        Notifier Bar Primary
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+    <div class="notifier notifier--secondary">
+      <div class="notifier__content">
+        Notifier Bar Secondary
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+    <div class="notifier notifier--function">
+      <div class="notifier__content">
+        Notifier Bar Function
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+    <div class="notifier notifier--alert">
+      <div class="notifier__content">
+        Notifier Bar Alert
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+    <div class="notifier notifier--secure">
+      <div class="notifier__content">
+        Notifier Bar Secure
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+    <div class="notifier notifier--warning">
+      <div class="notifier__content">
+        Notifier Bar Warning
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+    <div class="notifier notifier--success">
+      <div class="notifier__content">
+        Notifier Bar Success
+        <a class="notifier__close">&times;</a>
+      </div>
+    </div>
+  </p>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Panels</h1>
+  </div>
+  <div class="panel">
+    <h2>Panel Default</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+  <div class="panel panel--primary">
+    <h2>Panel Primary</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+  <div class="panel panel--secondary">
+    <h2>Panel Secondary</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+  <div class="panel panel--function">
+    <h2>Panel Function</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+  <div class="panel panel--alert">
+    <h2>Panel Alert</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+  <div class="panel panel--secure">
+    <h2>Panel Secure</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+  <div class="panel panel--warning">
+    <h2>Panel Warning</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+  <div class="panel panel--success">
+    <h2>Panel Success</h2>
+    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
+  </div>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Table</h1>
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Position</th>
+        <th>Office</th>
+        <th>Age</th>
+        <th>Start date</th>
+        <th>Salary</th>
+      </tr>
+    </thead>
+    <tfoot>
+      <tr>
+        <th>Name</th>
+        <th>Position</th>
+        <th>Office</th>
+        <th>Age</th>
+        <th>Start date</th>
+        <th>Salary</th>
+      </tr>
+    </tfoot>
+    <tbody>
+      <tr>
+        <td>Tiger Nixon</td>
+        <td>System Architect</td>
+        <td>Edinburgh</td>
+        <td>61</td>
+        <td>2011/04/25</td>
+        <td>$320,800</td>
+      </tr>
+      <tr>
+        <td>Garrett Winters</td>
+        <td>Accountant</td>
+        <td>Tokyo</td>
+        <td>63</td>
+        <td>2011/07/25</td>
+        <td>$170,750</td>
+      </tr>
+      <tr>
+        <td>Ashton Cox</td>
+        <td>Junior Technical Author</td>
+        <td>San Francisco</td>
+        <td>66</td>
+        <td>2009/01/12</td>
+        <td>$86,000</td>
+      </tr>
+      <tr>
+        <td>Cedric Kelly</td>
+        <td>Senior Javascript Developer</td>
+        <td>Edinburgh</td>
+        <td>22</td>
+        <td>2012/03/29</td>
+        <td>$433,060</td>
+      </tr>
+      <tr>
+        <td>Airi Satou</td>
+        <td>Accountant</td>
+        <td>Tokyo</td>
+        <td>33</td>
+        <td>2008/11/28</td>
+        <td>$162,700</td>
+      </tr>
+      <tr>
+        <td>Bruno Nash</td>
+        <td>Software Engineer</td>
+        <td>London</td>
+        <td>38</td>
+        <td>2011/05/03</td>
+        <td>$163,500</td>
+      </tr>
+      <tr>
+        <td>Sakura Yamamoto</td>
+        <td>Support Engineer</td>
+        <td>Tokyo</td>
+        <td>37</td>
+        <td>2009/08/19</td>
+        <td>$139,575</td>
+      </tr>
+      <tr>
+        <td>Thor Walton</td>
+        <td>Developer</td>
+        <td>New York</td>
+        <td>61</td>
+        <td>2013/08/11</td>
+        <td>$98,540</td>
+      </tr>
+      <tr>
+        <td>Finn Camacho</td>
+        <td>Support Engineer</td>
+        <td>San Francisco</td>
+        <td>47</td>
+        <td>2009/07/07</td>
+        <td>$87,500</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+<section>
+  <div class="title-bar">
+    <h1 class="title-bar__text">Responsive Table</h1>
+  </div>
+  <table class="table--responsive">
+    <thead class="table--responsive__head">
+      <tr class="table--responsive__row">
+        <th class="table--responsive__cell">Name</th>
+        <th class="table--responsive__cell">Position</th>
+        <th class="table--responsive__cell">Office</th>
+        <th class="table--responsive__cell">Age</th>
+        <th class="table--responsive__cell">Start date</th>
+        <th class="table--responsive__cell">Salary</th>
+      </tr>
+    </thead>
+    <tfoot class="table--responsive__foot">
+      <tr class="table--responsive__row">
+        <th class="table--responsive__cell">Name</th>
+        <th class="table--responsive__cell">Position</th>
+        <th class="table--responsive__cell">Office</th>
+        <th class="table--responsive__cell">Age</th>
+        <th class="table--responsive__cell">Start date</th>
+        <th class="table--responsive__cell">Salary</th>
+      </tr>
+    </tfoot>
+    <tbody class="table--responsive__body">
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Tiger Nixon</td>
+        <td class="table--responsive__cell">System Architect</td>
+        <td class="table--responsive__cell">Edinburgh</td>
+        <td class="table--responsive__cell">61</td>
+        <td class="table--responsive__cell">2011/04/25</td>
+        <td class="table--responsive__cell">$320,800</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Garrett Winters</td>
+        <td class="table--responsive__cell">Accountant</td>
+        <td class="table--responsive__cell">Tokyo</td>
+        <td class="table--responsive__cell">63</td>
+        <td class="table--responsive__cell">2011/07/25</td>
+        <td class="table--responsive__cell">$170,750</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Ashton Cox</td>
+        <td class="table--responsive__cell">Junior Technical Author</td>
+        <td class="table--responsive__cell">San Francisco</td>
+        <td class="table--responsive__cell">66</td>
+        <td class="table--responsive__cell">2009/01/12</td>
+        <td class="table--responsive__cell">$86,000</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Cedric Kelly</td>
+        <td class="table--responsive__cell">Senior Javascript Developer</td>
+        <td class="table--responsive__cell">Edinburgh</td>
+        <td class="table--responsive__cell">22</td>
+        <td class="table--responsive__cell">2012/03/29</td>
+        <td class="table--responsive__cell">$433,060</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Airi Satou</td>
+        <td class="table--responsive__cell">Accountant</td>
+        <td class="table--responsive__cell">Tokyo</td>
+        <td class="table--responsive__cell">33</td>
+        <td class="table--responsive__cell">2008/11/28</td>
+        <td class="table--responsive__cell">$162,700</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Bruno Nash</td>
+        <td class="table--responsive__cell">Software Engineer</td>
+        <td class="table--responsive__cell">London</td>
+        <td class="table--responsive__cell">38</td>
+        <td class="table--responsive__cell">2011/05/03</td>
+        <td class="table--responsive__cell">$163,500</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Sakura Yamamoto</td>
+        <td class="table--responsive__cell">Support Engineer</td>
+        <td class="table--responsive__cell">Tokyo</td>
+        <td class="table--responsive__cell">37</td>
+        <td class="table--responsive__cell">2009/08/19</td>
+        <td class="table--responsive__cell">$139,575</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Thor Walton</td>
+        <td class="table--responsive__cell">Developer</td>
+        <td class="table--responsive__cell">New York</td>
+        <td class="table--responsive__cell">61</td>
+        <td class="table--responsive__cell">2013/08/11</td>
+        <td class="table--responsive__cell">$98,540</td>
+      </tr>
+      <tr class="table--responsive__row">
+        <td class="table--responsive__cell">Finn Camacho</td>
+        <td class="table--responsive__cell">Support Engineer</td>
+        <td class="table--responsive__cell">San Francisco</td>
+        <td class="table--responsive__cell">47</td>
+        <td class="table--responsive__cell">2009/07/07</td>
+        <td class="table--responsive__cell">$87,500</td>
+      </tr>
+    </tbody>
+  </table>
+</section>