Styleguide





About this website

This website was proudly designed, developed and loved into creation in the amazing Great Southland of Australia by an Aussie web design studio:

Bass Coast Design

100% Handmade and hand-coded, painstakingly stitched together with Html, LESS CSS, Javascript, Responsive Web Design, the absolutely amazing Statamic CMS, Bootstrap framework, Typekit, Font Awesome, Atom editor, Codekit, iTerm, Serif Affinity Designer & Photo, several 13" & 16" Macbook Pro's with multiple monitors and all of the upgrades - AND exceptional home roasted coffee thanks to a Behmor 1600 from CoffeeSnobs.

Love this site and want a website just as amazing? Contact Us...



Colours


Color 1 Color 2 Color 3 Color 4


Colour 1 100% 70% 50% 30% 20% 10% 5%

Colour 1 at 100%

Colour 1 at 70%

Colour 1 at 30%

Colour 1 at 10%

Colour 1 - Dark

Colour 2 100% 70% 50% 30% 20% 10% 5%

Colour 2 at 100%

Colour 2 at 70%

Colour 2 at 30%

Colour 2 at 10%

Colour 2 - Dark

Colour 2 - Light

Colour 3 100% 70% 50% 30% 20% 10% 5%

Colour 3 at 100%

Colour 3 at 70%

Colour 3 at 30%

Colour 3 at 10%

Colour 4 100% 70% 50% 30% 20% 10% 5%

Colour 4 at 100%

Colour 4 at 70%

Colour 4 at 30%

Colour 4 at 10%



Content Blocks


(regular text)

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a paragraph set to leading text.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

(text size small)

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(text size large)

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(text size extra large)

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Long headings

This is an h2 in long text lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non lectus id eros ornare mollis. Integer sagittis dolor ut nulla sodales, vitae blandit tellus tincidunt.

With some text lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non lectus id eros ornare mollis. Integer sagittis dolor ut nulla sodales, vitae blandit tellus tincidunt.

H3 looks like quisque nulla nisi, rhoncus sed varius vitae, ultricies quis purus. Mauris sed metus sit amet lacus ultricies accumsan auctor at enim. Morbi venenatis pretium cursus. Mauris ut varius turpis. Maecenas hendrerit justo a tortor rutrum consectetur.

With some morbi venenatis pretium cursus. Mauris ut varius turpis. Maecenas hendrerit justo a tortor rutrum consectetur. Quisque ac accumsan velit. Sed id purus auctor leo mattis semper. Curabitur a commodo mi. Suspendisse semper ac sem a iaculis.

The H4 is used a fair bit for quisque ac accumsan velit. Sed id purus auctor leo mattis semper. Curabitur a commodo mi. Suspendisse semper ac sem a iaculis.

Curabitur a commodo mi. Suspendisse semper ac sem a iaculis. Aenean malesuada fermentum libero non feugiat. Morbi porta nibh velit, in aliquet turpis lacinia semper.

Does anyone actually ever use H5s? I do not aenean malesuada fermentum libero non feugiat. Morbi porta nibh velit, in aliquet turpis lacinia semper.

Quisque ac accumsan velit. Sed id purus auctor leo mattis semper. Curabitur a commodo mi. Suspendisse semper ac sem a iaculis. Aenean malesuada fermentum libero non feugiat. Morbi porta nibh velit, in aliquet turpis lacinia semper.

This is a block colour test

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

Heading 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a test

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

Heading 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

NOTE: You may need to scroll the table below left/right for more information

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a block colour test

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

Heading 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a test

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

Heading 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est loutlinem.

NOTE: You may need to scroll the table below left/right for more information

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.