Getting Started

Feather CSS uses plain CSS and avoids pre-processors like SASS / LESS. Pre-processors require extra steps for compilation and integration, which in our opinion, don't add enough value and therefore can be avoided.

Feather relies on CSS Variables which are supported by the latest versions of all major browsers. This provides ease of debugging and easy integraion into exsiting or new web projects.

Download

Feather CSS can be downloaded from our GitHub Repository. A quick link is provided below for you convenience.

Installation

After you have downloaded the Feather CSS File, you can simply link it to your HTML file as below.

<link rel="stylesheet" href="stylesheets/feather.v2.1.css">

Note: In order to ensure that your website scales properly on smaller screens, also add the following like to your HTML file

<meta name="viewport" content="width=device-width, initial-scale=1">

Container

Container forms the boundary around the contents of the page.

<div class="container"> ... </div>

Section

Purpose of Sections is to visually distinguish different areas of the Web Page.

<section> ... </section>

Spacing

Feather provides a large variety of Classes for managing spacing on the content on you Web page. Following naming conventions are used.

Note: Valid values with spacing classes are 1, 2, 3, 4, 5, big, huge.

<!-- All around Margin size 2 -->
<div class="m-2"> ... </div>

<!-- Vertical Margin size 4 -->
<div class="mv-4"> ... </div>

<!-- Right Padding size huge -->
<div class="pr-huge"> ... </div>

Flexbox

Feather CSS Flexbox provides a non-responsive way of dividing space. Space can be divided either Horizontally or Vertically

Note: Flex area can be divided according to weights between 1 and 6 inclusive.

<div class="d-flex flex-h">
<div class="info flex-6 p-3"><p>Flex 6</p></div>
<div class="alert flex-1 p-3"><p>Flex 1</p></div>
<div class="positive flex-2 p-3"><p>Flex 2</p></div>
<div class="negative flex-1 p-3"><p>Flex 1</p></div>
</div>

Note: flex-h means Horizontal Flexbox. Alternatively, flex-v can be used for vertical Flexbox.

Grid

Feather CSS provides a Responsive Grid system that can be divided into Maximum of 6 Columns.

<div class="d-grid two-col">
<div class="info p-2"> Child 1 </div>
<div class="alert p-2"> Child 2 </div>
<div class="positive p-2"> Child 3 </div>
<div class="negative p-2"> Child 4 </div>
</div>

Note: Valid Class names for columns are .one-col, .two-col, .three-col, .four-col, .five-col and .siv-col.

Note: The grid automatically adjusts according to the size of the Viewport. In the above example if you don't see two rendered columns it may be because the width of the demo section is too small.

Note: In Display related classes, .d-none is available for Hiding Elements.

Headings

Feather CSS supports upto Six Levels of Heading according to the HTML specifications.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

Paragraph Tags are automatically styled by Feather CSS. No classes need to be specified

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque fugiat voluptates autem iusto pariatur molestias incidunt dolor</p>

Note: Empasis can also be added to specific words using em Tags.

<p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing</em> elit. Itaque fugiat voluptates autem iusto pariatur molestias incidunt dolor</p>

Lists

List related Tags are automatically styled by Feather CSS and no CSS Classes need to be specified.

<ol>
<li>Ordered 1</li>
<li>Ordered 2</li>
<li>Ordered 3</li>
<li>Nested List
<ul>
<li>Unordered 1</li>
<li>Unordered 2</li>
<li>Unordered 3</li>
</ul>
</li>
</ol>

Tables

Table related Tags are automatically styled by Feather CSS. No classes need to be specified

<table>
<thead>
<tr>
<th>ID.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>User</td>
<td>email@email.com</td>
</tr>
<tr>
<td>02</td>
<td>User</td>
<td>email@email.com</td>
</tr>
<tr>
<td>03</td>
<td>User</td>
<td>email@email.com</td>
</tr>
<tr>
<td>04</td>
<td>User</td>
<td>email@email.com</td>
</tr>
</tbody>
</table>

Note: Tables are Fluid and will take up all available horizontal space.

Buttons

Feather CSS implements three different styles of Buttons i.e. button, primary, thin.

<div class="mv-1">
<button>Normal</button>
<button class="button button-primary">Primary</button>
</div>
<div class="mv-1">
<button class="button button-thin">Thin</button>
<button class="button button-primary button-thin">Thin Primary</button>
</div>

Inputs

Feather Styles the most commonly used Input Elements.

<form action="">
<fieldset class="mv-3">
<label for="name">Name</label>
<input type="text" name="name" placeholder="Enter Name">
<p class="input-desc">Enter your full name for our records</p>
</fieldset>

<fieldset class="mv-3">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Enter your Email">
<p class="input-desc">Enter your current email address for our records</p>
</fieldset>

<fieldset class="mv-3">
<label for="city">City</label>
<select name="city">
	<option value="null"></option>
	<option value="nyc">New York</option>
	<option value="msc">Moscow</option>
	<option value="bij">Beijing</option>
</select>
<p class="input-desc">Enter the city you currently live in</p>
</fieldset>

<fieldset class="mv-3">
<label for="remarks">Remarks</label>
<textarea name="remarks" placeholder="Enter your remarks"></textarea>
<p class="input-desc">Please describe your experience with our services</p>
</fieldset>

<fieldset>
<input type="submit" value="Create" class="button button-primary">
</fieldset>
</form>

Colors

Colors can be used to visually distinguish different types of Event. Feather CSS provides styling for four types of Events i.e. .positive, .negative, .info, .alert.

<div class="positive mv-2 p-2">Positive</div>
<div class="negative mv-2 p-2">Negative</div>
<div class="info mv-2 p-2">Info</div>
<div class="alert mv-2 p-2">Alert</div>

Messages

Feather CSS provides styles for two types of Messages i.e. .message, .flash-message.

<div class="flash-message alert">
<div class="container">
<p>This is an Alert Flash Message</p>
</div>
</div>

<div class="message">
<h4>Normal Message</h4>
<p>This is a normal Message Box</p>
</div>

Note: As you can see from the above Example, Event Colors can be applied to Messages.

Code

Code related Tags are automatically styled by Feather CSS and no additional CSS Classes are needed.

print("Hello World!")

<code>
<pre>print("Hello World!")</pre>
</code>

Utility Classes

Fonts

Font stylings can be set using the following CSS Classes

<p class="fg-bold mv-1">Bold Text</p>
<p class="fg-justify mv-1">Justify Text</p>
<p class="fg-color-normal mv-1">Normal Text Color</p>
<p class="fg-color-dull mv-1">Dull Text Color</p>
<p class="fg-color-primary mv-1">Primary Color Text</p>

Background

Background colors can be adjusted using the following CSS Classes

<div class="bg-color-normal border rounded-corners mv-2 p-2">Normal Background Color</div>
<div class="bg-color-dull border rounded-corners mv-2 p-2">Dull Background Color</div>
<div class="bg-color-dark border rounded-corners mv-2 p-2">Dark Background Color</div>
<div class="bg-color-primary fg-color-invert border rounded-corners mv-2 p-2">Primary Background Color</div>