Assembly Style Bible

Usage

The Guide comes packaged as a rubygem, include it in your Gemfile with...

gem 'assembly-style-guide', github: 'neonadventures/assembly-style-guide'

Then switch your application.css to be sass and remove the sprockets directives, replacing them with an assembly import statement...

@import 'assembly';

Alternatively you can include the hosted file on your site within the <head> tag:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://styles.assembly.education/dist/css/assembly.min.css">

<!-- Latest compiled and minified JS -->
<script src="http://styles.assembly.education/dist/js/assembly.min.js"></script>

Colours

 
 
#7ED0D6
 
 
#b8e5e8
 
 
#6abcc2
 
 
#FF6B6B
 
 
#ffb8b8
 
 
#da2b2b
 
 
#FB9017
 
 
#86D68C
 
 
#5f5f5f

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading element

Subheading

<div class="header">
  <h1>Heading element</h1>
  <h3 class="subheading">Subheading</h3>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

<p class="text-intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus dignissim convallis et magnis dis parturient an external link montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, a download link eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
    3. List Item 3.3
  4. List Item 4
  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2.2
    • List Item 3.3
  • List Item 4

Tables

Standard table Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
* This is a table footer for extra information
<table class="full-width">
  <tr>
    <td>content</td>
  </tr>
</table>
Enclosed table Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
* This is a table footer for extra information
<table class="table-border">
  <tr>
    <td>content</td>
  </tr>
</table>
Panel table Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
* This is a table footer for extra information
<table class="table-panel">
  <tr>
    <td>content</td>
  </tr>
</table>
Striped table Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
* This is a table footer for extra information
<table class="table-striped">
  <tr>
    <td>content</td>
  </tr>
</table>

Forms

Type your full name in the text box below

<div class="input-group">
  <label for="text_field">Full name</label>
  <p class="hint-text">Type your full name in the text box below</p>
  <input type="text" id="text_field" placeholder="placeholder text" />
</div>
<div class="input-group inline">
  <label for="text_field">Inline input</label>
  <input type="text" id="text_field" placeholder="placeholder text" />
</div>
<div class="input-group">
  <label for="text_field_disabled">Address line 1 <span class="badge">required</span></label>
  <input type="text" id="text_field_disabled" disabled value="I'm disabled" />
</div>

Some hint text

This is not a valid address, please correct the error below

<p class="error-text">This is not a valid address, please correct the error below</p>
<input type="text" id="text_field_error" value="I have an error" />
<textarea></textarea>

Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

<div class='input-group checkbox'>
  <label for="checkbox">Checkbox</label>
  <input id='checkbox' type='checkbox'>
  <p class='description'>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
</div>
1
<div class="input-group">
  <label>Full name</label>
  <div class="input-group-inset">
    <span class="input-inset">1</span>
    <input type="text" placeholder="placeholder text" />
  </div>
</div>
or
<div class="input-group">
  <label>Full name</label>
  <div class="input-group-inset">
    <span class="input-inset">1</span>
    <input type="text" placeholder="placeholder text" />
  </div>
</div>
<select>
  <option>An option</option>
</select>
<div class="input-group radio-buttons">
  <label><input type="radio" class="radio" /> Radio</label>
  <label><input type="radio" class="radio" /> Radio</label>
</div>

<div class="input-group checkboxes">
  <label><input type="checkbox" class="checkbox" /> Checkbox</label>
  <label><input type="checkbox" class="checkbox" /> Checkbox</label>
</div>

Buttons

<div class="col-md-12">
  <div class="header">
    <h2>Buttons</h2>
  </div>
  <div class="row">
    <div class='col-md-12'>
      <button class='btn btn-header'>Button</button>
    </div>
  </div>
</div>
Link
<button class="btn">Button</button>
<input class="btn" type="submit" value="Input" />
<a class="btn">Link</a>

Classes

