Hillarys Boat Harbour - Design System 🎨

Colors

Background Colors

.bg-white
.bg-white-f7f
.bg-grey-7c7
.bg-grey-575
.bg-black
.bg-blue-274
.bg-blue-005
.bg-blue-196
.bg-blue-337
.bg-blue-599
.bg-blue-689
.bg-blue-99b
.bg-blue-a1b
.bg-blue-ccd
.bg-blue-e5e
.bg-blue-f1f
.bg-blue-003
.bg-blue-004
.bg-yellow-f1b
.bg-yellow-ebc
.bg-yellow-fff
.bg-yellow-ba7
.bg-yellow-cb8
.bg-fringe-pink-f81

Text Colors

.color-white

Well colour me white!

.color-white-f7f

Well colour me white-f7f!

.color-grey-7c7

Well colour me grey-7c7!

.color-grey-575

Well colour me grey-575!

.color-black

Well colour me black!

.color-blue-274

Well colour me blue-274!

.color-blue-005

Well colour me blue-005!

.color-blue-196

Well colour me blue-196!

.color-blue-337

Well colour me blue-337!

.color-blue-599

Well colour me blue-599!

.color-blue-689

Well colour me blue-689!

.color-blue-99b

Well colour me blue-99b!

.color-blue-a1b

Well colour me blue-a1b!

.color-blue-ccd

Well colour me blue-ccd!

.color-blue-e5e

Well colour me blue-e5e!

.color-blue-f1f

Well colour me blue-f1f!

.color-blue-003

Well colour me blue-003!

.color-blue-004

Well colour me blue-004!

.color-yellow-f1b

Well colour me yellow-f1b!

.color-yellow-ebc

Well colour me yellow-ebc!

.color-yellow-fff

Well colour me yellow-fff!

.color-yellow-ba7

Well colour me yellow-ba7!

.color-yellow-cb8

Well colour me yellow-cb8!

.color-fringe-pink-f81

Well colour me fringe-pink-f81!

Typography

Headings

Display 1 .f-display-1

Display 1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 1b .f-display-1b

Display 1b Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 1 .f-display-1 .color-blue-004 .bg-blue-f1f

Display 1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

This is an example of how you apply colors.

Display 2 .f-display-2

Display 2 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 3 .f-display-3

Display 3 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 4 .f-display-4

Display 4 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 5 .f-display-5

Display 5 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 6 .f-display-6

Display 6 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

Display 7 .f-display-7

Display 7 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus. Ex sunt amet, minima delectus illo perferendis autem magni repellendus enim velit quam aliquam cupiditate doloremque!

General

Quote .f-quote-1
Quote Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex distinctio harum officia sunt soluta sed similique unde odit rem nisi minima numquam ab neque veniam asperiores, id omnis nulla officiis.
Large Body .f-body-1

Large Body Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex distinctio harum officia sunt soluta sed similique unde odit rem nisi minima numquam ab neque veniam asperiores, id omnis nulla officiis.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex distinctio harum officia sunt soluta sed similique unde odit rem nisi minima numquam ab neque veniam asperiores, id omnis nulla officiis.

Body .f-body-2

Body Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex distinctio harum officia sunt soluta sed similique unde odit rem nisi minima numquam ab neque veniam asperiores, id omnis nulla officiis.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex distinctio harum officia sunt soluta sed similique unde odit rem nisi minima numquam ab neque veniam asperiores, id omnis nulla officiis.

Small Body .f-body-3

Small body Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex distinctio harum officia sunt soluta sed similique unde odit rem nisi minima numquam ab neque veniam asperiores, id omnis nulla officiis.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex distinctio harum officia sunt soluta sed similique unde odit rem nisi minima numquam ab neque veniam asperiores, id omnis nulla officiis.

Containers

