adeliciouslife Style Guide

A simple prototyping framework to cut down your dev time.

Grid

columns

Scaffolding allows for an unlimited amount of columns giving you the freedom to create any scale grid. This can be done in two ways:

Add a class directly to an element in the markup: class="column-[n]"

											
				<section class="grid">
					<article class="column-8">
						content
					</article>
					<article class="column-4">
						content
					</article>
				</section>

Assign a flex width to an element using Sass with: @include grid(n)

											
				.element { @include grid(6); }

flush

Flush grids are the default and columns should be encapsulated in a containing element with the .flex class.

example without gutter:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

with gutters

Gutters are set to a scale set at root: to maintain visual ratio. Add them by encapsulating columns using the .grid-gutters class.

example with gutter:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

will… it… blend scale?!

The grid's width can be altered through one variable—in a % of the container—and all columns will automatically scale to match the new grid. Simple.

flush grid

1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

6

6

7

5

8

4

8

3

1

9

3

10

2

11

1

12

spaced grid

1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

6

6

7

5

8

4

8

3

1

9

3

10

2

11

1

12

nested grid

These are 12 '1' columns nested inside the '8' column of an flush 8/3/1 flex nested inside the '8' column of a spaced 8/3/1 flex nested inside the 8 column of a flush 8/3/1 grid.

8

3

1

1

1

1

1

1

1

1

1

1

1

1

1

3

1

3

1

3

1

Headings + copy

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Author

Text Elements

abbr element and an abbr element with title

ACRONYM element

b element

cite element

code element

em element

~~del element~~

dfn element and dfn element with title

i element

ins element

kbd element

mark element

q element

q element inside a q element

~~s element~~

samp element

small element

span element

strong element

_{sub element}

^{sup element}

u element

var element

List Types

Ordered List

List Item 1
List Item 2
List Item 3

Unordered List

List Item 1
List Item 2
List Item 3

Definition List

Definition List Term 1: This is a definition list description.
Definition List Term 2: This is a definition list description.
Definition List Term 3: This is a definition list description.

Code

Code block wrapped in "pre" and "code" tags

											
			// Loop through Divs using Javascript.
			var divs = document.querySelectorAll('div'), i;
			for (i = 0; i < divs.length; ++i) {
				divs[i].style.color = "green";
			}

Monospace Text wrapped in "pre" tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Tables

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Media

The figure, image, and figcaption element

Placeholder Image and Some Alt Text — Lorem ipsum dolor sit amet, consectetur adipisicing elit.

The Audio Element:

The Video Element:

Form Elements

Text Field

Text Area

Select Element

Radio Buttons Radio 1 Radio 2 Radio 3

Checkboxes Checkbox 1 Checkbox 2 Checkbox 3

Password:

File Input

Email

URL

Telephone

Number

Search

Date

Time

Color

Datalist

Buttons