Design System - The Mad Foodies

The Mad Foodies — 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

  • Apply in HTML using a class name .color-white .bg-white
  • or in SCSS using the color__ fuction color: color__(white);
  • or in CSS with a CSS Variable color: var(--color-white);

Typography

Display Styles

.f-display-1

Display 1

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

.f-display-1 .color-primary .bg-black

Display 1

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

.f-display-2

Display 2

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

.f-display-3

Display 3

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

.f-display-4

Display 4

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

.f-display-5

Display 5

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

.f-display-6

Display 6

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

.f-display-7

Display 7

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

.f-display-8

Display 8

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

.f-display-9

Display 9

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

.f-display-10

Display 10

Heading 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

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.

Icons

Usage

Component Inline Icon with Classes and Accessibility Tags

Used in conjuction with:

component_button();

				
				// Source: "assets/img/inline-icon-external-link.svg.php".
				component_icon( 'external-link', 'icon--currentColor color-primary' );
				
			

Raw SVG from SVG File

				
				// Source: "assets/img/icons/icon-external-link.svg".
				render_svg( 'icon-external-link' );
				
			

Raw SVG from Template File

				
				// Source: "assets/img/inline-icon-external-link.svg.php".
				get_template_part( 'assets/img/inline', 'icon-external-link.svg' );
				
			

Buttons

These buttons use .theme-{color-name} and .theme-outline-{color-name}.

c-button--sm

Button

c-button--giant

Button Button Button Button Button

This button is a button element instead of an a. It has no href, rel, or target.

This button is a div element instead of an a. It has no href, rel, or target.

Button

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') );
	

This would be the equivelant of doing:

		
		component_button(
			array(
				'title'   => 'Button',
				'url'     => 'https://google.com',
				'target'  => '_blank',
			)
		);
		
	

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' );
	

Space and Gaps

Spacers

Spacers are fixed and should be used for layouts: external spacing and gutters.

See Bootstrap 5.2 Spacing

See $spacers in _layout-settings.scss

Gaps

Gaps are relative to font-size and are used with .l-stack

See $gaps in _layout-settings.scss

Labels / Tags

Customer Favourite New
Customer Favourite New
Customer Favourite New
Customer Favourite New

Basics

Boxes and Colors

Colors further down the chain take precedence otherwise they will inherit the parent color.

Boxes have padding on all sides and usually have different padding at different screen sizes. Inline Bootstrap style equivalent would be
class="p-16 p-lg-32 p-xl-64"
or whatever combination you might need.

Below are two example boxes but customise everything to suit the design you are working on in layout/_box.scss

.box-1 .l-stack .color-[color] .bg-[color]

Lorem Ipsum Dolar Sit Emit

Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio dui.

Sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio.

.box-2 .l-stack .color-[color] .bg-[color]

Lorem Ipsum Dolar Sit Emit

Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio dui.

Sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio.

Images

Image that loads no fallback and revealing the .bg-loading.

You'll need to add an image and update the ID to see this working properly.


<?php $image_args = array (
  
'id' => '26',
  
'size' => 'medium',
  
'classes' => 
  array (
    
=> 'first-class',
    
=> 'second-class',
  ),
); 
?>

Image that fails to load no fallback and revealing the .bg-loading.

You'll need to add an image and update the ID to see this working properly.


<?php $image_args = array (
  
'id' => '0000',
  
'size' => 'medium',
  
'classes' => 
  array (
    
=> 'first-class',
    
=> 'second-class',
  ),
); 
?>

Image that doesn't exist with fallback .c-no-image.


<?php $image_args = array (
  
'id' => '0000',
  
'size' => 'medium',
  
'fallback' => true,
  
'fallback_type' => 'event',
); 
?>

Containers

Containers use a max width. The wrapper around it is what will create the outside gutter; this helps to isolate max width and the gutter to avoid doing math.

Set the default max width using $container-max-widths in sass/variables-settings/_layout-settings.scss

Containers with .l-stack-containers

A standard container. .l-container

A standard container. .l-container-1

.l-container-grid

.l-container-grid--breakout-start

.l-container-grid--breakout-end

100% wide until small breakpoint - padded wrapper for gutters.
100% wide until extra extra large breakpoint - no padded wrapper.

Containers with Layouts and .bg-color and .l-stack-containers

100% wide until extra extra large breakpoint
100% wide until extra extra large breakpoint
100% wide until extra extra large breakpoint
100% wide until extra extra large breakpoint
100% wide until extra extra large breakpoint - .max-w-640

Cards

Card - Food

Card - Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur porttitor posuere. Nam vestibulum nunc vitae nibh pharetra gravida. Nam non lorem erat.
A Mad Foodie

Card - Location

IGA Wembley Downs

848 Canning Hwy, Applecross, WA, Australia
View on Map

Message

Low Carb Life Hacks

Curry in a hurry can still be healthy! Pair this with cauliflower rice for a lower carb option thats still equally yummy.

Form to Action

Mad Foodies news, inspo & tips straight to your inbox

Sign up to our newsletter for exclusive access to new meal launches and more!

Accordions

Maecenas faucibus mollis interdum. Nullam id dolor id nibh?

Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Maecenas faucibus mollis interdum. Nullam id dolor id nibh?

Maecenas faucibus mollis interdum. Nullam id dolor id nibh?

