Abby

A lightweight HTML/CSS boilerplate built with SCSS.

Download View on Github

Star

Usage

CSS

<link rel="stylesheet" href="abby.css">

SCSS

@import "abby"

NPM

npm install abby --save-dev

Why use Abby?

Abby is designed to be a lightweight (5kb), modern starting point for web projects. Because Abby is made with SCSS, it's super easy to customize the typography, vertical-rhythm, and breakpoints, without overriding anything. It's recommended that you only use Abby on projects that support Internet Explorer 11 and up.

Typography

Heading 1 h1

Heading 2 h2

Heading 3 h3

Heading 4 h4

Heading 5 h5
Heading 6 h6

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

This is what bold text looks like.
This is what italicized text looks like.
This is what underlined text looks like.
This is what small text looks like.

Example Markup:

<p>This is what <strong>bold text</strong> looks like.</p>
<p>This is what <em>italicized text</em> looks like.</p>
<p>This is what <span class="underline">underlined text</span> looks like.</p>
<p>This is what <small>small text</small> looks like.</p>

Grids

Abby's grid system is created using flexbox. The markup and flexibility is dead simple. Simply add an element with the class grid__col inside of an element with the class grid and it will be treated as a column. There are no container or row classes, simply a grid class which is a container for the grid columns. To create a new row you must create a new element with the grid class.

.c-grid__col .c-grid__col--3
.c-grid__col
.c-grid__col .c-grid__col--2
.c-grid__col
.c-grid__col
.c-grid__col
.c-grid__col
.c-grid__col
.c-grid__col
.c-grid__col
.c-grid__col
.c-grid__col
.c-grid__col

Example Markup:

<div class="c-grid">
  <div class="c-grid__col">
  <div class="c-grid__col">
</div>

Modifier Classes

In order to have columns that are larger than others in the same "row" we need some modifier classes to change the flex-grow property. The class c-grid__col--3 means make this element 3x as wide as the other columns in the same "flexed" box. Within Abby there are six modifier classes available for the c-grid__col class.

Modifier Class Name Flex-grow Value
grid__col--6 6
grid__col--5 5
grid__col--4 4
grid__col--3 3
grid__col--2 2
grid__col--1 1

Gutters

Abby has customizable gutters. By default the grid gutters are set to 1rem. This can be changed in /src/_variables.scss.

Forms

Abby's forms are kept as simple and usable as can be while still looking good. Abby's grid system can be used in conjuction with the forms to create different layouts.

Example Markup:

<form class="c-form">
  <fieldset class="c-fieldset">
    <div class="grid">
      <div class="grid__col">
    	  <label class="c-label" for="">Name</label>
    	  <input class="c-input" type="text" placeholder="Name">
      </div>
      <div class="grid__col">
        <label class="c-label" for="">Email</label>
        <input class="c-input" type="email" placeholder="Email">
      </div>
    </div>
    <label class="c-label" for="">Country</label>
    <select class="c-input" name="" id="">
      <option value="">Canada</option>
      <option value="">France</option>
      <option value="">USA</option>
      <option value="">UK</option>
    </select>
  </fieldset>

  <fieldset class="c-fieldset">
    <label class="c-label" for="checkbox">
      <input class="c-input-option" type="checkbox" id="checkbox"> Signup for Newsletter
    </label>
    <label class="c-label" for="radio">
      <input class="c-input-option" type="radio" id="radio"> Signup for Newsletter
    </label>
  </fieldset>
  <fieldset class="c-fieldset">
    <label class="c-label" for="message">Message:</label>
    <textarea class="c-input c-textarea" id="message" placeholder="What's on your mind?" cols="30" rows="3"></textarea>
  </fieldset>

  <button class="c-button" type="submit">Submit</button>
</form>

Buttons

Anchor Button

Example Markup:

<button class="c-button" type="button">Button Element</button>
<a class="c-button" href="" >Anchor Button</a>
<input class="c-button" type="button" value="Button Input">
<input class="c-button" type="submit" value="Submit Input">

