Styleguide - RYCO Hydraulics

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


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


Generic Buttons


Desktop Buttons - width of "col-md-4 col-md-offset-4 & center-block. Wrapped with col-lg-8 col-lg-offset-2 col-xs-10 col-xs-offset-1 text-center extra-margin-bottom". 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
id="pop" rel="popover" data-content="This is the body of Popover" data-original-title="Title" data-html="true" data-placement="left" / right / top / bottom
data-content="Error! must be 6 characters or more" type="text" class="form-control" style="width:50%" placeholder="Type something…"



Pagination


News/Blog/Post Page Pagination

Forms


Contact forms etc

Tables


Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

News Items


Front Page and Child Page

Image Gallery


Full Width Gallery x6 images