This is a quick list of Shadows (Elements) CSS classes I put together over a couple glasses of scotch at the end of the night. Let me know if you see any problems.
Shadows CSS is based off three outdated and for the most part obsolete ideas. Unfortunately so much time and effort was invested in creating Shadows CSS that it's highly doubtful we'll ever see the day when they use something modern and widely supported such as Bootstrap for a framework.
If you're interested in switching over to Bootstrap let us know, we've converted several stores to Bootstrap which makes it much easier to maintain and code in the long run.
New and updated classes added Feb 2026
CSS Layout
Breakpoints for grid items for the most part seems to happen automatically in the Elements CSS framework. If a class has known breakpoint modifiers, they ( --s --m --l --w ) can be added to the end of the class name.
Simple layout example. The widths can be 1-12 and can be mixed and matched. Columns will wrap if the widths in a layout add up to more than 12. More information on widths at the bottom of the components section.
### two columns
<div class="o-layout">
<div class="o-layout__item u-width-6">
</div>
<div class="o-layout__item u-width-6">
</div>
</div>
Layout classes:
o-layout
o-layout__item
o-layout o-layout--row-reverse
o-layout o-layout--column --m --l --w
o-layout o-layout--column-reverse --m --l --w
o-layout o-layhout--full
o-layout o-layout--narrow
o-layout o-layout--wide
o-layout o-layout--flush
o-layout o-layout--spaced
### vertical alignment
o-layout o-layout--align-top
o-layout o-layout--align-center
o-layout o-layout--align-bottom
o-layout o-layout--align-baseline
o-layout o-layout--align-stretch
### horizontal alignment
o-layout o-layout--justify-start
o-layout o-layout--justify-center
o-layout o-layout--justify-end
o-layout o-layout--justify-around
o-layout o-layout--justify-between
### flex ordering
o-layout o-layout__first --s --m --l --w
o-layout o-layout__last
### growth control
o-layout--grow
o-layout--no-grow
o-layout--shrink
o-layout--no-shrink
### wrap
o-layout--no-wrap
o-layout--wrap
o-layout--wrap-reverse
Lists
o-list-bare
o-list-block
o-list-inline
o-list-inline o-list-inline--narrow
o-list-inline o-list-inline--wide
Tables (see below in the components section for code example)
o-table
o-table o-table--fixed
o-table o-table--narrow
o-table o-table--wide
o-table o-table-borderless
Wrapper
o-wrapper
o-site-wrapper
o-wrapper o-wrapper--full
o-wrapper--flush
Buttons
c-button c-button-primary
c-button c-button--secondary
c-button c-button-dark
c-button c-button-dark--secondary
c-button c-button--circle
c-button c-button--square
c-button c-button--tiny
c-button c-button--small
c-button c-button--large
c-button c-button--huge
c-button c-button--full
c-button c-button--hollow
c-button c-button--clear
c-button disabled=""
c-button is-error
c-button c-button--glossy
c-button--as-link
Control Groups: make button groups
<div class="c-control-group">
<button class="c-button c-control-group__button">Button 1</button>
<button class="c-button c-control-group__button">Button 2</button>
<button class="c-button c-control-group__button">Button 3</button>
</div>
### Modifiers: <div class="c-control-group c-control-group--rounded">...</div>
c-button c-control-group--rounded
c-button c-control-group--rounded-right
c-button c-control-group--rounded-left
c-button c-control-group--stacked
Divider
c-divider
c-divider c-divider--top
Forms
<form>
<fieldset>
<legend>Example</legend>
<ul class="c-form-list">
<li class="c-form-list__item">
<label class="c-form-label" for="example1">Example</label>
<input id="example1" class="c-form-input" type="text" placeholder="something">
<button class="c-button c-control-group__button">Submit</button>
</li>
</ul>
</fieldset>
</form>
### select
<select id="example2" class="c-form-select">
<option value="abc">Option ABC</option>
<option value="def">Option DEF</option>
</select>
### textarea
<textarea id="example3" class="c-form-input c-form-input--long" placeholder="something here"></textarea>
### checkbox
<label class="c-form-checkbox">
<input class="c-form-checkbox__input" type="checkbox">
<span class="c-form-checkbox__caption">Check Me</span>
</label>
### inline checkbox
<li class="c-form-list__item">
<label class="c-form-checkbox c-form-checkbox--inline">
<input class="c-form-checkbox__input" type="checkbox">
<span class="c-form-checkbox__caption">Inline 1</span>
</label>
<label>...</label>
etc
</li>
### radio
<label class="c-form-checkbox c-form-checkbox--radio">
<input class="c-form-checkbox__input" type="radio" name="agree" value="yes">
<span class="c-form-checkbox__caption">Yes</span>
</label>
### inline radio
<li class="c-form-list__item">
<label class="c-form-checkbox c-form-checkbox--radio c-form-checkbox--inline">
<input class="c-form-checkbox__input" type="radio" name="inline-radio" value="1">
<span class="c-form-checkbox__caption">Radio 1</span>
</label>
<label>...</label>
etc...
</li>
### inline/grid form
<ul class="c-form-list o-layout">
<li class="c-form-list__item o-layout__item">...</li>
</ul>
Keyline
c-keyline
c-keyline--thick
c-keyline--small
### keylines under headings
c-heading--keyline
Menu
<nav class="c-menu">
<h5 class="c-menu__title u-text-uppercase">Quick Links</h5>
<ul class="c-menu__list u-text-uppercase">
<li><a class="c-menu__link" href="">About Us</a></li>
<li><a class="c-menu__link" href="">FAQs</a></li>
<li><a class="c-menu__link" href="">Contact Us</a></li>
<li><a class="c-menu__link" href="">Become an Affiliate</a></li>
</ul>
</nav>
Mini-Modal
<a data-mini-modal="" href="LARGE_IMAGE_URL" title="image">
<img src="IMAGE_URL">
</a>
Navigation
<nav class="u-text-uppercase c-navigation">
<input id="mainNavButton" class="c-navigation__trigger" type="checkbox">
<label class="c-navigation__label" for="mainNavButton">Menu</label>
<ul class="c-navigation__row">
<li class="c-navigation__list"><a class="c-navigation__link" href="#">All Products</a></li>
<li class="c-navigation__list"><a class="c-navigation__link" href="#">Category 1</a></li>
<li class="c-navigation__list"><a class="c-navigation__link" href="#">Category 2</a></li>
<li class="c-navigation__list"><a class="c-navigation__link" href="#">Category 3</a></li>
<li class="c-navigation__list"><a class="c-navigation__link" href="#">More</a></li>
</ul>
</nav>
Tables
## main table classes
c-table-simple
c-table-simple__row
c-table-stripped
c-table-stripped__row
c-table-responsive
c-table-responsive_thead
c-table-responsive__row
c-table-responsive__cell
<table class="c-table-simple">
<thead>
<tr class="c-table-simple__row">
<th class="c-table-simple__cell">Name</th>
<th class="c-table-simple__cell">Age</th>
<th class="c-table-simple__cell">Feet</th>
</tr>
</thead>
<tbody>
<tr class="c-table-simple__row">
<td class="c-table-simple__cell">Tim Smith</td>
<td class="c-table-simple__cell">25</td>
<td class="c-table-simple__cell">2</td>
</tr>
</tbody>
</table>
### striped
<table class="c-table-stripped">...</table>
<table class="c-table-responsive">...</table>
## width of TDs
c-table-simple__cell
c-table-simple__cell--standard
c-table-simple__cell--wide
Headings
<h1 class="c-heading-alpha">Heading Alpha <span class="c-heading--subheading">Subheading</span></h1>
<h1 class="c-heading-alpha">...</h1>
<h2 class="c-heading-bravo">...</h2>
<h3 class="c-heading-charlie">...</h3>
<h4 class="c-heading-delta">...</h4>
<h5 class="c-heading-echo">...</h5>
<h6 class="c-heading-foxtrot">...</h6>
<p class="c-text-body">...</p>
<h1 class="c-heading-alpha c-heading--keyline">...</h1> (adds a little divider under the heading)
## subheadings
c-heading--subheading
c-heading--subheading--x-small
c-heading--subheading--small
c-heading--subheading--large
Borders: Borders can be used on any element. The example below shows border classes being used on buttons.
u-border-none
u-border-thick
u-border-rounded
u-border-square
### border color classes: these are based on theme, so try other color names as well as those below.
u-border-red
u-border-yellow
u-border-blue
u-border-green
u-border-black
### button examples
<button class="c-button u-border-none">No Border</button>
<button class="c-button u-border-thick">Thick Border</button>
<button class="c-button u-border-rounded">Rounded Border</button>
<button class="c-button u-border-square">Square Border</button>
Clear Fix
u-clear-fix
Colors
Background colors:
u-bg-red
u-bg-yellow
u-bg-blue
u-bg-green
u-bg-black
u-bg-gray-50
u-bg-gray-40
u-bg-gray-30-gray-10
u-bg-gray-20
u-bg-gray-10
u-bg-white
u-bg-primary
u-bg-secondary
u-bg-tertiary
u-bg-accent
u-bg-highlight
Text colors:
u-color-red
u-color-yellow
u-color-blue
u-color-green
u-color-black
u-color-gray-50
u-color-gray-40
u-color-gray-30
u-color-gray-20
u-color-gray-10
u-color-white
u-color-primary
u-color-secondary
u-color-tertiary
u-color-accent
u-color-highlight
Display: These can take breakpoint modifiers. They work from small to wide.
If you hide on small, it will hide on everything unless you specifically tell it not to: --s --m --l --w
u-hide-visually - hide visually but not for screen readers
u-hidden - hide from everything
u-invisible - visually hidden but no layout change
u-flex
u-block
u-shown
u-inline
u-inline-block
u-visible
### Add bBreakpoint modifiers to the class, such as:
u-hidden--s
### Hide on small screen, show on all others:
<div class="u-hidden--s u-shown--m">...</div>
### Hide on large and wide screen, show on small and medium:
<div class="u-hidden--l">...</div>
Grids: Create auto columns that wrap intelligently
o-layout u-grids2
o-layout u-grids3
o-layout u-grids4
etc...
u-grids-1
u-grids-2
u-grids-3
u-grids-4
u-grids-5
u-grids-6
u-grids-7
u-grids-8
u-grids-9
u-grids-10
u-grids-11
u-grids-12
### Example
<div class="o-layout u-grids-3">
<div class="o-layout__item">
</div>
<div class="o-layout__item">
</div>
<div class="o-layout__item">
</div>
<div class="o-layout__item">
</div>
<div class="o-layout__item">
</div>
</div>
### breakpoints: all grid classes can have breakpoints added, --s --m --l --w
### breakpoint exmaple, show one column on small, show three on medium and up:
o-layout u-grids-1 u-grids-3--m
Use with breakpoints:
o-layout u-grids-1 u-grids-3--m
Iconography
Go here for a list of available icons: https://docs.miva.com/elements/iconography/demo.html
<span class="u-icon-question"></span>
<span class="u-icon-envelope"></span>
etc...
Print
Print styles are handled automatically (from HTML5 Boilerplate)
### only display on printout
u-printable__content
Typography
### font-families
u-font-primary
u-font-secondary
### alignment --s --m --l --w
u-text-left
u-text-center
u-text-right
u-text-justify
### sizing
u-font-tiny
u-font-small
u-font-medium
u-font-large
u-font-huge
### weight, transformations, decorations
u-text-light
u-text-regular
u-text-medium
u-text-bold
u-text-boldest
u-text-italic
u-text-lowercase
u-text-uppercase
u-text-caps
u-text-strike
u-text-underline
u-text-normal
u-text-revert
u-text-constrain (max 75chars per line)
Vertical Alignment
u-align-baseline
u-align-bottom
u-align-middle
u-align-top
u-vertical-align-parent
u-vertical-align-center
Widths: These give a fluid width to whichever element they are applied to and include breakpoints --s --m --l --w
u-width-# --s --m --l --w (# is the number of columns wide, out of 12)
<div class="o-layout">
<div class="o-layout__item u-width-6">
</div>
<div class="o-layout__item u-width-6">
</div>
</div>
### with various breakpoints, can be included in one o-layout and cols will auto wrap to fit
o-layout__item u-width-12 u-width-4--m
o-layout__item u-width-6 u-width-4--m
o-layout__item u-width-6 u-width-4--m
### width classes, each can take a breakpoint as well --s --m --l --w (width of 1 on small, width of 6 on medium and up: u-width-1--s u-width-6--m)
u-width-1
u-width-2
u-width-3
u-width-4
u-width-5
u-width-6
u-width-7
u-width-8
u-width-9
u-width-10
u-width-11
u-width-12
### offset classes, also can take breakpoints --s --m --l --w
u-offset-1
u-offset-2
u-offset-3
u-offset-4
u-offset-5
u-offset-6
u-offset-7
u-offset-8
u-offset-9
u-offset-10
u-offset-11
u-offset-12
Z-Index
u-below-content
u-over-content
u-over-control
u-over-page
u-over-screen
u-over-everything
These are css/html components that can be used in different readythemes, a sort of plug-n-play system.
AJAX Add-to-Cart
Adds a product to the basket without reloading the page.
Breadcrumbs
Category Tree
Hero
Hero Slider
Image carousel header/section
Messages
Alerts, success, info, etc...
Mini-Basket
Mini basket that flies out from the right edge of the browser.
Navigation
Use dropdown, overlfow, and overlay style navigations.
Product Carousel
Search Preview
Spinner
Ajax spinner icon.
