Boilerplate

This is a paragraph width default body type. I usually place a paragraph of text in my boilerplates (both in code and in Figma) in order to make sure that the default text size is correct (16px = 1em). Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos error nobis molestias est impedit, eaque provident ex quas cum blanditiis ea ad sunt natus tempore esse nihil deleniti adipisci facere recusandae ut! Deserunt nostrum similique enim veritatis, possimus soluta odit doloremque facere esse eum, rem nisi natus iste earum cupiditate!

Simple Base Site Folder Structure

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

---

CSS Variables

Colors

Primary Blues (Brand color)

Secondary Color (Accent Colors)

:root {

    /* DEFINE BASE COLORS */
    --color-blue-100: #dbeafe;
    --color-blue-400: #3b82f6;
    --color-blue-600: #2563eb;
    --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 paragraph. This is italic text, this is bold text, and this is an inline link with some styling. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem deleniti ducimus eligendi corporis dolorem corrupti reiciendis quibusdam ipsam neque optio!

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

<p>This is a paragraph. This is <em>italic text</em>, this is <strong>bold text</strong>, and this is an <a href="#">inline link with some styling. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem deleniti ducimus eligendi corporis dolorem corrupti reiciendis quibusdam ipsam neque optio!</p>
                        

---

Buttons

Default button

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

---

Media

Responsive Images

---

Helper Classes

class="text-centered"

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">
    <div class="one-half">½</div>
    <div class="one-half">½</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"> ... </div>
</div>
                        

<div class="row">
    <div class="col-5 push-1"> ... </div>
    <div class="col-5"> ... </div>
</div>
                        

---

Type Block

JKC Custom Headline

JKC Custom Headline

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste necessitatibus id provident alias adipisci quae consequuntur veniam eum soluta consequatur!

<div class="jkc-eyebrow">JKC Eyebrow</div>
<h3 class="jkc-headline">JKC Custom Headline</h3>
<h4 class="jkc-subhead">JKC Custom Headline</h4>
          

---