PLEASE DO NOT EDIT

Last Updated: Jun 4, 2021

Blain’s Style Guide

Blain’s Logos

SVG logo with different sizes

Primary logo

Large size logo class="logo-large"

Medium size logo class="logo-medium"

Small size logo class="logo-small"

xSmall size logo class="logo-xsmall"

Secondary logo

Spacing and Gaps - with Margins

Following classes can be used with any tag

class="margin-10" is for 10px margin for All the sides
class="margin-15" is for 15px margin for All the sides
class="margin-20" is for 20px margin for All the sides

class="margin-top-bottom-10" is for 10px margins from Top and Bottom while Left and Right 0px
class="margin-top-bottom-15" is for 15px margins from Top and Bottom while Left and Right 0px
class="margin-top-bottom-20" is for 20px margins from Top and Bottom while Left and Right 0px

class="margin-top-bottom-10-auto" is for 10px margins from Top and Bottom while Left and Right auto
class="margin-top-bottom-15-auto" is for 15px margins from Top and Bottom while Left and Right auto
class="margin-top-bottom-20-auto" is for 20px margins from Top and Bottom while Left and Right auto

class="margin-left-right-10" is for 10px margins from Right and Left while Top and Bottom 0px
class="margin-left-right-15" is for 15px margins from Right and Left while Top and Bottom 0px
class="margin-left-right-20" is for 20px margins from Right and Left while Top and Bottom 0px

class="margin-left-right-10-auto" is for 10px margins from Right and Left while Top and Bottom auto
class="margin-left-right-15-auto" is for 15px margins from Right and Left while Top and Bottom auto
class="margin-left-right-20-auto" is for 20px margins from Right and Left while Top and Bottom auto

class="margin-left-10, 15, 20" is for 10px, 15px, 20px margin from Left
class="margin-right-10, 15, 20" is for 10px, 15px, 20px margin from Right
class="margin-top-10, 15, 20" is for 10px, 15px, 20px margin from Top
class="margin-bottom-10, 15, 20" is for 10px, 15px, 20px margin from Bottom

class="no-margin" is for 0px margin for All the sides
class="no-margin-left" is for 0px margin from Left
class="no-margin-right" is for 0px margin from Right
class="no-margin-top" is for 0px margin from Top
class="no-margin-bottom" is for 0px margin from Bottom

Spacing and Gaps - with Padding

Following classes can be used with any tag

class="padding-10" is for 10px padding for All the sides
class="padding-15" is for 15px padding for All the sides
class="padding-20" is for 20px padding for All the sides

class="padding-top-bottom-10" is for 10px padding for Top and Bottom while Left and Right 0px
class="padding-top-bottom-15" is for 15px padding for Top and Bottom while Left and Right 0px
class="padding-top-bottom-20" is for 20px padding for Top and Bottom while Left and Right 0px

class="padding-top-bottom-10-auto" is for 10px padding for Top and Bottom while Left and Right auto
class="padding-top-bottom-15-auto" is for 15px padding for Top and Bottom while Left and Right auto
class="padding-top-bottom-20-auto" is for 20px padding for Top and Bottom while Left and Right auto

class="padding-left-right-10" is for 10px padding from Right and Left while Top and Bottom 0px
class="padding-left-right-15" is for 15px padding from Right and Left while Top and Bottom 0px
class="padding-left-right-20" is for 20px padding from Right and Left while Top and Bottom 0px

class="padding-left-right-10-auto" is for 10px padding from Right and Left while Top and Bottom auto
class="padding-left-right-15-auto" is for 15px padding from Right and Left while Top and Bottom auto
class="padding-left-right-20-auto" is for 20px padding from Right and Left while Top and Bottom auto

class="padding-left-10, 15, 20" is for 10px, 15px, 20px padding from Left
class="padding-right-10, 15, 20" is for 10px, 15px, 20px padding from Right
class="padding-top-10, 15, 20" is for 10px, 15px, 20px padding from Top
class="padding-bottom-10, 15, 20" is for 10px, 15px, 20px padding from Bottom

class="no-padding" is for 0px padding for All the sides
class="no-padding-left" is for 0px padding from Left
class="no-padding-right" is for 0px padding from Right
class="no-padding-top" is for 0px padding from Top
class="no-padding-bottom" is for 0px padding from Bottom

Primery Color 1

Use with any tag

HEX	#B22B2C
RGB	178	43	44
CMYK	0%	53%	53%	30%

Primery Color 2