Lists

Unordered Lists

  • List item 1
  • List item 2
    • Sublist item 1
    • Sublist item 2
    • Sublist item 3
  • List item 3
  • List item 4

Ordered Lists

  1. List item 1
  2. List item 2
    1. Sublist item 1
    2. Sublist item 2
    3. Sublist item 3

Clean Lists

  • List item 1
  • List item 2
    • Sublist item 1
    • Sublist item 2
    • Sublist item 3

Example Markup:

<ul class="c-list">
  <li class="c-list-item">List item 1</li>
  <li class="c-list-item">List item 2</li>
  <ul class="c-list">
    <li class="c-list-item">Sublist item 1</li>
    <li class="c-list-item">Sublist item 2</li>
    <li class="c-list-item">Sublist item 3</li>
  </ul>
  <li class="c-list-item">List item 3</li>
  <li class="c-list-item">List item 4</li>
</ul>

<!-- Clean List -->
<ul class="c-list c-list--clean">
  <li class="c-list-item">List item 1</li>
  <li class="c-list-item">List item 2</li>
</ul>

Tables

Name Age Strength Agility
Bob Sprocket 26 56 24
Sally Smith 42 44 68
Leon Leverson 88 20 5

Example Markup:

<table class="c-table">
  <thead>
    <tr class="c-tr">
      <th class="c-th">Name</th>
      <th class="c-th">Age</th>
      <th class="c-th">Sex</th>
      <th class="c-th">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr class="c-tr">
      <td class="c-td">Bob Sprocket</td>
      <td class="c-td">26</td>
      <td class="c-td">56</td>
      <td class="c-td">24</td>
    </tr>
    <tr class="c-tr">
      <td class="c-td">Sally Smith</td>
      <td class="c-td">42</td>
      <td class="c-td">44</td>
      <td class="c-td">68</td>
    </tr>
    <tr class="c-tr">
      <td class="c-td">Leon Leverson</td>
      <td class="c-td">88</td>
      <td class="c-td">20</td>
      <td class="c-td">5</td>
    </tr>
  </tbody>
</table>

Code

.class {
  color: red;
  font-size: 12px;
  vertical-align: middle;
}

This is some inline code within a paragraph.

Example Markup:

<pre><code>.class {
  color: red;
  font-size: 12px;
  vertical-align: middle;
}</code></pre>

<p><code>This is some inline code</code> within a paragraph.</p>

Utilities

Abby comes with a few utilies that can help speed things up when starting a project. Some features are only available to use with SCSS, which is recommended.

Mixins

Breakpoints

Abby provides some media query mixins to helpout with responsive design. These are the default breakpoints, which are configurable in src/_variables.scss.

Key Name Value (px)
xsmall 400
small 640
medium 768
large 960
xlarge 1200

Example use:

.element {
  color: blue;

  @include bp(small) {
    color: red;
  }
}

Clearfix

To clearfix an element you can use @include clearfix in your stylesheet, or you can apply the clearfix class in your HTML.

Transitions

Abby includes a mixin to help with the transition property. Simply specify the easing type ('in', 'out', 'in-out') and the speed. The defaults can be changed in src/_variables.scss.

Example:

.element {
  @include ease('in', 0.5);
  color: red;
}

Helper Classes

Font Sizes

Class Name Value (rem)
u-heading-1 5.545
u-heading-2 4.236
u-heading-3 3.427
u-heading-4 2.618
u-heading-5 2.148
u-heading-6 1.618

Example:

<span class="u-heading-1">Television Rules the Nation</span>

Background Colors

Class Name Color
u-bg-black
u-bg-dark-grey
u-bg-mid-grey
u-bg-light-grey
u-bg-white
u-bg-red
u-bg-pink
u-bg-purple
u-bg-indigo
u-bg-blue
u-bg-cyan
u-bg-green
u-bg-yellow
u-bg-orange
u-bg-brown

Example:

<div class="u-bg-red"></div>