Logo
Sphereka

Do you have a project in your
mind?

Contact Us

  • +962 79 15 777 50
  • info@sphereka.com
  • Tlaa Al Ali,
    Amman, Jordan

SP-CSS
Library

Build fast, responsive websites with SP's powerful grid and pre-designed components.
Download Now 9
Utilities | Layout | Components

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, are available.

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>