SpryCSS

SpryCSS aims to be a simple and customizable CSS Toolkit while being as lightweight as possible (Only 11kb gzipped).

The goal is to remove the messy and tedious task of coming up with class names for elements that just need simple layout styles and provide basic components to help you get up and running fast, but not try to do everything which can bloat your project. If an element needs more then just the basic utility styles then that element most likely should have a custom class name and custom styles in your CSS files.

SpryCSS does not use !important. So if a SpryCSS class is not working then chances are you have already set that style in a css file and therefore you should update the style there instead of overriding it in the html.

Getting Started and Installation

Using the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ggedde/spry-css/dist/spry.min.css">

Using NPM and SCSS:

npm install @ggedde/spry-css

Then in your scss file import SpryCSS:

@import 'node_modules/@ggedde/spry-css/spry.scss';

Note: you may need to change the path to match your project's node_modules folder

Overriding SCSS Variables:

To override the Spry Variables just declare the variables before you import the file.

@import 'your_variables.scss';
@import 'node_modules/@ggedde/spry-css/spry.scss';

SCSS Variables

Example Variables File:

// Specify each breakpoint size
$breakpoints: (
    md: 40rem,
    lg: 80rem,
);

// Specify each breakpoint gap size. <section> tags with get padding based on gap size.
$gaps: (
    default: 1.5rem,
    md: 2rem,
    lg: 2.25rem,
);

// Specify each color used in color-, bg-, border-, btn-
$colors: (
    "white":       #ffffff,
    "light":       #efefef,
    "grey":        #aaaaaa,
    "dark":        #333333,
    "primary":     #0D7FBF,
    "text":        #606c76,
    "transparent": transparent,
);

// Specify each type tag and class like <h3> and .h3 etc.
$types: (
    h1: ( font-size: 3.4rem, font-weight: 400, color: map-get($colors, 'text'), line-height: 1.20 ),
    h2: ( font-size: 2.8rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.25 ),
    h3: ( font-size: 2.2rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.30 ),
    h4: ( font-size: 1.5rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.35 ),
    h5: ( font-size: 1.2rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.5 ),
    h6: ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
    p:  ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
);

// Specify each spacing that applies to Margin and Padding.  Ex .m-0, .m-1, .mx-3, .pt-3, .mt-n3, etc
$spacing: (
    0: 0,
    1: .5rem, 
    2: 1rem, 
    3: 2rem, 
    4: 4rem
);

Accessing Variables in SCSS

You can access variables using map-get()

Examples:

p {
    color: map-get($colors, 'primary');
    margin-bottom: 1rem;
    @media screen and (min-width: map-get($breakpoints, 'md')) {
        margin-bottom: .5rem;
    }
}

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Anchor Emphasis Small Strong Underline

Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Paragraph Large - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Paragraph Small - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Blockquote - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- Blockquote, Cite

SCSS Variable

$types: (
    h1:     ( font-size: 3.4rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.20 ),
    h2:     ( font-size: 2.8rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.25 ),
    h3:     ( font-size: 2.2rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.30 ),
    h4:     ( font-size: 1.5rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.35 ),
    h5:     ( font-size: 1.2rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.5 ),
    h6:     ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
    p:      ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
);

You can add as many types as you want. Each type will be assigned to the tag along with a custom class so if needed you can apply .h2 to an H4, etc

Colors

Text Colors

.color-{color}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Background Colors

.bg-{color} .color-light

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Border Colors

.border .border-{color}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Button Colors

.btn .btn-{color}

Accent Colors

You can wrap elements with an accent color to change and override all the accent colors within that container.

.accent-{color}

Inputs

SCSS Variable

$colors: (
    "white":       #fff,
    "light":       #eee,
    "grey":        #aaa,
    "dark":        #333,
    "primary":     #4488ff,
    "error":       #d52929,
    "success":     #04ad3c,
    "text":        #606c76,
    "transparent": transparent,
)

You can add as many colors as you want, but each color will be added to all 4 types above. If you only need it for a small thing then it would be better to create a custom variable for it.

