Introduction

The purpse of this styleguide is to create a living, organic document that centralizes the design principles, guidelines and best practices for all Coastal Environmental Observation Technology and Research properties. As CEOTR continues to grow, the challange will be to maintain a constent and unified experience. This guide includes snippets of front-end code for many elements including typography, colour and buttons. All members of CEOTR will have this guide available to them and are encouraged to keep it up-to-date.

Goals

Unify the design across all CEOTR properties to creating a singluar, strong brand on the web and print.

Simplify the design process down to base elements which can be interchanged from one property to another.

Decrease the development time of a product by having predfined, high quality pieces of code available for each project.

Design

Typography

Typeface

The primary typeface for CEOTR is Nunito, served by Google fonts. You will rarely have to actually use this inline or in CSS, however, the options is there for you with font-family-nunito.

Aa
font-weight-regular
Aa
font-weight-light
Aa
font-weight-bold
Aa
fontStyle-italic

The secondary typeface is Roboto Mono. Because this is a secondary typeface, there is only one regular style available $font-family-roboto with a default font weight of 400.

Aa
font-family-roboto

Font Size

Typography is the art of making written language beautiful

font-size-xxxl

Typography is the art of making written language beautiful

font-size-xxl

Typography is the art of making written language beautiful

font-size-xl

Typography is the art of making written language beautiful

font-size-l

Typography is the art of making written language beautiful

font-size-m

Typography is the art of making written language beautiful

font-size-s

Typography is the art of making written language beautiful

font-size-xs

Typography is the art of making written language beautiful

font-size-xxs

Colour

$primary-light #97b9d6
$primary #426b8e
$primary-dark #152d42
$black #020b13
$white #ffffff
$success #508249
$success-light #c6dfc2
$warning #eea839
$warning-light #ffe1b3
$alert #bf455c
$alert-light #fecfd8
$greyscale-1 #34393c
$greyscale-2 #565b5e
$greyscale-3 #84898d
$greyscale-4 #a6acaf
$greyscale-5 #d3d9dc
$greyscale-6 #e9eef0
$greyscale-7 #f6f9fa

Components

Buttons

.btn
.btn .btn-light
.btn .btn-outlined
.btn .btn-inactive
.btn .btn-danger

Form Elements

Input fields

Unless otherwise noted, input fields do not need any class associated with them. For example, for a text field all you need is ‹input type="text" /› and it will be styled for you.


‹input type="text" placeholder="text-box" /›

‹input type="number" placeholder="11" /›

‹input type="email" placeholder="your@email.address" /›

‹input type="password" placeholder="enter password" /›

‹textarea placeholder="Comments..."›‹/textarea›

‹input type="submit" value="Submit form" class="btn btn-blue"›

Option Menu


‹select›
   ‹option value="" selected disabled›Which movie is the best?‹/option›
   ‹option›Pulp Fiction‹/option›
   ‹option›Star Wars‹/option›
   ‹option›Gattaca‹/option›
   ‹option›Back to the Future‹/option›
   ‹option›The Matrix‹/option›
   ‹option›Idiocracy‹/option›
   ‹option›Predator‹/option›
‹/select›

Multiple Option Menu


‹select multiple›
   ‹option value="" disabled›Which fruits are tasty?‹/option›
   ‹option›Apples‹/option›
   ‹option›Grapes‹/option›
   ‹option›Watermelon‹/option›
   ‹option›Oranges‹/option›
   ‹option›Pears‹/option›
   ‹option›Peaches‹/option›
   ‹option›Avocados‹/option›
   ‹option›Pinnaple‹/option›
   ‹option›Mangos‹/option›
‹/select›

Radio Selection

Which hockey team is the best?

‹div class="radio"›
   ‹p›Which hockey team is best?‹/p›
   ‹ul›
      ‹li›
         ‹input type="radio" name="radio" value="montreal" id="montreal" checked›
         ‹label for="montreal"›Montreal Canadiens‹/label›
      ‹li›
         ...etc...
      ‹/li›
      ‹/li›
   ‹/ul›
‹/div›

Checkbox Selection

Which Avengers do you like?

‹div class="checkbox"›
   ‹p›What is your favourite city?‹/p›
   ‹ul›
      ‹li›
         ‹input type="checkbox" name="checkbox" value="montreal" id="montreal"›
         ‹label for="montreal"›Montreal‹/label›
      ‹li›
         ...etc...
      ‹/li›
      ‹/li›
   ‹/ul›
‹/div›

Form validation


‹input type="text" ng-required="true" /›

‹select ng-required="true"›...‹/select›
‹div>
  ‹input type="radio" name="radio" value="1" id="radio-1" ng-required="true"›
  ‹label for="radio-1"›Must‹/label›
‹/div>
...etc...
Custom validation message
...custom input...
‹div class="validation-error"›Custom validation message‹/div›

Tables

Name Team Goals Assists Points Position
Nikita Kucherov Tampa Bay Lightning 38 83 121 Right Wing
Connor McDavid Edmonton Oilers 39 73 112 Centre
Patrick Kane Chicago Blackhawks 41 61 102 Right Wing
Leon Draisaitl Edmonton Oilers 46 53 99 Centre
Brad Marchand Boston Bruins 34 63 97 Left Wing
‹div class="table"›
   ‹thead›
      ‹tr›
         ‹th›Name‹/th›
         ‹th›Team‹/th›
         ‹th›Goals‹/th›
         ‹th›Assists‹/th›
         ‹th›Points‹/th›
         ‹th›Position‹/th›
      ‹/tr›
   ‹/thead›
   ‹tbody›
      ‹tr›
         ‹td›Nikita Kucherov‹/td›
         ‹td›Tampa Bay Lightning‹/td›
         ‹td›38‹/td›
         ‹td›83‹/td›
         ‹td›121‹/td›
         ‹td›Right Wing‹/td›
      ‹/tr›
      ...etc...
   ‹/tbody›
‹/div›

Layout

Coming soon...