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

 









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

 

RYCO Defence

RYCO Defence
Our Industries

 

RYCO Utility

RYCO Utility
Our Industries

 

RYCO Mining

RYCO Mining
Our Industries

 

RYCO Marine

RYCO Marine
Our Industries

 

RYCO Construction

RYCO Construction
Our Industries