Boilerplate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar, lectus nec semper pretium, urna sem congue leo, ut facilisis turpis metus eget sapien. Vivamus iaculis enim suscipit, faucibus tellus a, eleifend sapien. Mauris pretium risus at tincidunt molestie. Aenean ac nunc orci. Donec non turpis nec leo aliquam volutpat. Suspendisse condimentum est a malesuada mollis. Nulla ut eleifend tortor. Aenean suscipit at lorem non faucibus. Pellentesque eu nisl ac tellus sodales vestibulum condimentum nec metus. In eu ante magna. Integer semper lorem eu metus laoreet, vel consectetur sapien sollicitudin. Fusce orci tellus, varius eu orci et, elementum tempus tortor. Cras posuere ultrices lacinia. Phasellus tellus enim, rutrum a varius vel, finibus ut risus. Nunc egestas metus vel tortor lacinia lacinia. Pellentesque dictum, nunc eget facilisis ultrices, ipsum turpis rutrum magna, at aliquet libero velit ullamcorper massa. Phasellus eget augue ipsum. Praesent vel nisl sit amet dui scelerisque mollis. Maecenas a purus facilisis, ullamcorper mauris non, pellentesque erat. Nullam eleifend urna turpis, ut iaculis diam interdum nec. Morbi vel turpis fermentum, ullamcorper est et, luctus ipsum. Donec in tincidunt augue, ac facilisis odio. Etiam quis nisl vitae enim vestibulum fermentum ac commodo metus. Nulla non mattis tellus. Quisque mollis hendrerit ornare. Vivamus mattis diam in lacus tincidunt, quis mollis nibh pretium.

Site Folder Structure

            sitename/
                ├── index.html
                ├── css/
                │   ├── style.css
                ├── js/
                │   ├── script.js
                ├── img/
                │   ├── PlaceholderImage.jpg   
        

CSS Variables

Colors

Blues

Greens

    :root {
        /* DEFINE BASE COLORS */
        --color-aqua: #00ffff;
        --color-blue: #0000ff;
        --color-dark-blue: #00004d;
        --color-green-800: #28a745;

        /* DEFINE TEXT COLORS */
        --color-body-background: var(--color-light-blue);
        --color-body-text: var(--color-dark-blue);
    }
        

Typography

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a paragraph. This is italics text, this is bold text, and this is an inline link . Lorem ipsum dolor sit amet consectetur adipisicing elit. Est repudiandae voluptatum sequi, cupiditate dolores incidunt distinctio. Aspernatur repudiandae fugit error non officiis sed corrupti ullam inventore, eaque laborum nostrum voluptas?

        <h1>This is a Heading 1</h1>
        <h2>This is a Heading 2</h2>
        <h3>This is a Heading 3</h3>
        <h4>This is a Heading 4</h4>

        <p>
            This is a paragraph. This is <em>italics text</em>, this is <strong>bold text</strong>, and this is an
            <a href="">
                inline link
            </a>.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est repudiandae voluptatum sequi, cupiditate dolores
            incidunt distinctio.
            Aspernatur repudiandae fugit error non officiis sed corrupti ullam inventore, eaque laborum nostrum voluptas?
        </p>
        

---

Buttons

Default Button

            <a href="#" class="button">Default Button</a>
        

---

Media

Images

Helper Classes

Easy Way to Center Text

I want this text centered.

Grid System (12 column)

        <div class="row demo"> 
            <div class="one-half">½</div>
            <div class="one-half">½</div>
        </div>
        <div class="row demo"> 
            <div class="one-third">⅓</div>
            <div class="one-third">⅓</div>
            <div class="one-third">⅓</div>
        </div>
        <div class="row demo"> 
            <div class="one-third">⅓</div>
            <div class="two-thirds">⅔</div>
        </div>
        <div class="row demo"> 
            <div class="one-fourth">¼</div>
            <div class="one-fourth">¼</div>
            <div class="one-fourth">¼</div>
            <div class="one-fourth">¼</div>
        </div>
        <div class="row demo"> 
            <div class="three-fourths">¾</div>
            <div class="one-fourth">¼</div>
        </div>
        <div class="row demo"> 
            <div class="one-half centered">½ .centered</div>
        </div>
        <div class="row demo"> 
            <div class="two-thirds centered">⅔ .centered</div>
        </div>
        <div class="row demo"> 
            <div class="col-1">.col-1</div>
        </div>
        <div class="row demo"> 
            <div class="col-2">.col-2</div>
        </div>
        <div class="row demo"> 
            <div class="col-3">.col-3</div>
        </div>
        <div class="row demo"> 
            <div class="col-4">.col-4</div>
        </div>
        <div class="row demo"> 
            <div class="col-5">.col-5</div>
        </div>
        <div class="row demo"> 
            <div class="col-6">.col-6</div>
        </div>
        <div class="row demo"> 
            <div class="col-7">.col-7</div>
        </div>
        <div class="row demo"> 
            <div class="col-8">.col-8</div>
        </div>
        <div class="row demo"> 
            <div class="col-9">.col-9</div>
        </div>
        <div class="row demo"> 
            <div class="col-10">.col-10</div>
        </div>
        <div class="row demo"> 
            <div class="col-11">.col-11</div>
        </div>
        <div class="row demo"> 
            <div class="col-12">.col-12</div>
        </div>
        <div class="row demo"> 
            <div class="col-11 push-1">.col-11 .push-1</div>
        </div>
        <div class="row demo"> 
            <div class="col-10 push-2">.col-10 .push-2</div>
        </div>
        <div class="row demo"> 
            <div class="col-9 push-3">.col-9 .push-3</div>
        </div>
        <div class="row demo"> 
            <div class="col-8 push-4">.col-8 .push-4</div>
        </div>
        <div class="row demo"> 
            <div class="col-7 push-5">.col-7 .push-5</div>
        </div>
        <div class="row demo"> 
            <div class="col-6 push-6">.col-6 .push-6</div>
        </div>
        <div class="row demo"> 
            <div class="col-5 push-7">.col-5 .push-7</div>
        </div>
        <div class="row demo"> 
            <div class="col-4 push-8">.col-4 .push-8</div>
        </div>
        <div class="row demo"> 
            <div class="col-3 push-9">.col-3 .push-9</div>
        </div>
        <div class="row demo"> 
            <div class="col-2 push-10">.col-2 .push-10</div>
        </div>
        <div class="row demo"> 
            <div class="col-1 push-11">.col-1 .push-11</div>
        </div>