Style Guide
Boilerplate
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nulla ipsum, mattis in purus vel, tincidunt porttitor massa. Nulla convallis dui eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis libero sed velit vulputate, sit amet pharetra elit tristique. Duis varius ornare ex non dignissim. Aenean congue, orci eu efficitur egestas, justo purus accumsan lacus, quis condimentum lectus metus ac orci. Morbi non neque laoreet, condimentum lectus a, euismod est. Maecenas nisi odio, viverra quis blandit quis, fermentum a nisl. Donec eu sodales enim. Fusce id interdum augue. Nam blandit eros pretium dapibus accumsan. Aenean sagittis est vitae lacus pellentesque faucibus. Ut diam urna, tempus in egestas in, eleifend vitae diam.
Simple Base Site Folder Structure
sitename/
├── index.html
├── css/
│ ├── style.css
├── js/
│ ├── script.js
├── img/
│ ├── (images go here)
CSS Variables
Colors
Darker
Light pink
--color-pink
Purple
--color-purple-400
Lighter
Lighter pink
--color-pink-400
Light Purple
--color-purple-100
:root {
--color-pink: hsl(322, 100%, 88%);
--color-pink-400: hsl(322, 100%, 90%);
--color-purple-400: hsl(262, 35%, 30%);
--color-purple-900: hsl(262, 35%, 30%);
--color-purple-100: hsl(262, 35%, 60%);
}
This pre has no code inside.
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, and this is an inline link with styling. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati pariatur quibusdam deleniti porro itaque iure veniam eveniet, nesciunt repellat facere?
<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 <strong>bold</strong> text, and this is an <a href="#">inline link with styling.</a> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati pariatur quibusdam deleniti porro itaque iure veniam eveniet, nesciunt repellat facere?</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-center">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-third">⅓</div>
<div class="one-third">⅓</div>
<div class="one-third">⅓</div>
</div>
<div class="row">
<div class="one-fourth">¼</div>
<div class="one-fourth">¼</div>
<div class="one-fourth">¼</div>
<div class="one-fourth">¼</div>
</div>
Image on the left, text on the right.
This column is rendering via the default normal flow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nisi perferendis voluptas harum minus exercitationem!
<div class="row">
<div class="one-half">
<img src="img/placeholder-2000x1000.gif" alt="placeholder" width="2000" height="1000">
</div>
<div class="one-half">
<h1>Image on the left, text on the right.</h1>
<p>This column is rendering via the default normal flow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nisi perferendis voluptas harum minus exercitationem!</p>
</div>
Text on the left, image on the right.
This column is rendering via the default normal flow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nisi perferendis voluptas harum minus exercitationem!
<div class="row swapped">
<div class="one-half">
<img src="img/placeholder-2000x1000.gif" alt="placeholder" width="2000" height="1000">
</div>
<div class="one-half">
<h1>Text on the left, image on the right.</h1>
<p>This column is rendering via the default normal flow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nisi perferendis voluptas harum minus exercitationem!</p>
</div>
A Centered Column
This column is rendering via the default normal flow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nisi perferendis voluptas harum minus exercitationem!
<div class="row">
<div class="one-half centered">
<img src="img/placeholder-2000x1000.gif" alt="placeholder" width="2000" height="1000">
<h1>A Centered Column</h1>
<p>This column is rendering via the default normal flow. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nisi perferendis voluptas harum minus exercitationem!</p>
</div>
Col-5 Column
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore soluta rerum laboriosam. Quidem, eum voluptates.
Col-5 Column
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore soluta rerum laboriosam. Quidem, eum voluptates.
<div class="row">
<div class="col-5 push-1">
<img src="img/placeholder-2000x1000.gif" alt="placeholder" width="2000" height="1000">
<h2>Col-5 Column</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore soluta rerum laboriosam. Quidem, eum voluptates.</p>
</div>
<div class="col-5">
<img src="img/placeholder-2000x1000.gif" alt="placeholder" width="2000" height="1000">
<h2>Col-5 Column</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore soluta rerum laboriosam. Quidem, eum voluptates.</p>
</div>
Type Block
SKG Headline
SKG Custome Sub Headline
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum quas autem ullam! Repellat earum laudantium minus at, ipsa dolorum? Rerum?
<div class="skg-eyebrow">SKG Eyebrow</div>
<h3 class="skg-headline">SKG Headline</h3>
<h4 class="skg-subheadline">SKG Custome Sub Headline</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum quas autem ullam! Repellat earum laudantium minus at, ipsa dolorum? Rerum?</p>