Containers

Containers dictate the width of the content and give the inner-content a slight amount of padding from the outer border. A div with a class of M will extend the full width of the page and a div with a class of M-container--narrow will have a max-width of 960px and will be centered with margin: auto. You can nest a M-container--narrow inside of a M.

Container-narrow

<div class="M-container--narrow">

<!--your web content here-->

</div>

Container-full

<div class="M-container--full">

   <!--your web content here-->

</div>

Grid

Grids must have an outer-div with a class of M-grid :

<div class="M-grid">

The grid-items (columns) are nested inside grid-container and have the following format:

<div class="
    M-grid__sm-[n]-of-12
    M_grid__md-[n]-of-12
    M-grid__lg-[n]-of-12">

The default column sizes for three screen-widths:

    sm < 750px,
    md > 750px
    lg > 1000px.

<div class="grid-container">

<div class="M-grid__sm-[n]-of-12 M-grid__md-[n]-of-12 M-grid__lg-[n]-of-12">
<!--your contents here-->
</div>

</div>

Thus, the grid-item with classes:
    M-grid__sm-12-of-12
    M-grid__md-6-of-12
    M-grid__lg-3-of-12

• 100% width ( 12-of-12 columns ) of the container on a small-sized screen (sm, < 750px)

• 50% width ( 6-of-12 columns ) of the container on a medium-sized screen (lg, > 750px)

• 25% width (3-of-12 columns) of the container on a large sized screen (md, > 1,000px)

Live Example
multiple grid-items in a grid-container

Tables

The Margo <table> element follows the convention of having an inner <thead> for the table header row and <tbody> for the data rows.

Short Table

<table class="M-table">
   <thead>
      <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Bed Time</th>
         <th>Favorite Animal</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Zoey</td>
         <td>4</td>
         <td>8:00</td>
         <td>TBD</td>
      </tr>
   </tbody>

</table>

Full Width Table

<table class="M-table M-table--full-width M-table--striped">
   ...
</table>

Configuration Options

• <table class="M-table--striped"> highlights every other row.

• <tr class="M-bg--success|fail|info|warn"> will provide a background context-color for a row

Forms

<form class="form-group">

Simple Form

Forms often contain a pair of <label> + <input> tags. In Margo, these should be encapsulated inside a <div> with a class of form-field

<form class="M-form-group">

   <div class="M-form-group__field">
       <label > Username</label>
       <input type="text"/>
   </div>

   <div class="M-form-group__field">
       <label >Password </label>
       <input type="password"/>
   </div>

   <br/>

   <div class="M-form-group__field">
       <input type="submit" class="M-btn" value="Login"/ >
   </div>

</form>

Long Form
with grid-container and grid-item elements

<div class="
  M-form-group__field
  M-grid__sm-[n]-of-12
  M-grid__md-[n]-of-12 ...">