Use with any tag

HEX	#2079B0
RGB	32	121	176
CMYK	56%	22%	0%	31%

Secondary Color 1

Use with any tag

HEX	#666666
RGB	102	102	102
CMYK	0%	0%	0%	60%

Secondary Color 2

Use with any tag

HEX	#2487C4
RGB	36	135	196
CMYK	63%	24%	0%	23%

Tertiary Color 1

Use with any tag

HEX	#CCCCCC
RGB	204	204	204
CMYK	0%	0%	0%	20%

Tertiary Color 2

Use with any tag

HEX	#F3F3F3
RGB	243	243	243
CMYK	0%	0%	0%	5%

White Color

Use with any tag

HEX	#FFFFFF
RGB	255	255	255
CMYK	0%	0%	0%	0%

Black Color

Use with any tag

HEX	#000000
RGB	0	0	0
CMYK	0%	0%	0%	100%

Error Color

Use with any tag

HEX	#FF0000
RGB	255	0	0
CMYK	0%	100%	100%	0%

Notification Red

Use with any tag

HEX	#E51541
RGB	229	21	65
CMYK	0%	96%	65%	0%

Darker Blue

Use with any tag

HEX	#014A77
RGB	1	74	119
CMYK	46%	18%	0%	53%

Gray 3

Use with any tag

HEX	#F6F6F6
RGB	246	246	246
CMYK	0%	0%	0%	4%

Gray 4

Use with any tag

HEX	#EFEFEF
RGB	239	239	239
CMYK	0%	0%	0%	6%

Gray 5

Use with any tag

HEX	#E9E9E9
RGB	233	233	233
CMYK	0%	0%	0%	9%

Typography / Fonts

Font Name: Roboto

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 + - \ * =

