Elements</h1>

List of elements and their styles

</div> </section>

Layout and Columns

One Column

this is a single column. This is the default, and is just the result of using the container class. No row class needed.

Half Column

This is a half column, which requires a div with a row-container class and then 2 divs with the column-50 class.

Half Column

This will create 2 columns on large and medium screens and then collapse to one column on smaller screens (less than 768px).

Three Columns

This is a 33% column, which requires a div with a row-container class and then 3 divs with the column-33 class.

Three Columns

This will display as 3 columns on large and medium displays, then turns to 2 columns on smaller displays (768px to 992px).

Three Columns

On mobile/small displays this will display as one column (less than 768px).

One Third

This is a 33% column - column-33 class.

Two thirds

This is a 66% column, which uses the column-66 class..

This is IMPORTANT!

Hopefully this is all displaying properly and looks good, BUT, you should know that this was created by one guy whose day job is NOT web design. I use this base CSS on my company's website, which is very important to me, use it at your own risk.

Pro Lab Prints

Looking for an AWESOME Pro Lab to print your photos? Check out the inspiration for this theme - ProLabPrints.com.

H1 Headline

<h1 class="headline">H1 Headline</h1>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

H1 tag

H2 tag

H3 tag

H4 tag

H5 tag

H6 tag

Body

Lorem ipsum dolor sit amet link sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lead Body

<p class="lead">....</p>

Well

<p class well>...</p> or <div class="well">..</div>

The 'Well' background color and border color use the alt background and border colors found in the variables.scss file (inside the _sass folder).

Buttons

Buttons are more or less straight from Bootstrap. Use the button classes on an <a>, <button>, or <input> element.
The Primary button style color is set in the variables.scss file, and this is also the color of the buttons used in the main nav on small screens.

<a href="#buttons" class="btn btn-primary">Primary</a>

Primary Secondary Success Warning

Smaller buttons, add the btn-sm class.
<a href="#buttons" class="btn-sm btn btn-primary">Primary</a>

Primary Secondary Success Warning

Larger buttons, add the btn-lg class.
<a href="#buttons" class="btn-lg btn btn-primary">Primary</a>

Primary Secondary Success Warning

Inline Text Elements

To highlight small bits of code wrap it with three backticks ``` ... code ... ``` or wrap in <code> ...</code>
You can use the <mark> tag to highlight text
For indicating blocks of text that have been ~~deleted~~ use the <del> tag
To underline text use the <u> tag.
For de-emphasizing inline or blocks of text, use the <small> tag to set text at 80% the size of the parent.
For emphasizing a snippet of text with a heavier font-weight use <strong> tag
For emphasizing a snippet of text with italics use <em> tag

Highlighting Code Blocks

To highlight small bits of code wrap it with three backticks ``` ... code ... ``` or wrap in <code> ...</code>

For mulitline blocks of code, wrap them in {% highlight html %} .. lots of code… {% endhighlight %}

You can replace 'html' with another language to get the proper formatting for that language, you can also add 'linenos' to add line numbers to it.

{% highlight ruby linenos %} … {% endhighlight %}

Please note that highlighting code seems to work best in markdown - not inside html. If you are trying to add code formatting (or for that matter markdown) inside of an html element like a div it might not work by default as Kramdown sees the opening div and skips processing the contents. You can try adding markdown="1" inside of a div like <div markdown="1" class="container"> and it may work.

Blockquote

Wrap <blockquote> around any HTML as the quote.

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

Someone famous in Source Title

<blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit .... </p>
   <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>

You can also add .blockquote-danger or .blockquote-info classes to change the color like so:

This is a blockquote with class="blockquote-info" added to it.

This is a blockquote with class="blockquote-danger" added to it.

Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>....</li>
  <li>....</li>
 </ul>

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>....</li>
 </ol>

Unstyled

Remove the default list-style and left margin on list items (immediate children only).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">....</ul>

This is a Section with a Full Width Background Color.

A section with a class of alt-section will have a background and border color derived from variables in the variables.scss file.

These are the variables:

$alt-background-color:#F9F8F6;
$alt-background-border:1px solid #EFE8DD;

Create a section by using the code below - sections are the outer most element - do not add them inside of a container div.

 <section class="section-alt">
   <div class="container">
    <h2>This is a Great Section</h2>
    <p>I really like it.</p>
   </div>
  </section>

The section-alt is used in this site for the breadcrumbs (probably need a better name for that since I don't actually show the url breadcrumb there), like the one at top of this page with the title and the description. It is also used on the home page for the top part.

When using the section be careful with the layout file you use. The default layout for this site has the main section coded into the layout with the content put inbetween. This way the content doesn't need the opening or closing section and container divs. If you want to alternate between section and section-alt use the raw layout as it doesn't inculde a section element.

Hidden on Desktop

There is only one special container - used for hiding content on medium and larger screens. If you are on a desktop computer you won't see anything unless you resize your screen smaller.

This is a hidden div with a blockquote (danger) on screens wider that 768px.

<div class="hidden-desktop">
<blockquote class="blockquote-danger">
	This is a hidden div with a blockquote (danger) on screens wider that 768px.
</blockquote>
</div>

Helpers

There are a variety of helper classes to make things more flexible - like pad-top to add a bit of padding to the top. These are found in the helpers.scss file inside the _sass folder.

.text-center {
    text-align: center;
}
.pad-top{
    padding-top:2rem;
}
.pad-bottom{
	padding-bottom: 25px;
}
.pull-right {
    float: right!important;
}
.hr-half{
    margin-right:33%;
 } 
.no-border{
    border-bottom:none;
}
.bold {
    font-weight:bold;
}
.max800{
	max-width:800px;
	margin: 0 auto;
}
.img-shadow{
	box-shadow: 0 0 6px rgba(121, 121, 121, 0.43);
}
.small {
    font-size: 85%;
}
.margin-bottom{
    margin-bottom:10px;
}