Icons

SpryCSS doesn't come with its own icon package. You can use whatever ican package or icon webfont you want, but icon webfonts can greatly increase the size of your projects. A recommended alternative is to use direct svg code within your project. This produces the smallest file size while producing high resolution icons and allowing you the most flexibility to style the icons within your css.

A great option for this is Material Design Icons. You can search for icons and view the SVG code by clicking on the Code dropdown and click on 'View SVG'. Then copy and paste the code in your html.

If your using Visual Studio Code you can install the extension vscode-materialdesignicons-svg that provides code snippets to quickly add the SVG code.

* Note that the extension currently does not add fill="currentColor" to the paths so you will need to add that manually.

Ex.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 4a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0 014-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" />
</svg>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
</svg>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" />
</svg>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>

Buttons

<button class="btn">Label</button>
<a href="#" class="btn">Link Button</a>

Outline

Large

Small

With Icons

With Loader

Grid

You can either use a 12 column css grid or flexbox grid system

Container Classes

grid Grid of columns, Uses variable $gaps for spacing

row Flex row of columns, Uses variable $gaps for spacing

columns Number of columns within grid or row

g Gap for columns within grid or row. Default is variable $gaps

Column Classes

col Number of columns to span within grid or row

Breakpoint Classes

grid-{size}00 Min width in px of child elements within container

{breakpoint}-columns-{size} Number of columns per container

{breakpoint}-col-{size} Column span within container

{breakpoint}-g-{spacing} Gap size for container

{size} is 1-12 {spacing} is defined by the $spacing variable. See Spacing for more details * gap for flexbox is not supported on older browsers. Also, custom gaps will not always work correctly with row when setting specific column sizes. It works best if you specify all breakpoint column sizes or use it with grid instead

CSS Grid

Auto Fit minimum 200px

col

<div class="grid-200">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Specify number of columns

col

<div class="grid md-columns-2 lg-columns-3">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS Flexbox

Equal Columns Single Row above mobile

fixed

<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Specify number of columns centered

(For gapping to work correctly you will need to specify all breakpoints)

col

<div class="row md-columns-2 lg-columns-3 jc-center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Set Sidebar width with Auto Content Column

md-w-300

auto

<div class="row">
    <div class="w-300"></div>
    <div></div>
</div>

Custom Ordering with Space between See Layout Classes for more details

col C

col B

col A

<div class="row jc-between">
    <div class="md-col-2 md-order-1"></div>
    <div class="md-col-2"></div>
    <div class="md-col-2 md-order-first"></div>
</div>

Columns multi row with column spanning

.col-6

.col-3

.col-6

.col-3

<div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-3"></div>
    <div class="col-6"></div>
    <div class="col-3"></div>
</div>

Responsive with different gap sizing and nested row with an auto fill column

.col-6

.col-6 .md-col-3 .lg-col-3

auto

auto fill with larger content

auto

.md-col-3

<div class="row g-2">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6 md-col-3 lg-col-3"></div>
    <div class="col-6 row md-columns-auto">
        <div></div>
        <div class="col-auto"></div>
        <div></div>
    </div>
    <div class="md-col-3 lg-col-3"></div>
</div>

Row spanning with nested rows and auto height

.md-col-4

Lorem ipsum dolor sit amet, consetetur sadipscing elitrsed diam nonumy.

fixed

Lorem ipsum dolor sit amet, consetetur sadipscing ut labore et dolore magna aliquyam erat.

<div class="row">
    <div class="md-col-4">
        .md-col-4
    </div>
    <div class="row md-col-8">
        <div>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitrsed diam nonumy.
        </div>
        <div>
            auto
        </div>
        <div>
            auto
        </div>
        <div class="row col-12">
            <div>
                auto
            </div>
            <div>
                Lorem ipsum dolor sit amet, consetetur sadipscing ut labore et dolore magna aliquyam erat.
            </div>
        </div>
    </div>
</div>

Forms

Simple form with some Required Fields

Text Field *

