The grid

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. It's using flexbox so cells can take remaining space with the .grow css class. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

View code<div class="row">
  <code class="cell-1">One</code>
  <code class="cell-11">Eleven</code>
</div>
<div class="row">
  <code class="cell-2">Two</code>
  <code class="cell-10">Ten</code>
</div>
<div class="row">
  <code class="cell-4">Four</code>
  <code class="cell-8">Eight</code>
</div>
<div class="row">
  <code class="cell-6">Six</code>
  <code class="cell-6">Six</code>
</div>
<div class="row">
  <code class="cell-7">Seven</code>
  <code class="cell-5">Five</code>
</div>
<div class="row">
  <code class="cell-9">Nine</code>
  <code class="cell-3">Three</code>
</div>
<div class="row">
  <code class="grow">20%</code>
  <code class="grow">20%</code>
  <code class="grow">20%</code>
  <code class="grow">20%</code>
  <code class="grow">20%</code>
</div>
<div class="row">
  <code class="grow">Grow, it will takes available space</code>
  <code class="button">Action</code>
</div>

Flex

Row or colum display is made using css class and controlling allinment and justified content with css class names.

View code<!-- .container is main centered wrapper -->
<div class="row no-wrap">
  <div class="card">
    <div><code>.no-wrap</code> control the flow and avoid to wrap to new lines when it should normally wrap</div>
  </div>
  <div class="card">Another container that should wrap due to spacing</div>
</div>

<div class="column dividers glued">
  <div>
    <h4>Vertical alignment</h4>
    <div class="row no-wrap dividers">
      <div class="grow">
        <div class="row top" style="height: 200px;">
          <code class="grow">Top</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
      <div class="grow">
        <div class="row middle" style="height: 200px;">
          <code class="grow">Middle</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
      <div class="grow">
        <div class="row bottom" style="height: 200px;">
          <code class="grow">Bottom</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
      <div class="grow">
        <div class="row stretch" style="height: 200px;">
          <code class="grow">Stretch</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
    </div>
  </div>

  <div>
    <h4>Horizontal alignment</h4>
    <div class="row no-wrap dividers">
      <div class="grow">
        <div class="column left">
          <code class="grow">Left</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
      <div class="grow">
        <div class="column center">
          <code class="grow">Center</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
      <div class="grow">
        <div class="column right">
          <code class="grow">Right</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
      <div class="grow">
        <div class="column stretch">
          <code class="grow">Stretch</code>
          <code class="grow">Alligned</code>
        </div>
      </div>
    </div>
  </div>

  <div>
    <h4>Vertical justifying</h4>
    <div class="row no-wrap dividers">
      <div class="grow">
        <div class="column top" style="height: 200px;">
          <code>Top</code>
          <code>Justified</code>
        </div>
      </div>
      <div class="grow">
        <div class="column middle" style="height: 200px;">
          <code>Middle</code>
          <code>Justified</code>
        </div>
      </div>
      <div class="grow">
        <div class="column bottom" style="height: 200px;">
          <code>Bottom</code>
          <code>Justified</code>
        </div>
      </div>
      <div class="grow">
        <div class="column between" style="height: 200px;">
          <code>Between</code>
          <code>Justified</code>
        </div>
      </div>
    </div>
  </div>

  <div>
    <h4>Horizontal justifying</h4>
    <div class="row dividers">
      <div class="grow">
        <div class="row left">
          <code>Left</code>
          <code>Justified</code>
        </div>
      </div>
      <div class="grow">
        <div class="row center">
          <code>Center</code>
          <code>Justified</code>
        </div>
      </div>
      <div class="grow">
        <div class="row right">
          <code>Right</code>
          <code>Justified</code>
        </div>
      </div>
      <div class="grow">
        <div class="row between">
          <code>Between</code>
          <code>Justified</code>
        </div>
      </div>
    </div>
  </div>
</div>

Typography

Type is all set with ems, so font-sizes and spacial relationships can be responsively sized based on a container font-size. Out of the box, it will inherit font-size from <html>. All measurements are still base 10 though so, an <h1> with 5.0emfont-size just means 50px.

