Styleguide - RYCO Hydraulics

RYCO Web Style Guide

Logos

SVG format for high quality

Typography

'Abel', Helvetica, Arial, sans-serif link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'
Small - $font-size-small Sentence case Title Case Uppercase Base body paragraph - $font-size-base Sentence case

Title Case

Uppercase

H6 - $font-size-h6
Sentence case
Title Case
Uppercase
H5 - $font-size-h5
Sentence case
Title Case
Uppercase
H4 - $font-size-h4

Sentence case

Title Case

Uppercase

H3 - $font-size-h3

Sentence case

Title Case

Uppercase

H2 - $font-size-h2

Sentence case

Title Case

Uppercase

H1 - $font-size-h1

Sentence case

Title Case

Uppercase

Page Header H2 - border bottom example

Page Header

Small - links - News Meta
By
Read More - links Video Homepage - links
JSEAL – The New Standard in JIC Fittings
Video Homepage - links
Category Menu

Block Header Centered

H2 Centered Header

Header Centered

Generic Buttons

Desktop Buttons. Resize browser screen for mobile button view

Colors

Color description

.ryco-primary - $ryco-primary - #d50032

.ryco-dark-cool-gray - $ryco-dark-cool-gray - #1d2427

.gray-dark - $gray-dark - #252829

.gray - $gray - #383c3e5

.gray-light - $gray-light - #4a5052

.gray-lighter - $gray-lighter - #777c7d

.gray-lightest - $gray-lightest - #d2d3d4

.gray-extreme-light - $gray-extreme-light - #eeeeee

Icons & HTML characters

Goto: http://fontawesome.io/icons/ & http://fontawesome.io/examples/ & http://character-code.com/ for references Inspect Element to get icon code

Popovers

Popover boxes

Pagination

News/Blog/Post Page Pagination

Forms

Contact forms
HTML Snippets Powered By : XYZScripts.com