.l-container-5 ds-color-padding
.l-container-1 ds-color-padding
.l-container-1 ds-color-padding
.l-container-1 l-container-1--large bg-blue-f1f
.l-container-4 ds-color-padding
.l-container-1 ds-color-padding
.l-container-1 l-container-1--large ds-color-padding
.l-container-3 ds-color-padding
.l-container-3 bg-blue-004
.l-container-1 ds-color-padding
.l-container-5 ds-color-padding
.l-container-1 ds-color-padding

Icons

Default Colors .c-icon
Applied Colors .c-icon .icon--currentColor
Applied Colors .c-icon .icon--currentColor-stroke
Icon Containers .c-icon .icon--circle-flexy .bg-blue-a1b
Motifs

Most of these are just used in template parts.

Buttons

.c-button-1 .c-button-1b .c-button-1c .c-button-2 .c-button-3 Button with Icon .c-button-3 Arrow Button .c-button-1 .c-button-3 Button Link .c-button-link-1

This will inherit any colour you use.

.c-button-link-2

This one has set colours. However it will inherit direct class colours applied to it.

.c-button-link-1--tiny

This one has no set colours. It's just really small.

.c-button-link-circle Button Link Nude .c-button-nude Plus Minus Button .c-button-pm
Open / Close

Tags

.c-tag .l-cluster-small
Food & Drink Health & Beauty Accommodation See & Do Shopping Services & Specialties
.c-tag .c-tag--small .l-cluster-small
.c-tag .c-tag--nude
c-tag-cloud

A more complicated combination of components

Breadcrumbs

.c-banner

This relies on the SEO Press Pro plugin

Boxes

These are just padding sizes with breakpoints.

.c-box-1

This type is generally used for full width sections.

Example Box 1

And there’s lots to love about our exciting new website – coming soon!

In the meantime, stay up to date with what’s happening at the Harbour by subscribing to hear about our latest giveaways, upcoming events and heaps more!

Keep up to date
.c-box-2

This one is used for half width sections.

Example Box 2

Competion

Win a Weekend Escape to Hillarys

In the meantime, stay up to date with what’s happening at the Harbour by subscribing to hear about our latest giveaways, upcoming events and heaps more!

Enter Now

Dividers

This one is a horizontal rule that you can apply any background colour.

hr


Banners

.c-banner .c-banner .c-banner--compact END

Forms

Readable

The .o-readable class is to be used as a wrapper to make the text more legible.

This might include things like links having good hover styles.

This really applies a lot when you have no control over the content that is being inserted.



# Headings

Elements h1, h2, h3, h4, h5, h6 make up the heading content category.

h1 I am most important.

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox.

h4 Five or six big jet planes zoomed quickly by the new tower.

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
h6 Pack my box with five dozen liquor jugs.

# Sections

Elements article, aside, nav, section make up the sectioning content category.

This paragraph is nested inside an article element. It contains many different, sometimes useful, HTML5 elements. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation element: abbr. You can define deleted text which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp elements. Even more specifically, there is an element just for variables. Not to be mistaken with block quotes below, the quote element lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) elements.

This paragraph is contained in a section element of its parent article element.

↓ The following paragraph has the hidden attribute and should not be displayed. ↓

↑ The previous paragraph should not be displayed. ↑


# Phrasing

Elements abbr, b, bdi, bdo, br, cite, code, data, del, dfn, em, i, ins, kbd, mark, meter, progress, q, s, samp, small, span, strong, sub, sup, time, u, var, wbr, and others make up the phrasing content category.

abbr: Some vehicles meet the SULEV standard.
br was used to make this sentence start on a new line.

bdi: Some languages read right to left, مرحبا. bdo: The normal direction has been overridden.

em is used for emphasis and usually renders as italics, contrast that with i which is used for alternate voice or to offset from the normal (such as a phrase from a different language or taxonomic designation): E. coli can be bad. strong is used for importance or urgency and usually renders as bold, contrast that with b which is used to draw attention without the semantic meaning of importance.

cite: In the words of Charles BukowskiAn intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.

