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 ButtonExample 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
- List item 1
- List item 2
- Sublist item 1
- Sublist item 2
- 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>