Simple Usage
Crafted for all kinds of skill level. Giving preference to code over configuration with minimal dependency. Feather makes it simple like never before
Ultralight Builds
The CSS structure is superlight, Using the power of media queries gives you fast builds so you don't worry about the page load timings
Efficient Ecosystem
By enforcing strict quality guidelines, we ensure the computing stay simple and efficent as expected. Styles are designed as a starting point not as a framework
Feather Toolkit
Feather is an open source lightweight CSS toolkit that developed with mobile-first principles and guidelines Feather helps you quickly prototype your ideas or build responsive websites. You should use Feather if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Feather only styles a handful of standard HTML elements and includes a grid, Feather comprises of a 12 grid system. Each column is contained within rows, which are contained within a container. The container is set to a maximum width of 1200px, but you can edit without having to break anything. The syntax is simple and it makes coding responsive much easier. Download the CSS stylesheet, add the appropriate classes to your markup, and you're off to the races. It’s that simple. Go ahead, resize the browser
one
col xl-1 lg-1 md-1 sm-1 all-1
eleven
col xl-11 lg-11 md-11 sm-11 all-11
two
col xl-1 lg-1 md-1 sm-1 all-1
ten
col xl-11 lg-11 md-11 sm-11 all-11
three
col xl-1 lg-1 md-1 sm-1 all-1
nine
col xl-11 lg-11 md-11 sm-11 all-11
four
col xl-1 lg-1 md-1 sm-1 all-1
eight
col xl-11 lg-11 md-11 sm-11 all-11
five
col xl-1 lg-1 md-1 sm-1 all-1
seven
col xl-11 lg-11 md-11 sm-11 all-11
six
col xl-1 lg-1 md-1 sm-1 all-1
six
col xl-11 lg-11 md-11 sm-11 all-11
seven
col xl-11 lg-11 md-11 sm-11 all-11
five
col xl-1 lg-1 md-1 sm-1 all-1
eight
col xl-11 lg-11 md-11 sm-11 all-11
four
col xl-1 lg-1 md-1 sm-1 all-1
nine
col xl-11 lg-11 md-11 sm-11 all-11
three
col xl-1 lg-1 md-1 sm-1 all-1
ten
col xl-11 lg-11 md-11 sm-11 all-11
two
col xl-1 lg-1 md-1 sm-1 all-1
eleven
col xl-11 lg-11 md-11 sm-11 all-11
one
col xl-1 lg-1 md-1 sm-1 all-1
The Markup
All the code you need is pretty simple and clearly understandable with meaningful class names.Initially create a .row wrapper to occupy all the coloums. Inside the .row simply state the number of coloums with .col class and number breakup you wish to have in diffrent viewports.
Eg. if you wish to have 4 coloums in extra large, large,medium screens and 2 coloums in medium screen and 1 coloum in rest of the viewport
<div class="container">
<div class="row">
<div class="col xl-3 lg-3 md-3 sm-6 all-12">
Create 4 equal coloums in extra large, large and medium screens.
2 equal coloums in small screens and
1 single coloum in rest of the viewports
</div>
<div class="col xl-3 lg-3 md-3 sm-6 all-12">
Create 4 equal coloums in extra large, large and medium screens.
2 equal coloums in small screens and
1 single coloum in rest of the viewports
</div>
<div class="col xl-3 lg-3 md-3 sm-6 all-12">
Create 4 equal coloums in extra large, large and medium screens.
2 equal coloums in small screens and
1 single coloum in rest of the viewports
</div>
<div class="col xl-3 lg-3 md-3 sm-6 all-12">
Create 4 equal coloums in extra large, large and medium screens.
2 equal coloums in small screens and
1 single coloum in rest of the viewports
</div>
</div>
</div>
Feather is built mobile-first, so all coloums will expand to the full container width on small screens. If you want to preserve the width regardless of device width use the class .all-* at the end of the coloum class name. Be sure to nest columns within a .row class. You may also choose to nest rows within a .container class
<div class="container">
<div class="row">
<div class="col all-3">
Take 3/12 width of the container in any device width.
</div>
<div class="col all-3">
Take 3/12 width of the container in any device width.
</div>
<div class="col all-6">
Take 6/12 width of the container in any device width.
</div>
</div>
</div>
Typography
The Typography base is Lato from Google Fonts Type is all set with the rems , so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Simple grid typography presets include many additional customization classes to style your headers and paragraph blocks. Simply add the classes to your markup to give different font weights.
.font-light
.font-normal
.font-bold
.font-heavy
Feather contains a few color classes to hightlight the texts to convey the meaning in a variety of situations
.text-primary
.text-sucesss
.text-warning
.text-danger
Components
Feather tool kit pre loaded with a definite set of commonly used input components. Which can be directly associated to your markup.
Buttons
Buttons come in two basic flavors in Feather. The standard
<button>
element with vibrant solid background and outline buttons with transparent background and sold outlines.
The buttons elements can be more appealing by adding class .button-primary .button-sucess .button-warning .button-danger according to the context
<button class="button button-primary">primary</button>
<button class="button button-sucess">sucess</button>
<button class="button button-warning">warning</button>
<button class="button button-danger">danger</button>
<button class="button button-outline-primary">primary</button>
<button class="button button-outline-sucess">sucess</button>
<button class="button button-outline-warning">warning</button>
<button class="button button-outline-danger">danger</button>
Tables
Build responsive tables and grids with feather table structure be sure to use thead and tbody while building a table
| Name | Age | Sex | Location |
|---|---|---|---|
| John Doe | 21 | Male | India |
| John Doe | 21 | Male | India |
<div class="responsive-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hohn Doe</td>
<td>21</td>
<td>Male</td>
<td>India</td>
</tr>
<tr>
<td>Hohn Doe</td>
<td>21</td>
<td>Male</td>
<td>India</td>
</tr>
</tbody>
</table>
</div>
Media Queries
Feather 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 Feather’s grid is built and is the preferable method of organizing CSS. It means all styles outside of a query apply to all devices, and 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:
- Desktop HD > 1200px
- Desktop 992px
- Tablet 768px
- Phablet 576px
- Mobile < 576px
Mobile first queries
@media (min-width: 576px){
/* Phablet Viewport */
}
@media (min-width: 768px){
/* Tablet */
}
@media (min-width: 992px){
/* Desktop PC */
}
@media (min-width: 1200px){
/* Desktop HD Large screens */
}
The grid system is an aid, not a gurantee.
It permits a number of possible users and each designers can look for a solution appropiate to his personal style. But one must learn how to use the grid; it is an art thet requires practise