Email *

Select *

Vertical Checkboxes

Red Green None

Horizontal Radios *

Why When Where

Message

<form>
    <div class="row py-3 g-3">
        <div>
            <label class="h5">Text Field >
                <input type="text" required />
            </label>
        </div>
        <div>
            <label class="h5">Email >
                <input type="email" required />
            </label>
        </div>
        <div>
            <label class="h5">Select >
                <select required>
                    <option value="" disabled>Select</option>
                    <option>One</option>
                    <option>Two</option>
                </select>
            </label>
        </div>
    </div>
    <div class="row">
        <div>
            <h5>Vertical Checkboxes</h5>
            <label class="block my-1"><input type="checkbox">Red</label>
            <label class="block my-1"><input type="checkbox">Green</label>
            <label class="block my-1"><input type="checkbox">None</label>
        </div>
        <div>
            <h5 class="mb-1">Horizontal Radios *</h5>
            <label class="mr-1"><input type="radio" name="rad" required>Why</label>
            <label class="mr-1"><input type="radio" name="rad" required>When</label>
            <label class="mr-1"><input type="radio" name="rad" required>Where</label>
        </div>
    </div>
    <div>
        <div class="mt-3">
            <label class="h5">Messag>
                <textarea></textarea>
            </label>
        </div>
        <div class="mt-3">
            <button class="btn mx-auto" type="submit">Submit</button>
        </div>
    </div>
</form>

<form class="row jc-center" onsubmit="event.preventDefault(); this.querySelector('[type=submit]').classList.add('loading'); this.querySelectorAll('fieldset,button').forEach(elem => {elem.setAttribute('disabled', 'disabled');});setTimeout(() => {this.submit()}, 2000)">
    <h4 class="col-12 mt-4">Responsive labels with loading button and disabled fields on submit</h4>
    <fieldset>
        <legend><label>Name *</label></legend>
        <input type="text" required onblur="if (this.value) this.parentElement.classList.add('active')" />
    </fieldset>
    <fieldset>
        <legend><label>Email</label></legend>
        <input type="email" onblur="if (this.value) this.parentElement.classList.add('active')" />
    </fieldset>
    <fieldset>
        <legend><label>Select</label></legend>
        <select onchange="if (this.value) this.parentElement.classList.add('active')">
            <option value="" selected disabled></option>
            <option>Two</option>
            <option>Three</option>
        </select>
    </fieldset>
    <fieldset class="col-12 pt-2">
        <legend><label>Message</label></legend>
        <textarea onblur="if (this.value) this.parentElement.classList.add('active')"></textarea>
    </fieldset>
    <button  class="col-6 btn has-loader" type="submit">Submit with Loading Icon</button>
</form>

Dense Fields using `form.small`

Tables

Name	Size	Color
Tier 1	200	Red
Tier 2	400	Blue
Tier 3	500	Gold

Modals

<button class="btn" onclick="document.getElementById('login-modal').classList.add('show'); document.getElementById('login-email').focus();">Open Login Modal</button>

<div id="login-modal" class="modal" onclick="if(event.target.id === 'login-modal') document.getElementById('login-modal').classList.remove('show');">
    <div class="modal-container rounded" style="max-width: 400px;">
        <div class="modal-heading">
            <h3>Login</h3>
            <button type="button" class="modal-close" onclick="document.getElementById('login-modal').classList.remove('show');" ></button>
        </div>
        <div class="modal-body">
            <form>
                <fieldset>
                    <legend><label>Email</label></legend>
                    <input id="login-email" type="email" required onblur="if (this.value) this.parentElement.classList.add('active')" />
                </fieldset>
                
                <fieldset class="my-3">
                    <legend><label>Password</label></legend>
                    <input type="password" required onblur="if (this.value) this.parentElement.classList.add('active')" />
                </fieldset>
                
                <a href="#" class="mt-3">Forgot Password?</a>
                <button class="btn block mt-3" type="submit">Login</button>
            </form>
        </div>
    </div>
</div>

