Why FeatherCSS?

FeatherCSS is a Dark Mode ready minimalist CSS Framework with support for RTL and Accessibility. It purposefully excludes features like grid layout, media queries, or icons which tends to require per-project customization.

Star Fork

Key Highlights

It’s Just CSS™ with CSS variables. Bring your own LESS / Sass / CSS-in-JS solution.
Super minimal at only 2kb gzipped
Learn just a few simple class names, the rest is default you can tweak around directly.

How Dark Mode works

FeatherCSS ships with Dark Mode support out of the box with CSS variables. In order to provide maximum flexibility of turning it on, off, or automatically switch based on user display settings, you can toggle data-theme="dark" attribute to your markup with a minimal JavaScript code (consult your framework specific solutions).

Browser Support

FeatherCSS supports all the latest browsers (or degrade gracefully), minus the IE11 which is now deprecated even from high-traffic websites like StackOverflow and LinkedIn.

Installation

FeatherCSS can be used as a starter CSS with a simple file you can copy into your project. Or, import CSS partials into your existing LESS / Sass / CSS-in-JS ecosystem.

Download

Install with npm.

npm install feathercss

Install with Yarn.

yarn add feathercss

Directory structure

feathercss/
├──dist/
│  ├──feather.css // Great for copying to your project
│  ├──feather.min.css // Great for importing
│  └──components // Great for importing just what you need
│     ├──global.css
│     ├──variables.css
│     ├──typography.css
│     ├──...

Typography

FeatherCSS has a default font family that leverages system fonts which arguably renders the best for each platform. If you inspect large scale SaaS apps out there, you will notice that they do the same vs loading custom font. You can of course override this easily using CSS variables.

Headings

Quite often, the information hierarchy does not map one-to-one to the desired style of headings. For example, you might need to use <h2 /> that has a style of <h1 /> because <h1 /> is already used as a hero title which displays much larger. Instead of repeating <h1 /> twice in markup, you can use semantic markups that are separated from visual representation.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id lacus eu nulla porta sagittis non nec dui. Vivamus iaculis aliquet diam. Proin eu ullamcorper metus, at imperdiet ante.

This marks the history of FeatherCSS

You need to add data-theme="dark" attribute to your markup to enable Dark Mode.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id lacus eu nulla porta sagittis non nec dui. Vivamus iaculis aliquet diam. Proin eu ullamcorper metus, at imperdiet ante.

This marks the history of FeatherCSS

You need to add data-theme="dark" attribute to your markup to enable Dark Mode.

Show RTL

<h1 class="heading-1">Heading 1</h1>
<h2 class="heading-2">Heading 2</h2>
<h3 class="heading-3">Heading 3</h3>
<h4 class="heading-4">Heading 4</h4>
<h5 class="heading-5">Heading 5</h5>
<h6 class="heading-6">Heading 6</h6>

<p>Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id lacus eu nulla porta sagittis non nec dui. Vivamus iaculis aliquet diam. Proin eu ullamcorper metus, at imperdiet ante.</p>
<p>This <mark>marks</mark> the history of FeatherCSS</p>
<p>You need to add <strong><code>data-theme="dark"</code></strong> attribute to your markup to enable Dark Mode.</p>

Blockquote

A simple way to highlight a quote.

This changed my life, literally.

Show RTL

Buttons

Buttons are an essential part of interactive websites. To avoid interfering with other types of buttons on the page, FeatherCSS implements them with explicit class names.

Show RTL

Lists

List elements are used to display a list of useful information to readers, as well as semantically grouping a collection of elements such as navigation links. FeatherCSS defaults to show discs and numbers for list elements, and requires a reset class to be used for semantic grouping.

Waffles
Pancakes

Add 100g flour into a bowl
Add 2x eggs into the bowl and mix

Room Size: 1,200 SQFT
Bathrooms: 2

Waffles
Pancakes

Add 100g flour into a bowl
Add 2x eggs into the bowl and mix

Room Size: 1,200 SQFT
Bathrooms: 2

Show RTL

<ul>
  <li>Waffles</li>
  <li>Pancakes</li>
</ul>

<ol>
  <li>Add 100g flour into a bowl</li>
  <li>Add 2x eggs into the bowl and mix</li>
