Home / KVM Switches / 2016 KVMSO Style Guide

2016 KVMSO Style Guide / Elements


Web Elements Font Spacing Yahoo Variables


CSS & JS Plugins / Elements

Mention which JS ones are automatically activated through script.js - use bottom-tags for page specific activations

Material Icons

***Materialize.css - base for most elements

Veloctiy JS - base for most animations

Animate.css

CounterUp

Hierarchical Display

Hover Intent

Desoslide

Material Design Colors

  • Custom Colors: KVMSO-primary, KVMSO-Secondary, KVMSO-Black, Text-Black-lighten, Text-black.

Bourbon (SCSS definition plugin)

Banner Images

  • etc......

Custom KVMSO icons (i.e. ip, kvm, cables, catx, etc)

  • etc......

Ignore Image - product page (.ignore-image)

Ignore <a> - product page (.ignore-a-link)

Dividers

  • Divider (.divider)
  • Divider Triangle
  • Divider behind text
  • Double-lined Divider
  • Strikethrough Divider

Ripple Ink (alt click effect) (.waves-effect)

Material Form (alt material form objects)

Other blocks im creating i.e. category-sheet

  • .icon-box-zoom
  • .note-banner
  • .selector-banner
  • .row.help-section


Font

Roboto Font (100, 100italic, 300italic, 300, 400, 400italic, 500, 500italic, 700, 700italic, 900, 900italic)

  • 400 for body / 300 or 400 for titles is standard
  • <b> is 500
  • Colors: add -text to any color class i.e. class="kvmso-primary-text" or class="kvmso-primary-text text-lighten-4" or class="kvmso-primary-text text-darken-2"
  • text color: rgba (0,0,0,0.87) - class text-black-text
  • text color light: rgba (0,0,0,0.54) - class text-black-lighten-text

Sizing

  • .d1
  • .d2
  • .d3 (same as h1)
  • .d4 (same as h2)
  • .d5 (same as h3)
  • .d6 (same as h4)
  • #headline (cant show)
  • .button-text
  • .caption-text
  • .subheading-text
  • .title-text


Spacing

  • 60px - top and bottom of sections (make sure the first and last elements dont have margin or padding or will be greater than 60px
  • 45px
  • 30px - i.e. left and right
  • 15px


Yahoo Store RTML Variables

Robots

  • Type: yes-no
  • Disable Google crawlers
  • For new or temporary pages google shouldn't crawl or index

Head-tags

  • Type: Text, Med-text, Big-text
  • For page specific css
  • I.e. <style>#leftmenu-td {display:none !important;}</style>

Bottom-tags - 2016

  • Type: Text, Med-text, Big-text
  • For page specific javascript / jquery
  • I.e. <script>$('#toilet').innerHtml("poop");</script>

Slideshow

  • Type: Text, Med-text, Big-text
  • Full width div before h1 / breadcrumbs

Top-text

  • Type: Text, Med-text, Big-text
  • Containered Text below h1 / breadcrumbs

Mid-text

  • Type: Text, Med-text, Big-text
  • Containered Text below SOW but above caption

Bottom-text-full - 2016

  • Type: Text, Med-text, Big-text
  • Full width div after caption

Omit-h1 - 2016

  • Type: yes-no
  • Remove H1
  • For custom H1 i.e. on a banner

Omit-breadcrumbs - 2016

  • Type: yes-no
  • Remove breadcrumbs
  • For custom breadcrumbs i.e. on a banner

Omit-caption - 2016

  • Type: yes-no
  • For Pages without caption i.e. index or contact us

Omit-containers - 2016

  • Type: yes-no
  • For using full width images or divs (i.e. background-color) in caption, top-text, and mid-text
  • *I recommend using slideshow or bottom-text-full for this

Contents2

  • For parenting a page in another page without having the product show on that page (see contents)

im2, im3, im4 - 2016

  • Type: image
  • For attaching more images to a product without putting the image on the product page
  • *Yahoo will automatically suck up all images already on a page above 100px X 100px - For ignoring an image on the page add class 'ignore-image' to img

Buy-table

  • Type:yes-no
  • Table layout for products under contents instead of product cards

Kvmselector - 2016

  • Type: yes-no
  • In page KVM Selector
  • For subcategory pages i.e. 8 port IP kvms
  • *see Preselect-input and Preselect-select

Preselect-input - 2016

  • Type: text
  • For preselecting options in kvm selector
  • ID of a input (radio button or checkbox) in kvm selector

Preselect-select - 2016

  • Type: text
  • For preselecting options in kvm selector
  • ID of a dropdown under select (not the ul list) in kvm selector

Discontinued

  • Type: yes-no
  • For autofilling discontinued message
  • *see replacement and r-replacement

EOL

  • Type: yes-no
  • For autofilling end-of-life message
  • *see replacement and r-replacement

Replacement

  • Type: ids?
  • For autofilling a direct replacement for eol or discontinued messages

R-replacement

  • Type: ids?
  • For autofilling a indirect (recomended) replacement for eol or discontinued messages

Cat-contents? - 2016

Body-table-old - 2016

  • Type: yes-no
  • for using old product cards
  • *dont use