Large Model with Long content and forced buttons

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<button class="btn" onclick="document.getElementById('large-modal').classList.add('show');">Open Large Modal</button>

<div id="large-modal" class="modal" onclick="if(event.target.id === 'large-modal') this.classList.add('bounce');">
    <div class="modal-container rounded">
        <div class="modal-heading bg-light">
            <h4>This is the Modal Heading</h4>
        </div>
        <div class="modal-body">
            <div class="modal-content">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="modal-footer bg-light right">
            <button type="button" class="btn small btn-outline btn-dark" onclick="document.getElementById('large-modal').classList.remove('show','bounce');" >Cancel</button>
            <button type="button" class="btn small ml-3" onclick="document.getElementById('large-modal').classList.remove('show','bounce');" >Accept</button>
        </div>
    </div>
</div>

Utilities

General Utility Classes

bold { font-weight: bold }

normal { font-weight: normal }

italic { font-style: italic }

uppercase { text-transform: uppercase }

lowercase { text-transform: lowercase }

capitalize { text-transform: capitalize }

pointer { cursor: pointer }

rounded { border-radius: 3px }

circle { border-radius: 50% }

relative { position: relative }

absolute { position: absolute }

sticky { position: sticky; top: 0 }

fixed { position: fixed }

float-left { float: left }

float-right { float: right }

clear { clear: both }

inset { inset: 0 }

index-1 { z-index: 1 }

index-2 { z-index: 2 }

index-3 { z-index: 3 }

fade { opacity: .7 }

border { border: 1px solid map-get($colors, 'grey') }

shadow { box-shadow: 0px 2px 4px rgba(0,0,0,0.1) }

truncate