View code<h1>Heading &lt;h1&gt;</h1>
<h2>Heading &lt;h2&gt;</h2>
<h2>Heading &lt;h3&gt;</h2>
<h4>Heading &lt;h4&gt;</h4>
<h5>Heading &lt;h5&gt;</h5>
<h6>Heading &lt;h6&gt;</h6>

<p>
  <!-- Other styled text tags -->
  <strong>Bolded</strong>
  <em>Italicized</em>
  <a>Colored</a>
  <u>Underlined</u>
</p>

Buttons

Buttons come in two basic flavors in Skull. The standard <button> element is plain, whereas the .primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.

View code<div class="spacing row">
  <!-- Standard buttons -->
  <button>Button element</button>
  <a class="button" href="#">Anchor button</a>
  <input class="button" type="submit" value="submit input">
</div>
<div class="spacing row">
  <!-- Primary buttons -->
  <button class="primary">Button element</button>
  <a class="button primary" href="#">Anchor button</a>
  <input class="button primary" type="submit" value="submit input">
</div>

Cards, spacing and glued

View code<div class="row">
  <div class="cell-4 card column">
    <h4>Card 1</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
  </div>
  <div class="cell-4 card column">
    <h4>Card 2</h4>
    <p>
      Lorem ipsum dolor sit amet...
    </p>
  </div>
  <div class="cell-4 card column">
    <h4>Card 3</h4>
    <p>
      Lorem ipsum...
    </p>
  </div>
</div>

<div class="row">
  <div class="cell-4">
    <div class="column glued spacing">
      <div class="card">Card</div>
      <div class="card">Card</div>
      <div class="card">Card</div>
    </div>
  </div>

  <div class="cell-4">
    <div class="row no-wrap glued">
      <div class="card grow">Card</div>
      <div class="card grow">Card</div>
      <div class="card grow">Card</div>
    </div>
  </div>

  <div class="cell-4">
    <div class="column">
      <div class="row no-wrap glued">
        <div class="card grow">Card</div>
        <div class="card grow">Card</div>
        <div class="card grow">Card</div>
      </div>
      <div class="row no-wrap glued">
        <button class="grow button">Btn</button>
        <button class="grow button">Btn</button>
        <button class="grow button">Btn</button>
      </div>
      <div class="row no-wrap glued">
        <input class="grow" type="text" placeholder="input...">
        <input class="grow" type="text" placeholder="input...">
        <input class="grow" type="text" placeholder="input...">
      </div>
    </div>
  </div>
</div>

Forms

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

View code<form>
  <div class="row">
    <div class="spacing cell-6">
      <label for="email">Your email</label>
      <input id="email" type="email" required="" placeholder="test@mailbox.com">
    </div>
    <div class="spacing cell-6">
      <label for="reason">Reason for contacting</label>
      <select id="reason">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <div class="spacing">
    <label for="message">Message</label>
    <textarea id="message" placeholder="Hi Dave 👋"></textarea>
  </div>
  <label class="spacing">
    <!-- Always wrap checkbox and radio inputs in a label -->
    <input type="checkbox"> Send a copy to yourself
  </label>
  <div class="spacing">
    <input class="button primary" type="submit" value="Submit">
  </div>
</form>

Lists

View code<ol>
  <li>Ordered lists also have basic styles</li>
  <li>
    They use the decimal list style
    <ul>
      <li>Ordered and unordered can be nested</li>
      <li>Can nest either type of list into the other</li>
    </ul>
  </li>
  <li>Last list item just for the fun</li>
</ol>

Code

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.some-class {
  background-color: red;
}

View code<pre><code>.some-class {
  background-color: red;
}
</code></pre>
<!-- Remember every whitespace and break will be preserved in a <pre>,
     including indentation in your code -->

Tables

Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

View code<table class="u-full-width">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dave Gamache</td>
      <td>26</td>
      <td>Male</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Scarlett Johansson</td>
      <td>36</td>
      <td>Female</td>
      <td>New York City</td>
    </tr>
  </tbody>
</table>

Media queries

Skull uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skull's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:

View code/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

Utilities

Skull has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

View codeYeah... It's not done yet... Sorry