Ningaloo Eclipse - Design System 🎨

Welcome

This is the design system where we can talk about the language of the website. This area is really an open canvas to test out anything that will work on the rest of the site.

Colors

Background Colors

.bg-primary-060
.bg-primary-161
.bg-primary-1e1
.bg-primary-222
.bg-primary-373
.bg-primary-727
.bg-primary-9b9
.bg-primary-cdc
.bg-primary-e5e
.bg-primary-f2f
.bg-secondary-0a0
.bg-accent-2e2
.bg-accent-444
.bg-accent-696
.bg-accent-8e8
.bg-accent-b4b
.bg-accent-d9d
.bg-accent2-aca
.bg-black
.bg-grey-585
.bg-grey-707
.bg-white
.bg-white-f7

Text Colors

.color-primary-060

Well colour me primary-060!

.color-primary-161

Well colour me primary-161!

.color-primary-1e1

Well colour me primary-1e1!

.color-primary-222

Well colour me primary-222!

.color-primary-373

Well colour me primary-373!

.color-primary-727

Well colour me primary-727!

.color-primary-9b9

Well colour me primary-9b9!

.color-primary-cdc

Well colour me primary-cdc!

.color-primary-e5e

Well colour me primary-e5e!

.color-primary-f2f

Well colour me primary-f2f!

.color-secondary-0a0

Well colour me secondary-0a0!

.color-accent-2e2

Well colour me accent-2e2!

.color-accent-444

Well colour me accent-444!

.color-accent-696

Well colour me accent-696!

.color-accent-8e8

Well colour me accent-8e8!

.color-accent-b4b

Well colour me accent-b4b!

.color-accent-d9d

Well colour me accent-d9d!

.color-accent2-aca

Well colour me accent2-aca!

.color-black

Well colour me black!

.color-grey-585

Well colour me grey-585!

.color-grey-707

Well colour me grey-707!

.color-white

Well colour me white!

.color-white-f7

Well colour me white-f7!

Typography

Display Styles

.f-display-1

Display 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-2

Display 2

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-3

Display 3

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-4

Display 4

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-5

Display 5

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-6

Display 6

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-7

Display 7

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-7a

Display 7a

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-special

Display Special

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

Body Styles

.f-body-large

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-1 .color-grey-585

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-2

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-2

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-3 .color-grey-585

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Icons / Graphics

Dark Background .c-icon
Light Background .c-icon
Light Background .c-icon

Buttons / Links

Call to Action

CTA box 1 Lorem ipsum amet, consectetur adipisicing elit sedo eiusmod tempor incididunt ero.

CTA box 2 Lorem ipsum amet, consectetur adipisicing elit sedo eiusmod tempor incididunt ero.

Message

Warning Message

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

Information Message

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

Positive/Success Message

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

Timer

Page Header

Design System

Alert

If you see nothing here clear your cookies.

Alert Box Ex #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Alert Box Ex #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Alert Box Ex #3

No close lorem ipsum dolor sit amet, consectetur adipisicing elit.

Menus

Example Page

Look at these colours you know and love!

Helper Functions

Array argument validation is_arg() and get_arg()

This is great to help you pass functions between template parts.

e.g. get_template_part('template-parts/component','animals', $animals_args);

Template Part - section-zoo.php

/*------------------------------------*\
	# EXAMPLE ARRAY
\*------------------------------------*/

$animal_args = array(
	'animals' => array('dog', 'deer', 'cat'),
	'title' => get_field('title'),
	'sub_title' => 'Animals'
);

get_template_part('template-parts/component','animals', $animals_args);

Template Part - component-animals.php

/*------------------------------------*\
	# EXAMPLE OUTPUT
\*------------------------------------*/

$is_title     = is_arg('title', $args); // This will return false because get_field('title') doesn't exist.
$is_nothing   = is_arg('something', $args); // This will return false.
$is_animals   = is_arg('animals', $args); // This will return truthy as an array.

$sub_title = get_arg('sub_title', $args); // This will return 'Animals'.

$animals = get_arg('animals', $args);

if($animals && is_array($animals) ) {
	foreach( $animals as $animal ) {
		echo $animal;
	}
}

Attribute output from associative array get_attributes()

This is used in component_button() to add more attributes that don't have specific arguments.

$attributes = array(
	'data-url' => 'http://lateralaspect.com.au',
	'data-id' => 'latasp',
);

get_attributes( $attributes );

Returns: data-url="http://lateralaspect.com.au" data-id="latasp"
Published on: 2022-03-02