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()
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
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}
Background Colors
.bg-{color} .color-light
Border Colors
.border .border-{color}
Button Colors
.btn .btn-{color}
Accent Colors
.accent-{color}
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 addfill="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>
Grid
You can either use a 12 column css grid or flexbox grid system
Container Classes
grid
Grid of columns, Uses variable $gaps
for spacingrow
Flex row of columns, Uses variable $gaps
for spacingcolumns
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
<div class="grid-200">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Specify number of columns
<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
<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)<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
<div class="row">
<div class="w-300"></div>
<div></div>
</div>
Custom Ordering with Space between See Layout Classes for more details
<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
<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
<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
<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
<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
Login
<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
This is the Modal Heading
<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
= paddingm
= marginThere are 6 sides:
t
= topr
= rightb
= bottoml
= lefty
= top and bottomx
= left and rightThe 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 }