</ol>

<dl>
  <dt>Room Size</dt>
  <dd>1,200 SQFT</dd>
  <dt>Bathrooms</dt>
  <dd>2</dd>
</dl>

<nav>
  <ul class="reset">
    <li><a href="#list">Link 1</a></li>
    <li><a href="#list">Link 2</a></li>
  </ul>
</nav>

Form

When customizing form styles, accessibility and RTL are often forgotten. FeatherCSS takes care of them by designing form style in conjunction with the proper markup structure shown in the example markup below.

Show RTL

<form>
  
  <label for="username">
    <span class="label-text">Username</span>
    <!-- Input element should be nested under label element, along with "id" and "for" -->
    <input type="text" id="username" name="username" placeholder="Enter username here" />
    <span class="form-success-message" aria-live="polite">Your username is available</span>
  </label>

  <label for="password">
    <span class="label-text">Password</span>
    <input type="password" id="password" name="password" />
    <!-- Politely let assistive device be aware of this dynamic error message -->
    <span class="form-error-message" aria-live="polite">Password is too weak</span>
  </label>

  <label for="theme">
    <span class="label-text">Theme</span>
    <span class="select">
      <select id="theme" class="select-input">
        <option>Please pick one</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="automatic">Automatic</option>
      </select>
    </span>
  </label>

  <!-- Fieldset semantically group several controls and labels -->
  <fieldset>
    <legend>Choose your favorite animal</legend>
    <label for="animals-option-cat">
      <input id="animals-option-cat" type="radio" name="animals-option" />
      <span class="radio-label">Cat</span>
    </label>
    <label for="animals-option-dog">
      <input id="animals-option-dog" type="radio" name="animals-option" />
      <span class="radio-label">Dog</span>
    </label>
    <label for="animals-option-capybara">
      <input id="animals-option-capybara" type="radio" name="animals-option" />
      <span class="radio-label">Capybara</span>
    </label>
  </fieldset>

  <fieldset>
    <legend>Pick your favorite drink(s)</legend>
    <label for="drinks-option-coffee">
      <input id="drinks-option-coffee" type="checkbox" name="drinks-option" />
      <span>Coffee</span>
    </label>
    <label for="drinks-option-tea">
      <input id="drinks-option-tea" type="checkbox" name="drinks-option" />
      <span>Tea</span>
    </label>
    <label for="drinks-option-beer">
      <input id="drinks-option-beer" type="checkbox" name="drinks-option" />
      <span>Beer</span>
    </label>
  </fieldset>

  <label for="comment">
    <span class="label-text">Additional Comment</span>
    <textarea id="comment" placeholder="Type your comment" rows="3" />
  </label>

  <button class="primary-button" type="submit">Send</button>
</form>

Table

Table is best used for displaying a set of tabular data, as never intended to be used as a replacement for creating a layout. FeatherCSS provides a clean default style you can expand on.

Name	Serving	Caffeine
Coffee	1 cup (8 fl oz)(237 g)	95 mg
Tea	1 cup (8 fl oz)(238 g)	22—28 mg
Source: Coffee, Tea

Name	Serving	Caffeine
Coffee	1 cup (8 fl oz)(237 g)	95 mg
Tea	1 cup (8 fl oz)(238 g)	22—28 mg
Source: Coffee, Tea

Show RTL

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Serving</th>
      <th>Caffeine</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Coffee</td>
      <td>1 cup (8 fl oz)(237 g)</td>
      <td>95 mg</td>
    </tr>
    <tr>
      <td>Tea</td>
      <td>1 cup (8 fl oz)(238 g)</td>
      <td>22—28 mg</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        Source:
        <a href="https://...">Coffee</a>,
        <a href="https://...">Tea</a>
      </td>
    </tr>
  </tfoot>
</table>

.css-edzp6p{margin-right:0.25rem;font-weight:500;color:hsl(0,0%,15%);}Feather.css-1xktb56{font-weight:400;color:hsl(0,0%,30%);}CSS

Why FeatherCSS?

Key Highlights

How Dark Mode works

Browser Support

Installation

Install with npm.

Install with Yarn.

Directory structure

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Blockquote

Buttons

Lists

Form

Table

FeatherCSS