Miva Merchant SEO, eCommerce, Miva Modules, Custom Web Apps, and Miva Merchant troubleshooting.

Miva Merchant & Miva Script News

It takes a while to get used to Elements CSS, this can help.


A cheat sheet for Miva Merchant Elements CSS with all CSS elements on one page and in a mostly orderly fashion.

Miva Merchant, Miva Merchant Storemorph


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.

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
    
    ### 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

    css elements miva merchant readytheme shadows stormorph

    Please log in to leave a comment.

    The blog posts on Scot's Scripts are served by Scot's Blogger, a Miva Merchant blogging module that makes it easy to create a Wordpress style blog, rich content, and extra pages in your Miva Merchant store.