a beautiful + responsive UI framework

Download v1.1
About

Feather is a front end framework for building responsive user interfaces quickly and easily. It comes with its own grid system and components (like navbars and buttons). There's nothing to compile and nothing to install. Just add feather.css and feather.js to your web project and you're all set!

Grid System

At Feather's core is the 12-column grid. It helps structure the layout of your content across different screen sizes. You can control when columns stack via the xs, sm, md, and lg sizing classes.

4 columns wide

4 columns wide

4 columns wide

These two will stack

on small screens only

<div class="row">
    <div class="four cols md"><p>4 columns wide</p></div>
    <div class="four cols md"><p>4 columns wide</p></div>
    <div class="four cols md"><p>4 columns wide</p></div>
</div>

<div class="row">
    <div class="six cols xs"><p>These two will stack</p></div>
    <div class="six cols xs"><p>on small screens only</p></div>
</div>

CSS Styling

Feather custom styling is automatically applied to all HTML elements


Buttons

The button class can be applied to buttons, anchors, and inputs with submit types. Control size via padding with the {size} classes. You can also use the width-{size} class for uniform button sizes.

<button class="button md">Default</button>
<button class="button md rounded">Rounded</button>
<button class="button md ghost">Ghost</button>

There are also a handful of built-in hover effects, such as darken, shadowed, and invert.

<button class="button md darken">Darken</button>
<button class="button md shadowed">Shadowed</button>
<button class="button md ghost invert">Invert</button>
Tables

Organizing data

Name Age State
Nick Baquera 42 Texas
Asher Enciso 63 Arizona
Simeon Videnov 22 New York
Nate Dotson 34 Illinois
<table class="striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
        <th>State</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Nick Baquera</td>
        <td>42</td>
        <td>Austin</td>
        <td>Texas</td>
      </tr>
    </tbody>
  </table>
Forms

Combine form elements with grid columns for responsive forms.

<form>
  <div class="row">
    <div class="six cols sm">
      <label for="example-email-field">Email</label>
      <input id="example-email-field" type="email" placeholder="your@email.com">
    </div>
    <div class="six cols sm">
      <label for="example-select-field">Spiciness</label>
      <select id="example-select-field">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
    </div>
  </div>
  <label for="example-Textarea">Message</label>
  <textarea id="example-Textarea" placeholder="Feather is really great tool for setting up my site's user interface!"></textarea>
  <input class="button" type="submit" value="Submit">
</form>
Images

By default, images expand as much as they can to fill the space around them.

Typography

Feather's typographical style is based around the idea of being thin and light. The default font stack relies on Open Sans, but you can customize the typography to suit different styling.

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header
H6 Header

This paragraph contains many different, sometimes useful, HTML5 tags and here are some other words yes. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define deleted text which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags.


This text is under the default hr tag.

Components

Components are high-level elements composed of two or more HTML elements. Feather supports structure and styling for a handful of commonly used components, such as navigation bars and cards.


Modals

Easily create modals with the help of feather.js. Just add an onclick attribute to your button and you're all set! Modals can be made larger via the wide class.

<button class="button" onclick="openModal('example-modal');">Click me!</button>
<div id="example-modal" class="modal">
  <div class="content">
    <span onclick="closeModal('example-modal');" class="close">×</span>
    <h5>Feather Modals</h5>
    <p>This is an example modal from Feather.  It's perfect for logins or other user prompts!</p>
    <hr>
    <button onclick="closeModal('example-modal');" class="button fluid solid">Very cool</button> 
    </div>
  </div>
</div>
Progress Bars

Useful for showing users the status of an upload, download, or other actions. Easily adjust the width of the inner bar via the width property.

<div class="progressbar">
  <div class="bar" style="width:40%"></div>
</div>
Cards

Useful for organizing text, images, or anything else.

This is a default card

Cards can also be combined to, this is a card top

Cards can also be combined to, this is a card segment

Cards can also be combined to, this is a card bottom

<div class="card top">
  <p>Cards can also be combined to, this is a <code>card top</code></p>
</div>
<div class="card segment">
  <p>Cards can also be combined to, this is a <code>card segment</code></p>
</div>
<div class="card bottom">
  <p>Cards can also be combined to, this is a <code>card bottom</code></p>
</div>
Alerts

Alert are useful for notifications that require the user's attention.

This is a default alert!

This is a success alert!

This is a warning alert!

This is a danger alert!

<div class="alert">
  <p>This is a <b>default</b> alert!</p>
</div>

Utilities

Utilities are classes and design patterns meant to speed up your workflow when using Feather.


Text Control

Feather comes with shortcuts for common CSS such as text alignment and element sizing. You can also use the {size}-insert and {size}-remove classes to display elements at specific sizes.

1. This text will disappear on small screens.

2. This text will disappear on medium-size screens.

3. This text will only show on small screens.

4. This text will show on medium-size screens.

<p class="sm-remove">1. This text will disappear on small screens.</p>
<p class="md-remove">2. This text will disappear on medium-size screens.</p>
<p class="sm-insert">3. This text will only show on small screens.</p>
<p class="md-insert">4. This text will show on medium-size screens.</p>

This text is left-aligned with text-left (or t-l)

This text is centered with text-center (or t-c)

This text is right-aligned with text-right (or t-r)

<p class="t-l">This text is left-aligned</p>
<p class="t-c">This text is centered</p>
<p class="t-r">This text is right-aligned</p>