Boilerplate

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus ut, quidem natus ad, similique illo facere incidunt porro odit eius facilis optio. Enim at earum eaque debitis iure quae quibusdam sequi, animi delectus dignissimos asperiores sit assumenda fuga autem accusamus quam repellat tenetur amet voluptatem ea reiciendis beatae consequuntur. Deleniti!

Site Folder Structure

sitename/
├── index.html
├── css/
│   ├── style.css
├── js/
│   ├── script.js
├── img/
│   ├── (images go here)                 
                    

---

CSS Variables

Colors

Blues

Secondary

:root {
        /* DEFINE BASE COLORS */
        --color-blue-100: #ccdffc;
        --color-blue-400: #3b82f6;
        --color-blue-900: #1e40af;

        /* DEFINE SEMANTIC COLORS */
        --color-primary: var(--color-blue-400);
        --color-primary-dark: var(--color-blue-900);

}
                    

---

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 italic text. This is bold text. This is an inline link. Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis omnis corporis dicta quae est quibusdam rem modi cumque corrupti possimus.

                    
<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>italic</em> text. This is <b>bold</b> text. This is an <a href="#">inline link</a>. Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis omnis corporis dicta quae est quibusdam rem modi cumque corrupti possimus.</p>    
                    
                    

---

Buttons

Default Button

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

---

Media

Images

---

Helper Classes

Easy Way to Center Text

I want this text to be centered.

<p class="text-centered">I want this text to be centered.</p>
                    

---

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="one-fourth">¼</div>
    <div class="three-fourths">¾</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">
    <div class="one-half"> ... </div>
    <div class="one-half"> ... </div>
</div>
                    

<div class="row swapped">
    <div class="one-half"> ... </div>
    <div class="one-half"> ... </div>
</div>
                    

<div class="row">
    <div class="one-half centered">
        <img src="img/placeholder_2000x1000.gif" alt="Placeholder Image" width="2000" height="1000">
    </div>
    <div class="one-half centered">
        <h1>Image on the Left, Text on the Right</h1>
        <p>This column is rending via the default normal flow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo corrupti magnam, aspernatur.</p>
    </div>
</div>