This is a quick list of 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.
Update Dec 2020: Matt Zimmerman has updated the online style guide which is now a great resource: https://docs.miva.com/readytheme-shadows/#overview-style-guide
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--tiny
c-button c-button--small
c-button
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-primary
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
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
<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>
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)
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.
