Home / KVM Switches / 2019 Style Guide

2019 KVMSO Style Guide



Web Elements Layout Font Spacing Yahoo Variables


CSS / JS Plugins & Web Elements

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

***Materialize.css - base for most elements

Material Icons

Animate.css - base for front-end animations

Veloctiy JS - base for back-end animations

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)

Ignore Image - product page (.ignore-image)

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

Dividers

  • Divider (.divider)
  • Divider Triangle
  • Divider behind text (.divider-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


Layout

Grid layout is based on Materialize.css - see here

  • Containers - We use .container slightly differently than Materialize CSS - ignore instructions for containers in framework
  • We added sizing for mobile devices ( .mo - i.e. .mo6 .push-mo6 .pull-mo6 .hide-on-mo-and-up )
  • Helper classes for responsive Hiding/Showing content based on screen size - see here
    • Note, not all classes are implemented because we based on an older version - often you can get around by using other combinations (hide by default and then show instead of show by default and then hide)
  • Divider helper classes -
    • Divider (.divider)
    • Divider behind text (.divider-text)
    • Ask Daniel: Divider Triangle, Double-lined Divider, Strikethrough Divider
  • Modals - see examples / ask Daniel
    • Note - our modals are based on an older version - not all i.e. options are accurate any more
s12
s12 m4 l2
s12 m4 l8
s12 m4 l2
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3

  <div class="row">
    <div class="col s12"><p>s12</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
    <div class="col s12 m4 l8"><p>s12 m4</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
  </div>
  <div class="row">
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
  </div>


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 (H tags are not for 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 large sections (make sure the first and last elements dont have margin or padding or will be greater than 60px)
  • 45px - top and bottom of medium sections
  • 40px - top and bottom of medium sections
  • 30px - i.e. left and right
  • 20px - also <br> is 20px tall
  • 15px - standard spacing between small separate elements i.e. for <p> or <ul>
  • 10px - spacing between small elements i.e. for emphasizing <li> in <ul> list


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, im5, im6, im7, im8 - 2016

  • Type: image
  • For attaching more images to a product without putting the image on the product page
  • *The site will automatically suck up all images already on a product page (larger than 100px X 100px) to the top of page - 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

Body-table-old - 2016

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