style_guide.html.erb

<div class='style-guide'>
  <h1 class='red-color'>Style Guide</h1>

  <h2>Colors</h2>

  <ul class='swatches'>
    <% %w(red orange yellow green blue black).each do |color| %>
      <li>
        <div class='swatch <%= color %>-color'></div>
        $<%= color %>-color<br>
        <span class="color-value"></span>
      </li>
    <% end %>
  </ul>

  <script>
    // Populate color-value placeholders with computed value at render time
    window.whenReady(function () {
      function componentToHex(c) {
        var hex = parseInt(c).toString(16);
        return hex.length == 1 ? "0" + hex : hex;
      }

      function rgbToHex(r, g, b) {
        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
      }

      $('.swatch').each(function (ix, el) {
        var $el = $(el);
        var value = $el.css('background-color');
        var rgbMatch = value.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
        if (rgbMatch) {
          value = rgbToHex.apply(this, rgbMatch.slice(1));
        }
        $el.closest('li').find('.color-value').text(value.toUpperCase());
      });
    });
  </script>

  <h2>Site Background</h2>

  <div>
    <div class='background-swatch'></div>
    <div>background.png</div>
    <div>200px x 200 px</div>
  </div>

  <h1 class='red-color'>This is an H1</h1>
  H1 | Freehand 521 | 42px tall / 120% line height $red-color

  <h2>This is an H2</h2>
  H2 | Amble Light | 24px tall / 120% line height $black-color

  <h3>This is an H3</h3>
  H3 | Amble Light | 18px tall / 120% line height $black-color

  <h4>This is an H4</h4>
  H4 | Amble Regular | 14px tall / 120% line height $black-color

  <h5>This is an H5</h5>
  H5 | Amble Bold | 14px tall / 120% line height $black-color

  <div class='paragraph-sample'>
    Body text | Amble Light | 15px tall / 140% line height #5F5F5F
    <p>Fixie single-origin coffee marfa freegan, locavore seitan polaroid fap tofu small batch post-ironic. Direct trade odd future blog next level, swag before they sold out twee gastropub raw denim etsy whatever photo booth. Narwhal irony odd future bespoke. Cred pork belly narwhal farm-to-table, 3 wolf moon 90's hoodie cray gluten-free polaroid sriracha helvetica ennui truffaut PBR. </p>
  </div>

  <h2>Buttons</h2>
  <div><a href="#" class="btn btn-primary">Volunteer</a></div>
  <p>P1 Button | Amble Light | 16px tall #4290CB + 1px #23507A dropshadow, no blur, 1px up Padding : 9px 16px 9px 16px | Background color : #4290CB</p>

  <div><a href="#" class="btn">Register</a></div>
  <p>P1 Button | Amble Light | 16px tall #4290CB + 1px #000000 dropshadow, no blur, 1px up Padding : 9px 16px 9px 16px | Background color : #23507A</p>

  <h2>Section Organizer</h2>

  <div class='bridgetroll-section-level'>
    <div class='bridgetroll-section'>
      <div class='bridgetroll-section-title'>
        <span class='title-text' title='Conference Room A'>Conference Room A</span>
        <div class='actions' style="margin: 0 0 10px;">
          <i class="fa fa-edit edit"></i>
          <i class='fa fa-close destroy'></i>
        </div>
      </div>

      <% volunteers = [
        {full_name: 'Dejuan Gottlieb', level: '1', role: '1', no_show: false, letter: 'T'},
        {full_name: 'Boyd Emard', level: '2', role: '2', no_show: true, letter: 't'},
        {full_name: 'Addison Dooley', level: '3', role: '3', no_show: false, letter: '?'}
      ] %>
      <ul class='volunteers'>
        <% volunteers.each do |vol| %>
          <li class="attendee <% if vol[:no_show] %>no-show<% end %> role<%= vol[:role] %>">
            <div class="bridgetroll-badge level<%= vol[:level]%>"><%= vol[:letter] %></div>
            <span class='name'><%= vol[:full_name] %></span>
            <i class='fa fa-info-circle info'></i>
          </li>
        <% end %>
      </ul>

      <% students = [
        {full_name: 'Olen Becker', class_level: 1, no_show: true},
        {full_name: 'Arthur Botsford', class_level: 2, no_show: false},
        {full_name: 'Noah Hermiston', class_level: 3, no_show: true}
      ] %>
      <ul class='students'>
        <% students.each do |s| %>
          <li class="attendee <% if s[:no_show] %>no-show<% end %>" data-id="{{this.id}}">
            <div class="bridgetroll-badge level<%= s[:class_level] %>"><%= s[:class_level] %></div>
            <span class='name'><%= s[:full_name] %></span>
            <i class='fa fa-info-circle info'></i>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</div>