Products

Splits

Our Mad Mission

Inspiring a healthier and happier Australia

By providing nutritious, healthy, low-carb ready-made meals that don’t compromise on taste.

Maecenas faucibus mollis interdum. Nullam id dolor id nibh?

Faucibus mollis interdum. Nullam id dolor id nibh?

Mollis interdum. Nullam id dolor id nibh?

Our Mad Mission

Inspiring a healthier and happier Australia

By providing nutritious, healthy, low-carb ready-made meals that don’t compromise on taste.

I am a(Required)

Become a stockist

We partner with quality supermarkets and convenience stores to bring customers fresh, nutritious meals. Find out more about joining The Mad Foodies retail family below.

Find us in store

Stocked nation-wide, find your nearest store using our interactive map!

Can’t find us in your store?

Speak to your local store manager for more information or send us the name of the store or venue you’d like to see stocking The Mad Foodies, and we’ll get onto it!

Please include suburb or exact store name so we can reach out to them directly!

Split Tabs

Scientific Integrity

1 Our products are developed by a team of food scientists and nutritionists, who are dedicated to creating delicious, nutritious and sustainable food products. We are committed to using only the highest quality ingredients, and we never use artificial preservatives, colours or flavours.

Please include suburb or exact store name so we can reach out to them directly!

Convenient Quality

2 Our products are developed by a team of food scientists and nutritionists, who are dedicated to creating delicious, nutritious and sustainable food products. We are committed to using only the highest quality ingredients, and we never use artificial preservatives, colours or flavours.

Please include suburb or exact store name so we can reach out to them directly!

Flavourful Fun

3 Our products are developed by a team of food scientists and nutritionists, who are dedicated to creating delicious, nutritious and sustainable food products. We are committed to using only the highest quality ingredients, and we never use artificial preservatives, colours or flavours.

Please include suburb or exact store name so we can reach out to them directly!

Point of Sale

4 Our products are developed by a team of food scientists and nutritionists, who are dedicated to creating delicious, nutritious and sustainable food products. We are committed to using only the highest quality ingredients, and we never use artificial preservatives, colours or flavours.

I am a(Required)

Data Spotlight

Did you know?

1.3 Million

Australian adults have diabetes

Check our sources

of all Australian adults are overweight or obese

Check our sources

Testimonials

Testimonials

Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur porttitor posuere. Nam vestibulum nunc vitae nibh pharetra gravida. Nam non lorem erat. Aliquam erat volutpat. In non semper eros. Curabitur ac ante justo. Vestibulum non tempus nunc. Etiam at finibus purus. Nam nibh nulla, mattis eget mauris et, imperdiet semper turpis. Vestibulum pharetra libero ipsum, non pharetra lectus condimentum et. Integer pellentesque faucibus massa sit amet accumsan.

Jane Doe

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.

John Doe

Articles

Components

  • Nutritious

    Meals you can trust

  • Delicious

    Flavourful and hearty

  • Convenient

    Ready in just 4 minutes

  • Exclusive

    To retail

  • Long Shelf Life

    30+ days from manufacture

  • Nutritious

    Science-backed

Mad about delicious. Low-carb nutritious.

Completely unique, genuinely healthy. Call us mad, but shouldn't this be on your shelf?

Our Mad Mission

Inspiring a healthier and happier Australia

By providing nutritious, healthy, low-carb ready-made meals that don’t compromise on taste.

Maecenas faucibus mollis interdum. Nullam id dolor id nibh?

Faucibus mollis interdum. Nullam id dolor id nibh?

Mollis interdum. Nullam id dolor id nibh?

Our Mad Mission

Inspiring a healthier and happier Australia

By providing nutritious, healthy, low-carb ready-made meals that don’t compromise on taste.

I am a(Required)

Can’t find us in your store?

Speak to your local store manager for more information or send us the name of the store or venue you’d like to see stocking The Mad Foodies, and we’ll get onto it!

Please include suburb or exact store name so we can reach out to them directly!

Layouts

Layouts are more than likely going to sit inside a .container.

These would ideally be written in CSS so that they can be tweaked easily but they can also be built using Bootstrap which is baked in.

Cluster

The Cluster explained on Every Layout.

Split

Generally these stack on mobile but you could make a variation if you'd like.

This currently doesn't work with the Boostrap .gap- utility.

.l-split-1:1
.l-split-2:3 gap variations
.l-split-2:3 gap variations example content

Lorem Ipsum Dolar Sit Emit

Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio dui.

Sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio.

Videos

Streaming Video

Bootstrap 5.2.3 Kitchen Sink

If this looks absolutely butchered GOOD! Not all modules are on and not all should be. Check the items that you're using and ignore the rest.

Contents

Typography

Documentation

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.


A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they're displayed inline.

Images

Documentation
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

Tables

Documentation
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Figures

Documentation
Placeholder 400x300
A caption for the above image.

Forms

Overview

Documentation
We'll never share your email with anyone else.
Radios buttons

Disabled forms

Documentation
Disabled radios buttons

Sizing

Documentation

Input group

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

Validation

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Components

Accordion

Documentation

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Documentation

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Buttons

Documentation
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Popovers

Documentation

Scrollspy

Documentation

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Third heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fourth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fifth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Spinners

Documentation
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Toasts

Documentation

Tooltips

Documentation