~ ` ! @ # % ^ & ( ) { } _ | / ? < > . ,

basic Headings

Use tags h1 to h6 for get necessary heading

H1 - Bold 30px - Capitalized

H2 - Bold 28px - Capitalized

H3 - Bold 24px - Capitalized

H4 - Bold 20px - Capitalized

H5 - Bold 18px - Capitalized

H6 - Bold 16px - Capitalized

Uppercase Heading

Use tags h1 to h6 with class="all-caps" for get necessary uppercase heading

H1 - Bold 30px - Uppercase

H2 - Bold 28px - Uppercase

H3 - Bold 24px - Uppercase

H4 - Bold 20px - Uppercase

H5 - Bold 18px - Uppercase

H6 - Bold 16px - Uppercase

Default Paragraph / Body Copy

Default Paragraph tag <p></p> or class="text-size-16"

text-size: 16px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Medium Size Paragraph / Body Copy

Use with any tag with class="text-size-14"

text-size: 14px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Large Size Paragraph / Body Copy

Use with any tag class="text-size-18"

text-size: 18px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

All Capital Letters

Use with any tag class="all-caps"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bolder Text

Use with any tag with class="bolder-text"

font-weight: 700 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold Text

Use with any tag with class="bold-text""

font-weight: 600 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Capitalized Text

Use with any tag with class="text-capitalize"

Small Text

Use with any tag with class="text-size-12"

text-size: 12px and line-height: 16px sample Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Separators

Icons

Icons are from fontawesome.com full icon set available here

: ambulance; f0f9

: angle-double-down; f103

: angle-double-left; f100

: angle-double-right; f101

: angle-double-up; f102

: angle-down; f107

: angle-left; f104

: angle-right; f105

: angle-up; f106

: arrow-down; f063

: arrow-left; f060

: arrow-right; f061

: arrow-up; f062

: at; f1fa

: asterisk; f069

: bell; f0f3

: bone; f5d7

: box; f466

: calendar; f133

: calendar-alt; f073

: camera; f030

: capsules; f46b

: caret-down; f0d7

: caret-left; f0d9

: caret-right; f0da

: caret-up; f0d8

: cat; f6be

: check; f00c

: check-circle; f058

: check-square; f14a

: chevron-down; f078

: chevron-left; f053

: chevron-right; f054

: chevron-up; f077

: clock; f017

: cog; f013

: comment; f075

: comments; f086

: credit-card; f09d

: crow; f520

: directions; f5eb

: dog; f6d3

: dollar-sign; f155

: dove; f4ba

: download; f019

: drumstick-bite; f6d7

: egg; f7fb

: ellipsis-h; f141

: ellipsis-v; f142

: envelope; f0e0

: envelope-open; f2b6

: exclamation; f12a

: exclamation-circle; f06a

: exclamation-triangle; f071

: file-pdf; f1c1

: filter; f0b0

: heart; f004

: home; f015

: horse; f6f0

: image; f03e

: images; f302

: info-circle; f05a

: key; f084

: link; f0c1

: location-arrow; f124

: lock; f023

: map-marker-alt; f3c5

: paper-plane; f1d8

: paperclip; f0c6

: pen; f304

: pencil-alt; f303

: phone; f095

: pills; f484

: play; f04b

: plus; f067

: plus-circle; f055

: plus-square; f0fe

: search; f002

: share; f064

: shopping-cart; f07a

: star; f005

: star-half; f089

: star-half-alt; f5c0

: times; f00d

: times-circle; f057

: trash; f1f8

: trash-alt; f2ed

: truck; f0d1

: user-alt; f406

: user-circle; f2bd

: video; f03d

: file-export; f56e

Line Icons

Icons are from fontawesome.com full icon set available here

: arrow-alt-circle-down; f358

: arrow-alt-circle-left; f359

: arrow-alt-circle-right; f35a

: arrow-alt-circle-up; f35b

: bell; f0f3

: calendar; f133

: calendar-alt; f073

: caret-square-down; f150

: caret-square-left; f191

: caret-square-right; f152

: caret-square-up; f151

: check-circle; f058

: check-square; f14a

: clock; f017

: comment; f075

: comment-alt; f27a

: comment-dots; f4ad

: comments; f086

: credit-card; f09d

: edit; f044

: envelope; f0e0

: file-pdf; f1c1

: heart; f004

: image; f03e

: paper-plane; f1d8

: plus-square; f0fe

: question-circle; f059

: registered; f25d

: star; f005

: star-half; f089

: sun; f185

: times-circle; f057

: trash-alt; f2ed

: user; f007

: user-circle; f2bd

: window-close; f410

Layout / Grid System

Borrowed Bootstrap Grid for this layout system full guide available here

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

4 Column Item Grid

By using class="col-3"

Apoquel Tablet^Rx

Mfg. Price $2.29

Vetoryl Capsules 30 Ct.^Rx

Starts at $35.44

Trifexis Chewable Tablets for Dogs^Rx

Starts at $20.49

Nexgard for Dogs and Puppies^Rx

Starts at $58.99

6 Column / Homepage Item Grid

By using class="col-2" for single line title

Apoquel Tablet^Rx

Mfg. Price $2.29

Vetoryl Capsules 30 Ct.^Rx

Starts at $35.44

Trifexis Chewable Tablets for Dogs^Rx

Starts at $20.49

Nexgard for Dogs and Puppies^Rx

Starts at $58.99

Heartgard Plus Chewables For Dogs^Rx

Starts at $36.49

Bravecto Chews^Rx

Starts at $56.99

3 Column / Product Listing Grid

Vetoryl Capsules 30 Ct.^Rx

Starts at $35.44

Trifexis Chewable Tablets for Dogs^Rx

Starts at $20.49

Nexgard for Dogs and Puppies^Rx

Starts at $58.99

Icons Buttons

Buttons using <button> and <a> tag with icon

Default Link

Red Color Link

Black Color Link

Underline Link

Default <a> tag without any class
Using <a> tag with any color class e.g. class="text-color-orange", class="text-color-black" etc.
Using <a> tag with class="underline"

Elements

Buttons, Forms Inputs, etc.

Buttons

Primary and Secondary Buttons

Primary Primary Alt

Secondary Secondary Alt

Full width Buttons

Full width Primary and Secondary Buttons using <button> and <a> tag

Primary btn Full Width

Primary btn Alt Full Width

Seconadry btn Full Width

Seconadry btn alt Full Width

Use either <button> or <a> tag with class="primary-btn + full-width-btn"
Use either <button> or <a> tag with class="primary-btn-alt + full-width-btn"

Use either <button> or <a> tag with class="secondary-btn + full-width-btn"
Use either <button> or <a> tag with class="secondary-btn-alt + full-width-btn"

Button Disabled

By using <button> and <a> tag

Primary btn Disabled

Primary btn Alt Disabled

Secondary btn Disabled

Secondary btn Alt Disabled

To set disbaled state on a <button> tag add disabled="disabled" within the tag
To set disbaled state on <a> tag add class="disabled"

Icons Buttons

Buttons using <button> and <a> tag with icon

Use either <button> or <a> tag with class="primary-btn, secondary-btn + circular-btn"
Use either <button> or <a> tag with class="primary-btn-alt, secondary-btn-alt + circular-btn"

Social Media Button

Buttons using <button> and <a> tag with icon

Using <button> tag with class="primary-btn, secondary-btn + circular-btn + gray-btn"

Buttons with Icons

Buttons using <button> and <a> tag with icon

Primary btn Primary btn Primary btn Primary btn

Use either <button> or <a> tag and define icon in the text like this <i class="fas fa-icon_name"></i> Primary btn

Farm And Fleet Rx top contact bar

Shipping, Call, Fax, Live Chat.

Free shipping Over $49

Call: 888-854-2911

Fax: 888-854-2914

Live Customer Care

Farm And Fleet Rx Header

Logo, Search and Buttons

Elements

Form Inputs, Textarea, Select etc.

Text Field, Select box

Text field, Textarea, Select box, Radio Button etc.

Text Field*

Text Field with Data*

Select Box *

Checkbox, Radio button

Text field, Textarea, Select box, Radio Button etc.

Checkbox

Checkbox Selected

Radio Btn Radio Btn Selected

Weight (lbs)*

Birthday*

Select Age *

Browse / Upload btn, Textarea

Text field, Textarea, Select box, Radio Button etc.

Upload Photo Image size 10Mb max (.jpg, .jpeg, .png, .bmp, .gif)

Text Area

Error Message

Use with any tag "class="objError"

Text Field* This is error message for input field

Borders

Different Border style and width

Use with any tag class="borders" for this 1px border width
For roundness use class="borders + rounded, rounded-5, rounded-8 and rounded-10" defaut class="rounded" is 3px
For border color use class="borders + blue-border or orange-border"
For border style use class="borders + dashed or dotted"

Shadows

Box Shadows and Shadow styles

Use with any tag class="box-shadow" for 3px shadow
For 5px shadow class="box-shadow-5"
For 10px shadow class="box-shadow-10"
For 25px shadow class="box-shadow-25"

Error, Warning, Notification etc.

Different color boxes for different scenarios

Error Message

Line one
Line two
Line three

Warning Message

Notification Message

Congratulations! your prescription was approved

Use with any tag class="borders + rounded + error-box"
For warning box use class="borders + rounded + warning-box"
For showing notification use class="borders + rounded + notification-box"
For successful action use class="borders + rounded + happy-box"

Reviews.io Review Widget

Live review widget directly from Reviews.io

Farm And Fleet Rx Navigation Menu

Main navigation, Mega Menu

Blain’s Style Guide

Blain’s Logos

Primary logo

Secondary logo

Spacing and Gaps - with Margins

Spacing and Gaps - with Padding

Primery Color 1

Primery Color 2

Secondary Color 1

Secondary Color 2

Tertiary Color 1

Tertiary Color 2

White Color

Black Color

Error Color

Notification Red

Darker Blue

Gray 3

Gray 4

Gray 5

Typography / Fonts

a b c d e f g h i j k l m n o p q r s t u v w x y z

basic Headings

H1 - Bold 30px - Capitalized

H2 - Bold 28px - Capitalized

H3 - Bold 24px - Capitalized

H4 - Bold 20px - Capitalized

H5 - Bold 18px - Capitalized

H6 - Bold 16px - Capitalized

Uppercase Heading

H1 - Bold 30px - Uppercase

H2 - Bold 28px - Uppercase

H3 - Bold 24px - Uppercase

H4 - Bold 20px - Uppercase

H5 - Bold 18px - Uppercase

H6 - Bold 16px - Uppercase

Default Paragraph / Body Copy

Medium Size Paragraph / Body Copy

Large Size Paragraph / Body Copy

All Capital Letters

Bolder Text

Bold Text

Capitalized Text

Small Text

Separators

Icons

Social Icons

Line Icons

Layout / Grid System

4 Column Item Grid

6 Column / Homepage Item Grid

3 Column / Product Listing Grid

Icons Buttons

Elements

Buttons

Full width Buttons

Button Disabled

Icons Buttons

Social Media Button

Buttons with Icons

Farm And Fleet Rx top contact bar

Farm And Fleet Rx Header

Elements

Text Field, Select box

Checkbox, Radio button

Browse / Upload btn, Textarea

Error Message

Borders

Shadows

Error, Warning, Notification etc.

Reviews.io Review Widget

Farm And Fleet Rx Navigation Menu