<form class="M-form-group M-grid">
   <div class="M-form-group__field M-grid__sm-12-of-12 M-grid__md-4-of-12">
       <label class="M-form-group__field_label" > First </label>
       <input class="M-form-group__field_input" type="text"/>
   </div>

   <div class="form-field M-grid__sm-12-of-12 M-grid__md-4-of-12">
       <label class="M-form-group__field_label" >Middle </label>
       <input class="M-form-group__field_input" type="text"/>
   </div>

   <div class="form-field M-grid__sm-12-of-12 M-grid__md-4-of-12">
       <label class="M-form-group__field_label" >Last</label>
       <input class="M-form-group__field_input" type="text"/>
   </div>

   <div class="form-field M-grid__sm-12-of-12 M-grid__md-6-of-12">
       <label class="M-form-group__field_label" >Email </label>
       <input class="M-form-group__field_input" type="email"/>
   </div>

   <div class="form-field M-grid__sm-12-of-12 M-grid__md-6-of-12">
       <label class="M-form-group__field_label" >State </label>
       <select class="M-form-group__field_input" >
         <option value="CA">California </option>
         <option value="NY">New York </option>
         <option value="TX">Texas </option>
     </select>
   </div>

   <div class="M-grid__sm-12-of-12 md-12-of-12 M-form-group__field">
      <label class="M-form-group__field_label" >Description </label>
      <textarea class="M-form-group__field_input" rows="6"> </textarea>
   </div>

    <div class="M-grid__sm-12-of-12 M-grid__md-4-of-12 M-form-group__field">
        <label class="M-form-group__field_label" >Do you like me?</label>
        <label class="M-form-group__field_input M-radiocheck"><input type="radio" value="no" name="shampoo" ><span>No</span></label>
        <label class="M-form-group__field_input M-radiocheck"><input type="radio" value="yes" name="shampoo" ><span>Yes</span></label>
    </div>

    <div class="M-grid__sm-12-of-12 M-grid__md-4-of-12 M-form-group__field">
        <label class="M-form-group__field_label" >Pizza Toppings?</label>
        <label class="M-form-group__field_input M-radiocheck"><input type="checkbox" value="mushrooms" name="pizza" ><span>Mushrooms</span></label>
        <label class="M-form-group__field_input M-radiocheck"><input type="checkbox" value="pepperoni" name="pizza" ><span>Pepperoni</span></label>
        <label class="M-form-group__field_input M-radiocheck"><input type="checkbox" value="deviant" name="pizza"><span>Pineapple</span></label>
    </div>

    <div class="M-grid__sm-6-of-12 M-grid__md-6-of-12 M-form-group__field">
        <input type="submit" class="M-btn M-btn--md" value="Update" / >
    </div>

</form>

Other

Radio Buttons
Pass Fail

<label class="M-radiocheck">
   <input class="M-radio" type="radio" value="pass" name="pass_or_fail">
   <span>Pass</span>
</label>

Check boxes
Bill Me Later

<label class="M-radiocheck">
   <input class="M-checkbox" type="checkbox" value="bill_later" name="pizza" >
   <span>Bill Me Later</span><
</label>

Callout Segment

Use a callout segment for any kind of content that you want to emphasize. To use this component, you use the HTML5 <section> tag with a class of segment.

Example

<section class="M-segment">

   <h4>Cities that start with M</h4>

   <ul>
      <li>Minneapolis</li>
      <li>Marfa</li>
      <li>Madison</li>
   </ul>

   <p>
      Lorem ipsum...
   </p>

</section>

Block Quotes

Repellendus iusto ex, officia est optio labore quam et, illo necessitatibus consectetur quaerat repudiandae, quae.

Maiores facere tempore animi mollitia. Facilis quibusdam amet nam consequuntur quidem, deleniti nobis, accusamus autem voluptas rerum odit at, labore numquam exercitationem id porro, modi veniam aspernatur commodi blanditiis ipsam. Animi eaque et veritatis quis. Eum excepturi repellendus, aut iusto, non earum consectetur. Quas architecto facere sint incidunt praesentium! Veniam omnis dignissimos eius, officia, deleniti recusandae libero.

Someone important from A Credible Source

<blockquote class="M-blockquote">

  <p>
    ....
  </p>
  <cite class="M-cite">
    ....
  </cite>

</blockquote>

Responsive Tiles

Create responsive tiles that retain their proportions with fluid (%-based) widths

Text Formatting Helpers

Aligned left
class="... M-text--left"

Aligned center
class="... M-text--center"

Aligned right
class="... M-text--right"

class="... M-text--muted"
will subdue the text with a light gray color

class="... M-text--primary"
will emphasize the text with the primary color.

Code Blocks

Encapsulated in <pre> ... </pre>. Be mindful of whitespace inside of <pre> tag.

<pre>
  
  <h2>This is code</h2>
  <p>And this is what might happen if you extend past the width of the <pre> container-- a scroll bar will appear. No word-wrap.</p>
  
</pre>