Containers

How to Change the Shape of a Container

Containers are rectangular by default. To make circular use the class "circular". To make rounded, use the class "rounded"

Example

Default

Rounded

Circular

HTML Example
    <div class="row">
       <div class="medium-light-color two-column"><p>Default</p></div>
       <div class="medium-light-color rounded two-column"><p>Rounded</p></div>
       <div class="medium-light-color circular two-column"><p>Circular</p></div>
    </div>
                           

How to Add Limit The Width of Content

100% width content looks great on smaller devices, but can become too wide on larger sizes. Use the class "wrapper" to contain the width of full-page content for easier reading.

HTML Example
    <main class="wrapper">...</main>
                           

How to Add a Spotlight & Background Image

Many website homepages begin with a large spotlight. To create a spotlight, use the class "spotlight". This will adjust the padding and width of that container.

HTML Example
    <header class="spotlight">...</header>
                           

To place a background image on a spotlight or any other element, add the following style to the element:

HTML Example
    style="background-image: url(images/your-image-here.png)"
                           

How to Push Content Right

If there are any elements that need to be pushed to the right, use the class "push-right"

HTML Exmaple
    <button class="push-right">...</button>
                           

How to Limit Content to Display on Mobile or Desktop

To style a mobile-only element, use the class "mobile-only". This will hide the element from desktop view.

HTML Example
    <nav class="mobile-only">...</nav>
                           

To style a desktop-only element, use the class "desktop-only". This will hide the element from mobile view.

HTML Example
    <nav class="desktop-only">...</nav>