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
.bg-warning
.bg-emergency

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!

.color-warning

Well colour me warning!

.color-emergency

Well colour me emergency!

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-2b

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
Dark Background .c-icon
Flexi Icons .c-icon

Tags

c-tag
Music
Food & Wine

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.

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

Cards

Perth

Lorem ipsum dolor sit amet consectetur adipisicing elit

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

Event dates: -
Meta Misc

Lorem ipsum dolor sit amet consectetur adipisicing elit

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

West Philly

Dark Sky Festival Logo Dark Sky Festival Event
Event dates: -
Meta Misc

Lorem ipsum dolor sit amet consectetur adipisicing elit

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

West Philly

Type: Compact
Event dates: -
Meta Misc

Lorem ipsum dolor sit amet consectetur adipisicing elit

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

West Philly

Type: Compact
Dark Sky Festival Logo Dark Sky Festival Event
Event dates: -
Meta Misc

Lorem ipsum dolor sit amet consectetur adipisicing elit

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

West Philly

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.

Table Box

Type: '' (Default Dark)

Event Details

For all media enquiries please contact John Smith / Company Name.

when
time and date
where
Kalbarri
price
Money

For all media enquiries please contact John Smith / Company Name.

when
time and date
where
Kalbarri
price
Money
Type: Light

Tickets and more information

For all media enquiries please contact John Smith / Company Name.

Type: Dark

Tickets and more information

For all media enquiries please contact John Smith / Company Name.

Timer

Download

Title of the Download

External JPG file content summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur porttitor.

Download pdf (512KB)

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.

Alert Box Ex #3

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

Alert Box Ex #3

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

Internal Alerts

These are used in flexi fields.

Alert Box Ex #3

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

Alert Box Ex #3

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

Alert Box Ex #3

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

Maps

Info Windows

See: src/js/eclipse-map/src/index.html

Undefined Location Partial solar eclipse visible (92.58%)
  • Duration: 2 hrs, 57min 
  • Partial begins: 10:04:52 am
  • Maximum: 11:30:37 am
  • Partial ends: 1:02:30 pm
See animation of how it will look

See: FacetWP

Lorem ipsum dolor sit amet consectetur adipisicing elit

This event is part of Dark Sky Festival Logo


  • When: 12 Apr 2022 - 13 Apr 2022
  • Where: Kalbarri Skywalk
  • Price $1399 - $1444
More details

Menus

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