Life List

Basic Styles

The basic building blocks of any website.

Building Your Content

Use these different modular Elements to contain the content on your page.

Fonts

Primary Font

Aa Benton Sans

Benton Sans is your primary font. Paragraphs and all basic text are in this font. If you need to assign this font, use the class .font-primary.

Secondary Font

Aa Droid Serif

Droid Serif is your secondary font. Heading 5 and other accent texts use this font. If you need to assign this font, use the class .font-secondary.

Tertiary Font

Aa Oxygen

Oxygen is your tertiary font. Heading 6 and other accent texts use this font. If you need to assign this font, use the class .font-tertiary.

Headers

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.
		
			<h1>h1. This is a very large header.</h1>
			<h2>h2. This is a large header.</h2>
			<h3>h3. This is a medium header.</h3>
			<h4>h4. This is a moderate header.</h4>
			<h5>h5. This is a small header.</h5>
			<h6>h6. This is a tiny header.</h6>
		
	

Typescale

You may adjust font-size by overriding an element's default size with css classes. This can be useful to size a <p> or <h1> through <h6> using the existing header sizes.

It's important not to skip heading levels when structuring your document. It confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

		
			<p class="like-h1">Lorem Ipsum Dolor</p>
			<p class="like-h2">Lorem Ipsum Dolor</p>
			<p class="like-h3">Lorem Ipsum Dolor</p>
			<p class="like-h4">Lorem Ipsum Dolor</p>
			<p class="like-h5">Lorem Ipsum Dolor</p>
			<p class="like-h6">Lorem Ipsum Dolor</p>
		
	

Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. You have several options for highlighting text. The <strong> tag makes text bolder. The <em> tag makes text italicized. The <small> tag reduces your font size.You also have available the .underline class to underline your text as well as the .uppercase class to make your text uppercase.

		
			<p>paragraph text</p>
			<strong>makes text bolder</strong>
			<em>makes text italicized</em>
			<small>makes text smaller</small>
			<span class="underline">underline your text</span>
			<span class="uppercase">make your text uppercase.</span>
		
	

Links

Basic Links are styled in your secondary color. This is an example of a link. If you'd like your link to have an arrow after it, add the class .link-more to it, like this: Learn More

If you have a need to remove the styling from your link, add the class .no-style to it, like this: Learn More

		
			<a href="">This is an example of a link</a>
			<a href="" class="link-more">Learn More</a>
			<a href="" class="no-style">Learn More</a>
		
	

Dividers

Use dividers to define breaks between paragraphs or sections.


		
			<hr />
		
	

Lists - Unordered

Use an unordered list to list things if the order of the items doesn't matter.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		
			<ul>
			   <li>List item number 1</li>
			   <li>List item number 2</li>
			   <li>List item number 3</li>
			</ul>
		
	

Lists - Ordered

Use an ordered list when creating a list where the order of the items is important, like ranking something from best to worst.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		
			<ol>
			   <li>List item number 1</li>
			   <li>List item number 2</li>
			   <li>List item number 3</li>
			</ol>
		
	

Lists - Description

Use a Description List to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions (<dd>)

HTML
Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on web pages.
CSS
Cascading Style Sheets are used to format the layout of Web pages.
JavaScript
An object-oriented computer programming language commonly used to create interactive effects within web browsers.
		
			<dl>
			   <dt>Title One</dt>
			   <dd>Description One</dd>
			   <dt>Title Two</dt>
			   <dd>Description Two</dd>
			   <dt>Title Three</dt>
			   <dd>Description Three</dd>
			</dl>
		
	

Blockquote

You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'

Eleanor Roosevelt
		
			<blockquote>
			   <p>"You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'"</p>
			   <cite>Eleanor Roosevelt</cite>
			</blockquote>
		
	

Text Alignment

Left Aligned Text

This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

				
					<p class="text-left">This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				
			

Right Aligned Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.

				
					<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>
				
			

Center Aligned Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.

				
					<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>
				
			

Justify Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.

				
					<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>
				
			
Primary Color

#2d2a29
RGB(45,42,41)

.color-primary
.background-primary

Secondary Color

#ff0007
RGB(255,0,7)

.color-secondary
.background-secondary

Tertiary Color

#808183
RGB(128,129,131)

.color-tertiary
.background-tertiary

Support Color

#f8f7f3
RGB(248,247,205)

.color-support
.background-support

Support2 Color

#cdcdcd
RGB(205,205,205)

.color-support2
.background-support2

White

#ffffff
RGB(255,255,255)

.color-white
.background-white

Black

#000000
RGB(0,0,0)

.color-black
.background-black

Using the color classes to switch out font colors is simple. Just assign that color class to your tag.

Heading 5 in Primary Color

This paragraph has a font color change in the very middle.

			
				<h5 class="color-primary">Heading 5 in Primary Color</h5>
				<p>This paragraph has a <span class="color-secondary">font color change</span> in the very middle.</p>
			
		

A basic button can be created using the .btn class. If you'd like your button to stand out a little more, add the class.btn-large.

Standard Button

Learn More

							
					<a class="btn">Learn More</a>
				
			

Large Button

Learn More

				
					<a class="btn btn-large">Learn More</a>
				
			

There are several classes available to both size and position your images. If you would like your image to have style, add the class .img-styled to your image tag.

Available Width Classes

.width20 | .width25 | .width33 | .width40 | .width50 | .width66 | .width75 | .width100

Available Positioning Classes

.float-left | .float-right | .position-center

Image Floated Left 20% Width with No Style

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

				
					<p><img src="images/img-funny.jpg" class="float-left width25">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
				
			
Styled Image Floated Right 50% Width

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

				
					<p><img src="images/img-funny.jpg" class="img-styled float-right width50">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
				
			
Styled Image Centered 75% Width

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

				
					<p><img src="images/img-funny.jpg" class="img-styled position-center width75">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
				
			

To make an embedded video responsive, add the class .flex-container to the containing tag. To give your responsive video some styling, add the class .flex-container-styled to the containing tag.

		
			<p class="flex-container flex-container-styled">
			   <iframe src="//www.youtube.com/embed/rd3A-y5sO5o" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
			</p>
		
	

Use tables for tabular data. To make your table responsive and styled, add the class .table-styled to your table tag.

Your Table Title
Header 1 Header 2 Header 3 Header 4 Header 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
			
				<table class="table-styled">
				  <caption>Your Table Title</caption>			
				  <thead>
				    <tr>
				      <th>Header 1</th>
				      <th>Header 2</th>
				      <th>Header 3</th>
				      <th>Header 4</th>
				      <th>Header 5</th>
				    </tr>
				  </thead>
				  <tbody>
				    <tr>
				      <td>Item 1</td>
				      <td>Item 2</td>
				      <td>Item 3</td>
				      <td>Item 4</td>
				      <td>Item 5</td>
				    </tr>
				    <tr>
				      <td>Item 1</td>
				      <td>Item 2</td>
				      <td>Item 3</td>
				      <td>Item 4</td>
				      <td>Item 5</td>
				    </tr>
				    <tr>
				      <td>Item 1</td>
				      <td>Item 2</td>
				      <td>Item 3</td>
				      <td>Item 4</td>
				      <td>Item 5</td>
				    </tr>
				    <tr>
				      <td>Item 1</td>
				      <td>Item 2</td>
				      <td>Item 3</td>
				      <td>Item 4</td>
				      <td>Item 5</td>
				    </tr>
				    <tr>
				      <td>Item 1</td>
				      <td>Item 2</td>
				      <td>Item 3</td>
				      <td>Item 4</td>
				      <td>Item 5</td>
				    </tr>
				  </tbody>
				</table>