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, modern starting point for web projects. Because Abby is made with SCSS, it's super easy to customize the typography, vertical-rhythm, 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.
.grid__col .grid__col--3
.grid__col
.grid__col .grid__col--2
.grid__col
.grid__col
.grid__col
.grid__col
.grid__col
.grid__col
.grid__col
.grid__col
.grid__col
.grid__col
Example Markup:
<div class="grid">
<div class="grid__col">
<div class="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 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 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 0.8rem
. 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>
<fieldset>
<div class="grid">
<div class="grid__col">
<label for="">Name</label>
<input type="text" placeholder="Name">
</div>
<div class="grid__col">
<label for="">Email</label>
<input type="email" placeholder="Email">
</div>
</div>
<label for="">Country</label>
<select name="" id="">
<option value="">Canada</option>
<option value="">France</option>
<option value="">USA</option>
<option value="">UK</option>
</select>
</fieldset>
<fieldset>
<label for="checkbox">
<input type="checkbox" id="checkbox"> Signup for Newsletter
</label>
<label for="radio">
<input type="radio" id="radio"> Signup for Newsletter
</label>
</fieldset>
<fieldset>
<label for="message">Message:</label>
<textarea id="message" placeholder="What's on your mind?" cols="30" rows="3"></textarea>
</fieldset>
<button type="submit">Submit</button>
</form>
Buttons
Anchor ButtonExample Markup:
<button type="button">Button Element</button>
<a href="" class="button">Anchor Button</a>
<input type="button" value="Button Input">
<input type="submit" value="Submit Input">
Lists
- List item 1
- List item 2
- Sublist item 1
- Sublist item 2
- Sublist item 3
- List item 3
- List item 4
- List item 1
- List item 2
- Sublist item 1
- Sublist item 2
- Sublist item 3
- List item 3
- List item 4
Example Markup:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<ul>
<li>Sublist item 1</li>
<li>Sublist item 2</li>
<li>Sublist item 3</li>
</ul>
<li>List item 3</li>
<li>List item 4</li>
</ul>
Tables
Name | Age | Sex | Location |
---|---|---|---|
Dave Gamache | 26 | Male | San Francisco |
Dwayne Johnson | 42 | Male | Hayward |
Mary Jane | 23 | Female | New York |
Example Markup:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dave Gamache</td>
<td>26</td>
<td>Male</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Dwayne Johnson</td>
<td>42</td>
<td>Male</td>
<td>Hayward</td>
</tr>
<tr>
<td>Mary Jane</td>
<td>23</td>
<td>Female</td>
<td>New York</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.062 |
u-heading-2 | 4.218 |
u-heading-3 | 3.374 |
u-heading-4 | 2.812 |
u-heading-5 | 2.250 |
u-heading-6 | 1.875 |
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>