Fasera - 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.
Naming - Sizes
Please use the short hand size naming convention as below:
sm, md, lg, xl, 2xl
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
- Apply in HTML using a class name
.color-white.bg-white - or in SCSS using the
color__fuctioncolor: color__(white); - or in CSS with a CSS Variable
color: var(--color-white);
Typography
Display Styles
Display 1
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 2
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 4
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 5
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 6
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 7
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 8
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 9
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 10
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 11
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 12
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 13
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 14
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 15
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 16
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 17
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 18
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Display 19
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.
Body Styles
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Buttons
You can dump an ACF link field straight into the first argument if you wish to output a button easily.
component_button( get_field('link') );
Links
You can dump an ACF link field straight into the first argument if you wish to output a link easily.
component_button( get_field('link'), 'c-link-1' );