.icon
Coast Homes — Design System
🍱
Get Started
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.
Each section should be added to and expanded upon as the site evolves.
Naming - Sizes
Please use the short hand size naming convention as below:
sm, md, lg, xl, xxl
Example
.l-stack-sm
Helpful Design System Colours
Look in here!
Look at these colours you know and love from the inspector. You can use them in the design system to illustrate spacing in layouts.
This text is also inside an .l-stack
Check those out over in sass/layout/_stack.scss
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"
Colors
Usage
Typography
.f-display-f
Ultricies Fermentum Vestibulum Amet
.f-display-g
Ultricies Fermentum Vestibulum Amet
.f-display-g
.f-display-g .f-display-g--small
Ultricies Fermentum Vestibulum Amet
Smaller on small screens
.f-display-g
.f-display-g .f-display-g--xsmall
Ultricies Fermentum Vestibulum Amet
Smaller on all screens
.f-display-h
.f-display-h .f-display-h--small
Ultricies Fermentum Vestibulum Amet
Ultricies Fermentum Vestibulum Amet
.f-display-k
Ultricies Fermentum Vestibulum Amet
.f-display-l
Ultricies Fermentum Vestibulum Amet
.f-display-i
.f-display-i--light
.f-display-i--gold
Ultricies Fermentum Vestibulum Amet
Ultricies Fermentum Vestibulum Amet
Ultricies Fermentum Vestibulum Amet
.f-display-j
@see component-info-box-basic.php
Ultricies Fermentum Vestibulum Amet
This is almost identical to f-display-g consider reduction of styles.
.f-blockquote-text
.f-blockquote-text--small
Lorem ipsum dolor sit amet ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquare. Ut enim ad minim sit amet ectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquare. Ut enim ad minim sit amet ectetur adipisicing elit, sed do eiusmod tempor.
.f-copy-c
.f-copy-c
.f-copy-c--small
.f-copy-c
.f-copy-c--regular
Lorem ipsum dolor sit amet ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquare. Ut enim ad minim sit amet ectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquare. Ut enim ad minim sit amet ectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquare. Ut enim ad minim sit amet ectetur adipisicing elit, sed do eiusmod tempor.
.header-strikethrough
Header Strikethrough Using hX
.header-strikethrough
Header Strikethrough Using h4 (brittle)
Icons
Buttons
.post-navigation
@see content-custom_homes.php
.button
button();
Button
.button
.button--outline
button();
The full animated glory. Doesn't line up with the edge of columns well.
Button
.button-link
button_link();
The less glory outlined simple button.
Button Link
.button-link
.button-link--dark
button_link();
Compact less glamorous version. Used on dark backgrounds. Lines up nicely with the edge of columns.
Button Link
Used on light backgrounds.
Cards
.c-card
3
Meet & Greet Phase
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud.
Meet & Greet Phase
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud.
.c-card-slider
General
.single-collection
.info-box
.c-rooms
.c-rooms--dark
3
5
10
3
5
10
.c-box .c-box .c-box--tinted
.c-tag
.c-tag--light
.c-tag--dark
.c-tag--invert
.c-tag--disabled
.c-tag--small
.c-tag--white
.c-tag--invert .c-tag--bordered
.c-tag-b .c-tag--invert
.c-tag-b .c-tag--disabled
.c-tag-c &--invert &--bordered
.c-tag-c &--white &--bordered
.collection-item-container
.collection-item
.c-event-snippet
.c-icon-feature
component_person_small(); No Image
John Doe
Chief Exective Officer
With Image
John Do'ghands
Money Handler
.c-quote-block section-quote-block.php
Build with Coast Homes
Perth Custom Home Builders
As an owner of Coast Homes, I am totally committed to ensuring we provide our clients, you, with a standard of personal service, professional guidance and product excellence that is superior to any other in our market, or indeed, any market.
This is the Pre title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur assumenda asperiores iure incidunt suscipit. Dolore, obcaecati modi? Qui, et quos laborum quas repellendus mollitia! Velit incidunt dolorum at quasi delectus!
Component - Visual List
WHAT SETS US APART FROM ALL OTHER CUSTOM BUILDERS IN PERTH:
- We value having collaborative, personalised relationships
- We build great-looking homes that are affordable
- We value having collaborative, personalised relationships
- We build great-looking homes that are affordable
- We value having collaborative, personalised relationships
- We build great-looking homes that are affordable
So get in touch to discuss your ideas. We’re open to that.
.c-testimonial-block and .l-roomy-section-container--percy
Testimonials Title
.info-box
Heading Text
As a boutique home builder in Perth, we are open in our thinking and the way we deal with people and original in the way we design and build.
Button Text.l-roomy-section-container
.l-roomy-section-container--percy
Gallery Slider
Videos
<?php $video_background_args = array (
'sources' =>
array (
0 => 'https://player.vimeo.com/external/832177320.m3u8?s=ed54cc227ea70de3b56db9db878b6909bfe3f374&logging=false',
1 => 'https://player.vimeo.com/external/832177320.mpd?s=0d9f9166744e7f77854c10eebdbda2051cf88702&logging=false',
2 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/1080p/file.mp4?loc=external&log_user=0&signature=31edb4d82a61a872dbdc8176d2ffcf936faf63243f7f5363bf6c9e6b1524560a',
3 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/720p/file.mp4?loc=external&log_user=0&signature=238611fe8d357c3b9789aad93bc2bb17930aa2f1ddc37c44a9139cfb5cf7965b',
4 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/540p/file.mp4?loc=external&log_user=0&signature=60697274561df71babf17eab29a1d3cc533eda3038dfa14b8e93e2b2da9cc881',
5 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/360p/file.mp4?loc=external&log_user=0&signature=5c6b2841ed885acc1954d0176b14a96b52b56b94da6bec244570e5fdc9786a56',
6 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/240p/file.mp4?loc=external&log_user=0&signature=7897bd901c0fcf441fe9172b77dd043b2fb261f4526149075f723f9532687871',
),
); ?>
Component - Gfycat Output
Deprecated
Sidecar and Info Box
.c-sidecar
.c-sidecar
component-info-box-basic.php
New and improved
Our Coast team will keep you fully informed and engaged every step of the way through the design and build process, and are happy to work with any of your selected trades to ensure a smooth and stress-free ‘end to end’ building experience .
Button
.info-box
component-info-box-basic.php
The info-box has some interesting alignment that is reset here as an example.
New and improved
Our Coast team will keep you fully informed and engaged every step of the way through the design and build process, and are happy to work with any of your selected trades to ensure a smooth and stress-free ‘end to end’ building experience .
Button
.single-collection .info-box
component-info-box-collection.php
The Silkwood - From $971,052
206 Empire Avenue, Churchlands WA
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae diam e
4
3
2
Split Media
<?php $split_media_args = array (
'title' => 'From Concept to Completion',
'sub_title' => 'Building and Design',
'text' => '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget fermentum aliquam, augue nibh ultricies nunc.</p>',
'media_choice' => 'image',
'image' =>
array (
'id' => 365,
'size' => 'medium_large',
),
'button' =>
array (
'title' => 'Learn More',
'link' => '#',
'target' => '_blank',
),
); ?>
From Concept to Completion
Building and Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget fermentum aliquam, augue nibh ultricies nunc.
<?php $split_media_args = array (
'title' => 'From Concept to Completion',
'text' => '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget fermentum aliquam, augue nibh ultricies nunc.</p>',
'media_choice' => 'video-vimeo-background',
'video_sources' =>
array (
0 => 'https://player.vimeo.com/external/832177320.m3u8?s=ed54cc227ea70de3b56db9db878b6909bfe3f374&logging=false',
1 => 'https://player.vimeo.com/external/832177320.mpd?s=0d9f9166744e7f77854c10eebdbda2051cf88702&logging=false',
2 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/1080p/file.mp4?loc=external&log_user=0&signature=31edb4d82a61a872dbdc8176d2ffcf936faf63243f7f5363bf6c9e6b1524560a',
3 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/720p/file.mp4?loc=external&log_user=0&signature=238611fe8d357c3b9789aad93bc2bb17930aa2f1ddc37c44a9139cfb5cf7965b',
4 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/540p/file.mp4?loc=external&log_user=0&signature=60697274561df71babf17eab29a1d3cc533eda3038dfa14b8e93e2b2da9cc881',
5 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/360p/file.mp4?loc=external&log_user=0&signature=5c6b2841ed885acc1954d0176b14a96b52b56b94da6bec244570e5fdc9786a56',
6 => 'https://player.vimeo.com/progressive_redirect/playback/832177320/rendition/240p/file.mp4?loc=external&log_user=0&signature=7897bd901c0fcf441fe9172b77dd043b2fb261f4526149075f723f9532687871',
),
); ?>
From Concept to Completion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget fermentum aliquam, augue nibh ultricies nunc.
Plans and Specs
The Silkwood - 498,388
The Silkwood offers luxury, open-plan design and ample space for a family. It features a large guest bedroom, expansive kitchen/dining area, an alfresco, an above-ground pool with pacific bluestone tiles, a 5-star walk-in-robe/ensuite for the master, two extra bedrooms with a sitting room, and almost 372m2 living area total.
4
2
2
| Porch | 2.5m² |
| Garage | 11.0m² |
Text Slider
Text Split
From Concept to Completion
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exer citation ullamco esta nisi ut aliquip ex ea commodo esaconsequat duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exer citation ullamco esta nisi ut aliquip ex ea commodo esaconsequat duis aute irure dolor.“
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exer citation ullamco esta nisi ut aliquip ex ea commodo esaconsequat duis aute irure dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exer citation ullamco esta nisi ut aliquip ex ea commodo esaconsequat duis aute irure dolor.
Bento
Component Only
.c-bento
Bento Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exer citation ullamco esta nisi ut aliquip ex ea commodo esaconsequat duis aute irure dolor.
Component in Swiper
.c-bento .c-bento-swiperPopup Sticky
Enable the component on this page to see the sticky, it's too annoying to always be enabled.
Try our Design and Budget Calculator
Got some big ideas for building your dream home? Take a moment to play around with our free Design & Budget Calculator and receive an instant estimated price on your ideal custom build.