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!
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>Feather custom styling is automatically applied to all HTML elements
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>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>By default, images expand as much as they can to fill the space around them.
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.
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 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.
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.
This is an example modal from Feather. It's perfect for logins or other user prompts!
<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>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>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>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 are classes and design patterns meant to speed up your workflow when using Feather.
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>