Is Skeletal for you?

Skeletal, like it's ancestor Skeleton, is perfect if you're embarking on a smaller project or if you just don't feel like you need all the bells and whistles of a larger framework. Skeletal only styles the most used HTML elements as well as including a grid, but that's often more than enough to get started. In fact this site is built with Skeletal, and only has ~40 lines of custom CSS to showcase the examples and make the navbar stick when scrolling.

Skeletal is an attempt at taking the original Skeleton and making it even more user friendly. It takes all the good parts of Skeleton, and pairs it with modern CSS utilities that allows the usage of variables. The project is split in two, the "static" part which contains all the selectors and such and the "dynamic" part which exposes variables that can easily be changed to change the look and feel.

If you open your browsers CSS inspector and change the variables on the :root element you will see all the CSS change accordingly.

Like Skeletal and want to keep up to date, help develop it, or just show your appreciation? Here are some GitHub links for you!

Star  Fork  Sponsor

Skeletal vs. Skeleton

Skeleton has been around for many years and have garnered a lot of praise. So why create a new library that is so much alike? Skeletal was born from my frustration with modifying and using Skeleton across projects. I liked the idea of dropping a couple hundred lines of CSS in a file into my project and just magically have it look nice, but I kept matching the colours, font, and other styles to match the project I was working on. Skeletal uses modern CSS variables to separate the layouting logic from the easily customiseable parts. This has the benefit that changing simple things like colour is a breeze, and since the styles are composed through calc statements it's easier to keep them coherent.

The grid

The grid is a 12-column fluid grid, and has been completely rewritten to use the flex-box. It shrinks with the browser/device at smaller sizes and the syntax is simple making coding responsive much easier. Go ahead, resize the browser.

<!-- .container is main centered wrapper -->
<div class="container">

  <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>

  <!-- just use a number and class 'column' or 'columns' -->
  <div class="row">
    <div class="two columns">Two</div>
    <div class="ten columns">Ten</div>
  </div>

  <!-- there are a few shorthand columns widths as well -->
  <div class="row">
    <div class="one-third column">1/3</div>
    <div class="two-thirds column">2/3</div>
  </div>
  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>

</div>

<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->

Since the new grid uses flex boxes you can easily do complex things like centering or equidistantly space elements by using the justify-content property.

<div class="container">
  <div class="row" style="justify-content: center">
    <div class="two columns"><div>justify</div></div>
    <div class="two columns"><div>content</div></div>
    <div class="two columns"><div>center</div></div>
  </div>
  <div class="row" style="justify-content: space-evenly">
    <div class="two columns"><div>justify</div></div>
    <div class="two columns"><div>content</div></div>
    <div class="two columns"><div>space-evenly</div></div>
  </div>
  <div class="row" style="justify-content: space-between">
    <div class="two columns"><div>justify</div></div>
    <div class="two columns"><div>content</div></div>
    <div class="two columns"><div>space-between</div></div>
  </div>
</div>

Typography

<!-- Standard Headings -->
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

<!-- Base type size -->
<p>The base type is 16px over 1.7 line height (27px)</p>

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

Buttons

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-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. Their size is by default calulated by font-size, and the same as the various form element input fields. A single variable change can change either all buttons, or all buttons and form elements to whatever size you want, the padding is auto-calculated to be a good fit.

<!-- Standard buttons -->
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">

<!-- Primary buttons -->
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">

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.

<!-- The above form looks like this -->
<form>
  <div class="row">
    <div class="six columns">
      <label for="exampleEmailInput">Your email</label>
      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width" id="exampleRecipientInput">
        <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>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
  <label class="example-send-yourself-copy">
    <input type="checkbox">
    <span class="label-body">Send a copy to yourself</span>
  </label>
  <input class="button-primary" type="submit" value="Submit">
</form>

<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->

<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->

Lists

<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

<!-- Easily substitute any <ul> or an <ol> to get number lists or sublists -->

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;
}

<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

Tables have their padding defined based on font size, so no matter the size you set they will just feel right.

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

<table class="u-full-width">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</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>Dwayne Johnson</td>
      <td>42</td>
      <td>Male</td>
      <td>Hayward</td>
    </tr>
  </tbody>
</table>

Media queries

Skeletal 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 Skeletal'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:

/* 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) {}

Navigation bar

While not strictly speaking an HTML element in its own right the navigation bar is a specialisation of a list of links. In Skeletal you can apply a navbar class to such a list and it will be styled as a horizontal list of elements instead of a regular list. This is how the navigation bar on this site was made, and can look like this:

• Introduction
• Typography
• Buttons
• Utilities
• Lists

Note that you can also use u-pull-right from the next section to place elements to the right of the navbar. It only needs to be applied to the first element that is supposed to be on the right hand side. Since the navbar also uses a flex box you can also use the same method to space the elements out as you see fit.

<ul class="navbar">
  <li><a href="#intro">Introduction</a></li>
  <li><a href="#typography">Typography</a></li>
  <li><a href="#buttons">Buttons</a></li>
  <li class="u-pull-right"><a href="#utilities">Utilities</a></li>
  <li><a href="#lists">Lists</a></li>
</ul>

Utilities

Skeletal 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. The list of utilites is slightly longer than in the original Skeleton and includes:

<div class="u-cf u-full-width">
  <div class="u-pull-right bordered">
    <code>u-pull-right</code> for floating right
  </div>
  <div class="u-pull-left bordered">
    <code>u-pull-left</code> for floating left
  </div>
</div>
<div class="bordered">
  <code>u-cf</code> clears the floating of elements
</div>
<div class="u-full-width bordered">
  <code>u-full-width</code> for taking up all space
</div>
<div class="u-center bordered">
  <code>u-center</code> for centering content
</div>
<div class="u-uppcase bordered">
  <code>u-uppcase</code> to transform things to uppercase
</div>
<div class="u-hero u-center bordered">
  <code>u-hero</code> to create a hero slide
</div>