.btn
.btn .btn-secondary
.btn .btn-cancel
.btn .btn-danger
.btn .btn-warning
.btn disabled
.btn .btn-small
.btn .btn-large
.btn .btn-square

Alerts

This is some info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.

<div class="alert info">
  <i class="alert-icon fa fa-info-circle"></i>
  <div class="alert-content">
    <h3>This is some info</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.</p>
  </div>
</div>

This is a warning

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.



.alert .warning

This is successful

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.



.alert .success

Tabs

Sushi Gumbo Beetroot

Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

Asparagus Cucumber Cake

Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.

Noodle Curry

Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.

Tomato Cucumber Curd

Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.

Radish Tomato

Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.

<div id="assembly-tabs" class="tabs">
  <nav>
    <ul>
      <li><a href="#section-1">Shop</a></li>
      <li><a href="#section-2">Drinks</a></li>
      <li><a href="#section-3">Food</a></li>
      <li><a href="#section-4">Lab</a></li>
      <li><a href="#section-5">Order</a></li>
    </ul>
  </nav>
  <div class="tab-wrapper">
    <div class="tab-content" id="section-1">
      <h3>Sushi Gumbo Beetroot</h3>
      <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
    </div>

    ...

  </div>
</div>

Then initialise the tabs on your element:

$('#assembly-tabs').assemblyTabs();

Modals

<button id="modalButton">Open Modal</button>

Use the HTML structure below for the modal:

<div id="modal" class="assembly-modal">
  <div class="assembly-modal-wrapper">
    <div class="assembly-modal-header">
      This is a modal
      <div class="assembly-modal-close">
        <i class="fa fa-times close-icon"></i>
      </div>
    </div>
    <div class="assembly-modal-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac tortor lobortis, consectetur turpis aliquam, luctus neque. Nam non arcu vel sem viverra lacinia at nec risus. Maecenas accumsan justo a augue volutpat, commodo posuere tortor lacinia. Cras id sem tempor massa tincidunt dignissim at ut dui. Duis quis odio nec eros mollis hendrerit nec a sem. Vivamus pharetra sapien fermentum felis rutrum, eget fermentum ligula accumsan. Proin non purus felis.
    </div>
    <div class="assembly-modal-footer">
      <button type="button" class="btn btn-success assembly-modal-close" id="add-mapping">+ Add</button>
      <button type="button" class="btn btn-primary assembly-modal-close" id="save-mapping">Save</button>
    </div>
  </div>
</div>

Use .assembly-modal .large-modal or .assembly-modal .small-modal to change the size of the modal

Instantiate the modal on your element and then add a click event on your button to open the modal:

$('#modal').assemblyModal();

$('#modalButton').click(function(){
  $('#modal').assemblyModal('show');
});

Panels

This is a panel with a header
Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.
This is a panel with a secondary header
Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.
This is a panel with a success header
Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.
<div class="panel">
  <div class="panel-header">This is a panel with a header</div>
  <div class="panel-content">
    Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.
  </div>
  <div class="panel-footer">
    <button class="btn-cancel float-right">Action</button>
  </div>
</div>
This is a large modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac tortor lobortis, consectetur turpis aliquam, luctus neque. Nam non arcu vel sem viverra lacinia at nec risus. Maecenas accumsan justo a augue volutpat, commodo posuere tortor lacinia. Cras id sem tempor massa tincidunt dignissim at ut dui. Duis quis odio nec eros mollis hendrerit nec a sem. Vivamus pharetra sapien fermentum felis rutrum, eget fermentum ligula accumsan. Proin non purus felis.
This is a small modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac tortor lobortis, consectetur turpis aliquam, luctus neque. Nam non arcu vel sem viverra lacinia at nec risus. Maecenas accumsan justo a augue volutpat, commodo posuere tortor lacinia. Cras id sem tempor massa tincidunt dignissim at ut dui. Duis quis odio nec eros mollis hendrerit nec a sem. Vivamus pharetra sapien fermentum felis rutrum, eget fermentum ligula accumsan. Proin non purus felis.