{
                        max-width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

Max Width Classes

This requires a breakpoint. ex {breakpoint}-mw

Spacing

The classes are named using the format

{breakpoint}-{property}{sides}-{spacing}

There are 3 Spacing properties:

p = padding

m = margin

There are 6 sides:

t = top

r = right

b = bottom

l = left

y = top and bottom

x = left and right

The sizes are used from the scss variable.

// SCSS Variable
$spacing: (
    0: 0,
    1: .5rem,
    2: 1rem,
    3: 2rem,
    4: 4rem
);

Negative Margin

For a negative margin you can include a negative value by placing a n in front of the value. ex mx-n2

Layout Utility Classes

* All Layout Utility Classes can be used with breakpoints ex {breakpoint}-{layoutclass}

Example Hide on All

none

Example Hide on Mobile

none md-block

Example Hide on Tablets

md-none lg-block

Sizing

{breakpoint}-h { height: 100% }

{breakpoint}-vh { height: 100vh }

{breakpoint}-w { width: 100% }

{breakpoint}-vw { width: 100vw }

{breakpoint}-w-100 { width: 100px; min-width: 100px }

{breakpoint}-w-200 { width: 200px; min-width: 200px }

{breakpoint}-w-300 { width: 300px; min-width: 300px }

{breakpoint}-w-400 { width: 400px; min-width: 400px }

{breakpoint}-w-500 { width: 500px; min-width: 500px }

{breakpoint}-w-600 { width: 600px; min-width: 600px }

{breakpoint}-w-700 { width: 700px; min-width: 700px }

{breakpoint}-w-800 { width: 800px; min-width: 800px }

{breakpoint}-w-900 { width: 900px; min-width: 900px }

{breakpoint}-w-1000 { width: 1000px; min-width: 1000px }

{breakpoint}-w-1100 { width: 1100px; min-width: 1100px }

{breakpoint}-w-1200 { width: 1200px; min-width: 1200px }

{breakpoint}-h-100 { height: 100px; min-height: 100px }

{breakpoint}-h-200 { height: 200px; min-height: 200px }

{breakpoint}-h-300 { height: 300px; min-height: 300px }

{breakpoint}-h-400 { height: 400px; min-height: 400px }

{breakpoint}-h-500 { height: 500px; min-height: 500px }

{breakpoint}-h-600 { height: 600px; min-height: 600px }

{breakpoint}-h-700 { height: 700px; min-height: 700px }

{breakpoint}-h-800 { height: 800px; min-height: 800px }

{breakpoint}-h-900 { height: 900px; min-height: 900px }

{breakpoint}-h-1000 { height: 1000px; min-height: 1000px }

{breakpoint}-h-1100 { height: 1100px; min-height: 1100px }

{breakpoint}-h-1200 { height: 1200px; min-height: 1200px }

Text

{breakpoint}-left { text-align: left }

{breakpoint}-center { text-align: center }

{breakpoint}-right { text-align: right }

{breakpoint}-justify { text-align: justify }

{breakpoint}-nowrap { white-space: nowrap }

{breakpoint}-pre-wrap { white-space: pre-wrap }

{breakpoint}-break-word { word-wrap: break-word }

Display

{breakpoint}-inline { display: inline; width: auto }

{breakpoint}-flex { display: flex }

{breakpoint}-block { display: block; width: 100% }

{breakpoint}-none { display: none }

{breakpoint}-inline-block { display: inline-block }

{breakpoint}-table { display: table }

{breakpoint}-table-cell { display: table-cell }

Vertical Align

{breakpoint}-align-baseline { vertical-align: baseline }

{breakpoint}-align-top { vertical-align: top }

{breakpoint}-align-middle { vertical-align: middle }

{breakpoint}-align-bottom { vertical-align: bottom }

Overflow

{breakpoint}-overflow-hidden { overflow: hidden }

{breakpoint}-overflow-scroll { overflow: scroll }

{breakpoint}-overflow-auto { overflow: auto }

Order

{breakpoint}-order-first { order:-1 }

{breakpoint}-order-0 { order:0 }

{breakpoint}-order-1 { order:1 }

{breakpoint}-order-2 { order:2 }

{breakpoint}-order-3 { order:3 }

{breakpoint}-order-last { order:99999 }

Flex Utility Classes

{breakpoint}-ai-start { align-items: flex-start }

{breakpoint}-ai-end { align-items: flex-end }

{breakpoint}-ai-center { align-items: center }

{breakpoint}-ai-stretch { align-items: stretch }

{breakpoint}-jc-start { justify-content: flex-start }

{breakpoint}-jc-end { justify-content: flex-end }

{breakpoint}-jc-center { justify-content: center }

{breakpoint}-jc-between { justify-content: space-between }

{breakpoint}-jc-around { justify-content: space-around }

{breakpoint}-flex-center { display: flex; align-items: center; justify-content: center }

{breakpoint}-flex-wrap { flex-wrap: wrap }

{breakpoint}-flex-column { flex-direction: column }

SpryCSS

Getting Started and Installation

Using the CDN:

Using NPM and SCSS:

Overriding SCSS Variables:

SCSS Variables

Example Variables File:

Accessing Variables in SCSS

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

SCSS Variable

Colors

Text Colors

Background Colors

Border Colors

Button Colors

Accent Colors

SCSS Variable

Icons

Ex.

Buttons

Outline

Large

Small

With Icons

With Loader

Grid

Container Classes

Column Classes

Breakpoint Classes

CSS Grid

Auto Fit minimum 200px

Specify number of columns

CSS Flexbox

Equal Columns Single Row above mobile

Specify number of columns centered

Set Sidebar width with Auto Content Column

Custom Ordering with Space between See Layout Classes for more details

Columns multi row with column spanning

Responsive with different gap sizing and nested row with an auto fill column

Row spanning with nested rows and auto height

Forms

Simple form with some Required Fields

Vertical Checkboxes

Horizontal Radios *

Responsive labels with loading button and disabled fields on submit

Dense Fields using form.small

Tables

Modals

Login

Large Model with Long content and forced buttons

This is the Modal Heading

Utilities

General Utility Classes

Max Width Classes

Spacing

Negative Margin

Layout Utility Classes

Sizing

Text

Display

Vertical Align

Overflow

Order

Flex Utility Classes

Dense Fields using `form.small`