data can be used to specify 5 A.M. that is machine-readable, but time is a better choice for specifying in a machine-readable format.

del can be varily used to mark deletions. ins marks insertions. s: similar to del, but used to mark content that is no longer relevant. Windows XP version available. u: a holdover with no real meaning that should be removed. mark: the HTML equivalent of the yellow highlighter. span: a generic element with no meaning by itself.

dfn: Foreign phrases add a certain je ne sais quoi to one's prose.

q: The W3C page About W3C says the W3C’s mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

kbd and samp: I did this:

c:\>format c: /yes

Is that bad? Press Ctrl+F5 for a hard reload.

var: To log in, type ssh user@example.com, where user is your user ID.

meter and progress: Storage space usage: 6 blocks used (out of 8 total) Progress: 37%

sub is used for subscripts: H2O. sup is used for superscripts: E = MC2. small is used for side comments: I wrote this whole document. [Editor's note: no he did not] wbr: used to specify where a word may break and it is supercalifragilisticexpialidocious.

Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


# Palpable Content

Elements a, address, blockquote, button, details, dl, fieldset, figure, form, input, label, map, ol, output, pre, select, table, textarea, ul, and others make up the palpable content category.

a: Example.

address:

1 Infinite Loop
Cupertino, CA 95014
United States

blockquote:

I quickly explained that many big jobs involve few hazards

This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’tdone as the things I have done. Innovation is saying no to 1,000 things.

Steve Jobs, Apple Worldwide Developers’ Conference, 1997

details and summary:

Copying... 25%
Transfer rate:
452KB/s
Duration:
01:16:27
Color profile:
SD (6-1-6)
Dimensions:
320×240

dl:

Definition List Title
Definition list division.
Kitchen Sink
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
aside
Defines content aside from the page content
blockquote
Defines a section that is quoted from another source

figure:

Figure 1: A picture of Bill Murray from fillmurray.com


# Forms


ul and ol:

  • Unordered List item one
    • Nested list item
      • Level 3, item one
      • Level 3, item two
      • Level 3, item three
      • Level 3, item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

output:

+ =

pre:

    pre {
      display: block;
      padding: 7px;
      background-color: #F5F5F5;
      border: 1px solid #E1E1E8;
      border-radius: 3px;
      white-space: pre-wrap;
      word-break: break-all;
      font-family: Menlo, Monaco;
      line-height: 160%;
    }
You are in an open field west of a big white house with a boarded
    front door.
    There is a small mailbox here.

    > open mailbox

    Opening the mailbox reveals:
    A leaflet.

    >


# Tables


Tables can have captions now.
Person Number Third Column
Someone Lastname 900 Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name 1200 Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person 1500 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One 2800 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Characteristics with positive and negative sides
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing
Complex table with a thead, multiple tbody elements, and a tfoot.
2008 2007 2006
Net sales $32,479 $24,006 $19,315
Cost of sales 21,334 15,852 13,717
Gross margin $11,145 $8,154 $5,598
Gross margin percentage 34.3% 34.0% 29.0%

# Embeds

Elements audio, canvas, embed, iframe, img, math, object, picture, svg, video make up the embedded content category.

audio: By Cqdx [CC BY-SA 3.0 ], from Wikimedia Commons.

embed:

iframe:

img: Bill Murray

math:

Quadratic Equation x = - b ± b 2 - 4 a c 2 a

picture: Bill Murray

svg:

video:


Find this document on GitHub.

Discover

Seven is just a beautiful number here.

If you're not seeing a component here there may be no content. Might need to add some dummy content.

Harbour Information

.c-harbour-dropdown

Car

A table Caption
Header Header
Data Data

Sidecars

Sidecar .c-sidecar || Sidecar Mirrored .c-sidecar .c-sidecar--mirrored
Feature

April School Holidays

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut ero labore et dolore.

Find Out More
Feature

April School Holidays

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut ero labore et dolore.

Find Out More