Website Styleguide

Typography Lists Borders Colours Page Elements Images Buttons & Links Icons Tables Accordion Columns / Grids

Typography

 

Heading One

This is a "lead" paragraph. To use this styling, use the .lead class. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum urna, suscipit sit amet interdum eget, malesuada eu odio. Proin dui metus, elementum at luctus vitae, consequat ac massa. Suspendisse vel urna vel purus aliquam gravida.

Fusce lobortis, nulla sit amet euismod eleifend, nibh lectus scelerisque ante, ac congue ex tellus in dui. Mauris vel quam id mauris tincidunt tempor.


Heading Two

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei. Deleniti apeirian temporibus eam cu, ad mea ipsum sadipscing, sed ex assum omnium contentiones. Nobis suavitate moderatius has eu, epicuri ancillae pericula ei nam, ferri ipsum quaeque est ea.

Heading Three

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei. Deleniti apeirian temporibus eam cu, ad mea ipsum sadipscing, sed ex assum omnium contentiones. Nobis suavitate moderatius has eu, epicuri ancillae pericula ei nam, ferri ipsum quaeque est ea.

Heading Four

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei. Deleniti apeirian temporibus eam cu, ad mea ipsum sadipscing, sed ex assum omnium contentiones. Nobis suavitate moderatius has eu, epicuri ancillae pericula ei nam, ferri ipsum quaeque est ea.

Heading Five

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei. Deleniti apeirian temporibus eam cu, ad mea ipsum sadipscing, sed ex assum omnium contentiones. Nobis suavitate moderatius has eu, epicuri ancillae pericula ei nam, ferri ipsum quaeque est ea.

Heading Six

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei. Deleniti apeirian temporibus eam cu, ad mea ipsum sadipscing, sed ex assum omnium contentiones. Nobis suavitate moderatius has eu, epicuri ancillae pericula ei nam, ferri ipsum quaeque est ea.


Font - "proxima-nova"

FONT WEIGHTS

Regular - 500
Semi Bold - 600
Bold - 700
Extra Bold - 800


Lists

Unordered Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul><li>List Item</li><li>List Item</li><li>List Item</li><li>List Item</li></ul>

Ordered Lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

hr Borders

Basic HR
<hr> Dotted HR
<hr>


Colours

Blue - #b5e1e1
Yellow - #FDB813
Orange - #f15c22
Green - #afbd21
Brown - #4f3c26
Red - #ab3817
Teal - #56b7b4
Dark Teal - #0c5d72
Darker Blue - #1f3344
Darker Blue - #1f3344
 
Tints:

#b5e1e1
#bae3e3
#bfe5e5
#c4e7e7
#c9e9e9
#ceebeb
#FDB813
#fdbd23
#fdc132
#fdc642
#fecb52
#fed062
#F15C22
#f26731
#f3723f
#f47d4e
#f5875d
#f6926c
#afbd21
#becd24
#cada2b
#cedd3b
#d2e04b
#d6e25c
#4f3c26
#61492f
#725737
#846440
#967248
#a77f51

Page Elements

Left Content Box

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.
Biking
Biking

Right Content Box

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.

Content Column 1

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.

Content Column 2

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.

Images

Sponsors – Logos should be centered inside a 250 x 140px container.
Events & Activity Thumbnails – 800 x 600 px
Homepage Featured Teal Buttons – 800 x 453 px

Buttons & Links

Links

This is a Fancy Link
This is a bold Fancy Link .fancy-link

 

Event Filter Buttons

FILTER BY:
Red Button Small Red Button Red Button
.red-btn .red-btn .sm-btn .red-btn .lg-btn
Orange Button   Small Orange Button   Large Orange Button
.orange-btn .orange-btn .sm-btn .orange-btn .lg-btn

Icons

.icon-tw
.icon-fb
.icon-insta

Tables

.default-table
Heading Heading Heading Heading
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
  .hours-table
Heading Heading Heading Heading
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
  .schedule-table
Heading Heading Heading Heading
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content

Accordion

This is an accordion

This is a simple accordion implementation, that's uses minimal markup and roughly 8 lines of jQuery. It can be easily hacked to use different behavior. Chevrons are font awesome but easily replaced with anything.

Another Tab

This is a play on an ultra lightweight accordion menu.

News Releases

Vivamus facilisisnibh scelerisque laoreet.

Columns / Grids

2 Column Layout

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei.
Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei.
 

3 Column Layout

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei.
Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei.
Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei.
 

4 Column Layout

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium.
Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium.
Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium.
Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium.
 

Columns

.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3