Everything Else

Here we'll run through a handful of useful classes that Skeleton provides to spice up your layout and cover a handful of really common use cases.

There's really not much to it, though, so you'd likely do well just reading the source. No worries, it's short. 😸

Text colors

Skeleton provides three handy classes for categorically styling your font color:

<span class="text-primary"> Primary </span>
<span class="text-success"> Success </span>
<span class="text-danger"> Danger </span>

We've picked colors for handy defaults, but you're encouraged to override them and Roll Your Own.

Button types and states

<button> elements are styled as buttons, of course, but we've also included styling for various button-y <input> types and a handy .button class for applying button styles to an element.

<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">
<input type="button" value="active button" active>
<input type="button" value="disabled button" disabled>

Also, you can apply color classes to buttons, similar to text.

<!-- Note that you need the button base class for anything that isn't implicitly a button already, like anchors -->
<a class="button button-success" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-danger" type="submit" value="submit input">
<input class="button-success" type="button" value="button input">
<input class="button-primary" type="button" value="active button" active>
<input class="button-danger" type="button" value="disabled button" disabled>

Form field states

Form fields can indicate validation state with some handy classes.

<input class="has-error" />
<select class="has-success"></select>

Alert styled content

Create content that jumps out at the user with alert classes.

Note that Skeleton doesn't provide the necessary Javascript to show or hide these elements, just the classes that style them.

<div class="alert"> This will have a polite sense of importance in your layout. </div>
<div class="alert alert-primary"> This will have a strong background color and a sense of polite urgency in your layout. </div>
<div class="alert alert-success"> This will have a strong background color and a loud presence in your layout. </div>
<div class="alert alert-danger"> This will have an urgent background color and a very high visual priority in your layout. </div>

Responsive tables

Our regular tables do an ok job at looking good at small viewports (really it depends on the content of the table) by shedding some padding and breaking whitespace in the cell content.

But if that won't do the trick, wrap your table element in a .table-responsive. The cells will no longer break on whitespace, and instead the whole table will scroll horizontally.

<div class=".table-responsive">
  <table>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

Cards

Use cards to group small bits of related content, or to isolate and draw attention to summary content, call-to-action style.

<div class="card">
  <h5> Check This Out </h5>
  <button class="button-primary"> Do the Thing </button>
</div>
<!-- Easy to make an anchor into a card, too, and the whole card becomes a click target -->
<a class="card" href="#">
  <h5> Click on this to do something </h5>
</a>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Everything Else

Text colors

Button types and states

Form field states

Alert styled content

Responsive tables

Cards

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Usage Guide

Clone this wiki locally