Getting Started
Include JS via CDN
Copy
<script src="https://cdn.jsdelivr.net/gh/Sphereka/SP-CSS@main/sp.js"></script>
Include CSS via CDN
Copy
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Sphereka/SP-CSS@main/sp_css.css">
Heading
All HTML headings, h1 through h6.
h1. SP Heading
h2. SP Heading
h3. SP Heading
h4. SP Heading
h5. SP Heading
h6. SP Heading
Copy Example
<h1>h1. SP Heading</h1>
<h2>h2. SP Heading</h2>
<h3>h3. SP Heading</h3>
<h4>h4. SP Heading</h4>
<h5>h5. SP Heading</h5>
<h6>h6. SP Heading</h6>
Text Sizing
Quickly change the font-size of your text!
sp-fs-xl
sp-fs-lg
sp-fs-1
sp-fs-2
sp-fs-3
sp-fs-4
sp-fs-5
sp-fs-6
sp-fs-7
sp-fs-8
sp-fs-9
Copy Example
<p class="sp-fs-xl">sp-fs-xl</p>
<p class="sp-fs-lg">sp-fs-lg</p>
<p class="sp-fs-1">sp-fs-1</p>
<p class="sp-fs-2">sp-fs-2</p>
<p class="sp-fs-3">sp-fs-3</p>
<p class="sp-fs-4">sp-fs-4</p>
<p class="sp-fs-5">sp-fs-5</p>
<p class="sp-fs-6">sp-fs-6</p>
<p class="sp-fs-7">sp-fs-7</p>
<p class="sp-fs-8">sp-fs-8</p>
<p class="sp-fs-9">sp-fs-9</p>
Text Colors
Colorize your text with color utilities!
sp-text-white
sp-text-light
sp-text-warning
sp-text-info
sp-text-success
sp-text-secondary
sp-text-primary
sp-text-gray
sp-text-dark
sp-text-black
sp-text-danger
Copy Example
<p class="sp-text-primary">sp-text-primary</p>
<p class="sp-text-secondary">sp-text-secondary</p>
<p class="sp-text-success">sp-text-success</p>
<p class="sp-text-info">sp-text-info</p>
<p class="sp-text-danger">sp-text-danger</p>
<p class="sp-text-warning">sp-text-warning</p>
<p class="sp-text-light">sp-text-light</p>
<p class="sp-text-dark">sp-text-dark</p>
<p class="sp-text-gray">sp-text-gray</p>
<p class="sp-text-black">sp-text-black</p>
<p class="sp-text-white">sp-text-white</p>
Text Weight
Quickly change the font-weight of yout text!
sp-fw-light
sp-fw-normal
sp-fw-bold
sp-fw-bolder
Copy Example
<p class="sp-fw-light">sp-fw-light</p>
<p class="sp-fw-normal">sp-fw-normal</p>
<p class="sp-fw-bold">sp-fw-bold</p>
<p class="sp-fw-bolder">sp-fw-bolder</p>
Background Color
Set the background of any element using contextual classes!
sp-bg-primary
sp-bg-secondary
sp-bg-dark
sp-bg-black
sp-bg-white
Copy Example
<p class="sp-bg-primary sp-text-white">sp-bg-primary</p>
<p class="sp-bg-secondary sp-text-white">sp-bg-secondary</p>
<p class="sp-bg-dark sp-text-white">sp-bg-dark</p>
<p class="sp-bg-black sp-text-white">sp-bg-black</p>
<p class="sp-bg-white sp-text-dark">sp-bg-white</p>
Border Color
Change the border color using utilities built on our theme colors!
sp-border-primary
sp-border-secondary
sp-border-success
sp-border-danger
sp-border-warning
Copy Example
<div class="sp-border sp-border-primary">sp-border-primary</div>
<div class="sp-border sp-border-secondary">sp-border-secondary</div>
<div class="sp-border sp-border-success">sp-border-success</div>
<div class="sp-border sp-border-danger">sp-border-danger</div>
<div class="sp-border sp-border-warning">sp-border-warning</div>
Border Style
Change the border style using contextual classes!
sp-border-dotted
sp-border-dashed
sp-border-solid
Copy Example
<div class="sp-border sp-border-dotted">sp-border-dotted</div>
<div class="sp-border sp-border-dashed">sp-border-dashed</div>
<div class="sp-border sp-border-solid">sp-border-solid</div>
Border Subtractive
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time!
sp-border-top-0
sp-border-bottom-0
sp-border-right-0
sp-border-left-0
Copy Example
<div class="sp-border sp-border-top-0">sp-border-top-0</div>
<div class="sp-border sp-border-bottom-0">sp-border-bottom-0</div>
<div class="sp-border sp-border-right-0">sp-border-right-0</div>
<div class="sp-border sp-border-left-0">sp-border-left-0</div>
Border Radius
Add classes to elements to easily round their corners!
sp-radius-0
sp-radius-1
sp-radius-2
sp-radius-3
sp-radius-4
sp-radius-5
sp-radius-6
sp-radius-7
sp-radius-8
Copy Example
<div class="sp-border sp-radius-0">sp-radius-0</div>
<div class="sp-border sp-radius-1">sp-radius-1</div>
<div class="sp-border sp-radius-2">sp-radius-2</div>
<div class="sp-border sp-radius-3">sp-radius-3</div>
<div class="sp-border sp-radius-4">sp-radius-4</div>
<div class="sp-border sp-radius-5">sp-radius-5</div>
<div class="sp-border sp-radius-6">sp-radius-6</div>
<div class="sp-border sp-radius-7">sp-radius-7</div>
<div class="sp-border sp-radius-8">sp-radius-8</div>