Miva Merchant Elements CSS Cheat Sheet

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 Objects

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

Components

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)

Utilities

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

Extensions

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.

overall rating:

★★★★★

★★★★★

★★★★★

my rating: log in to rate