This is the Gray Materials design system document.

Go to blocks download page Download Newwave theme ZIP folder

Colors

Color CSS Convention

Colors are defined in css/colors.css
Colors differ project to project, but color classes should be declared similarly throughout projects.
All color variables should be defined with a variable inside of :root, plus a class outside of root with _background following the variable name.
This allows easy color and background-color assignments throughout if needed, in both CSS and HTML.

:root {
    --orange-peel: #f49b02;
}
.orange-peel {
    color: var(--orange-peel);
}
.orange-peel_background {
    background-color: var(--orange-peel);
}
Color Variable Swatches

These are the example color variables used in this project.

Monotone Colors

Tint Colors

Brand Colors

Buttons

Buttons Folder Convention

Button CSS is situated in the theme folder location css/buttons.
Button icons are situated in the theme folder location css/buttons/assets.
Button icons have their own folders with their own icon files, e.g. css/buttons/assets/tertiary/blue_arrow.svg.
This keeps all of the icons close to the buttons CSS for easy editing.

Buttons ACF Function

The buttons function is defined in the theme folder location lib/elements.php.
The fields need to be cloned from Elements - Buttons in ACF.
The field prefix needs to be added to the cloned field in the block and inside the brackets in the get_buttons(); function.

<?php get_buttons('branding_testing_buttons');?> Export Buttons ACF Fields
ACF Clone Function Buttons

These buttons are defined in the ACF clone function for use over multiple blocks.

Primary OrangePrimary OnyxSecondary OrangeSecondary GreyDownload
Extra Buttons Styles

These are extra modifying classes for hardcoded buttons you may use in the site.

Default System Buttons

These buttons styles are the default, when no modifying classes are applied.
These will inherit primary button styles.

This is a garden variety hyperlink in a paragraph/wysiwyg.

Body Styles

Font Declarations

Fonts are preferred to be declared in the <head> tag for speed reasons.
Please add the font weights in comments in the top of the fonts.css file, so developers can easily add weights throughout the project.

/*** Rigid Square - Font Weights ***/
/*
font-family: rigid-square, sans-serif;
Thin - 100
Extra Light - 200
Light - 300
Regular - 400
Semi Bold - 600
Bold - 700
Extra Bold - 800
 */


/*** Auger Mono - Font Weights ***/
/*
font-family: auger-mono, monospace;
Extra Light - 200
Light - 300
Regular - 400
Medium - 500
Bold - 700
Black - 900
 */

Heading 1 – Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula nisl, condimentum id gravida sit amet, sagittis id justo. In volutpat elit at egestas pretium. Quisque sagittis quam sed sem pharetra rhoncus. Donec vestibulum at risus vel laoreet. Mauris sit amet sapien sit amet augue mattis suscipit. Mauris facilisis venenatis libero, convallis viverra massa vestibulum eu. In eu ex enim. Mauris ut lectus auctor, euismod purus vitae, molestie arcu. Duis sit amet elementum diam. Quisque vitae massa eget quam egestas accumsan.

Heading 2 – Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula nisl, condimentum id gravida sit amet, sagittis id justo. In volutpat elit at egestas pretium. Quisque sagittis quam sed sem pharetra rhoncus. Donec vestibulum at risus vel laoreet. Mauris sit amet sapien sit amet augue mattis suscipit. Mauris facilisis venenatis libero, convallis viverra massa vestibulum eu. In eu ex enim. Mauris ut lectus auctor, euismod purus vitae, molestie arcu. Duis sit amet elementum diam. Quisque vitae massa eget quam egestas accumsan.

Heading 3 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula nisl, condimentum id gravida sit amet, sagittis id justo. In volutpat elit at egestas pretium. Quisque sagittis quam sed sem pharetra rhoncus. Donec vestibulum at risus vel laoreet. Mauris sit amet sapien sit amet augue mattis suscipit. Mauris facilisis venenatis libero, convallis viverra massa vestibulum eu. In eu ex enim. Mauris ut lectus auctor, euismod purus vitae, molestie arcu. Duis sit amet elementum diam. Quisque vitae massa eget quam egestas accumsan.

Heading 4 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula nisl, condimentum id gravida sit amet, sagittis id justo. In volutpat elit at egestas pretium. Quisque sagittis quam sed sem pharetra rhoncus. Donec vestibulum at risus vel laoreet. Mauris sit amet sapien sit amet augue mattis suscipit. Mauris facilisis venenatis libero, convallis viverra massa vestibulum eu. In eu ex enim. Mauris ut lectus auctor, euismod purus vitae, molestie arcu. Duis sit amet elementum diam. Quisque vitae massa eget quam egestas accumsan.

Heading 5 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula nisl, condimentum id gravida sit amet, sagittis id justo. In volutpat elit at egestas pretium. Quisque sagittis quam sed sem pharetra rhoncus. Donec vestibulum at risus vel laoreet. Mauris sit amet sapien sit amet augue mattis suscipit. Mauris facilisis venenatis libero, convallis viverra massa vestibulum eu. In eu ex enim. Mauris ut lectus auctor, euismod purus vitae, molestie arcu. Duis sit amet elementum diam. Quisque vitae massa eget quam egestas accumsan.

Normal body text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr Normal hyperlink

Italic <em> body text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr Normal hyperlink

Bold <bold> body text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr Normal hyperlink

Strong <strong> body text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr Normal hyperlink

p.quote-text

p.fine-print

p.subheading

p.subheading.uppercase

h3.hire-title

h3.hire-title.alt

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  • Unordered list item 5
  • Unordered list item 6
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4
  5. Ordered list item 5
  6. Ordered list item 6

Form Styles

      Gutenburg Blocks

      <div id="<?php echo $block['id']?>" class="relevant_name block">
    <div class="container-fluid">
        <div class="container container-padding">
            <div class="row">
                <div class="col-12 col-lg-10 offset-lg-1">
                </div>
            </div>
        </div>
    </div>
</div>

      if( function_exists('acf_register_block_type') ) {
    acf_register_block_type(
        array(
            'name' => 'branding-testing',
            'title' => __('Branding Testing'),
            'description' => __('Branding Testing'),
            'render_callback' => 'my_acf_block_render_callback',
            'category' => 'block-testing',
            'align' => 'wide',
            'mode' => 'preview',
            'icon' => '',
            'keywords' => array('Branding Testing'),
            'render_template' => array('blocks/branding-testing/branding-testing.php'),
        )
    );
}

      function enqueue_block_styles() {
    $template_url = get_template_directory_uri();
    wp_enqueue_style( 'branding-testing-style', $template_url . '/blocks/branding-testing/branding-testing.css' );
}

      /*** Enabling only blocks needed ***/
add_filter( 'allowed_block_types', 'disable_default_gutenberg_blocks' );

function disable_default_gutenberg_blocks( $allowed_blocks ) {
    return array(
        'acf/branding-testing',
    );
}

      Grid System

      Container Conventions

      Between projects we have three types of containers: .container, .container-fluid and .container-padding.
      Container values are defined in css/main.css.

      .container-fluid

      Container fluid is a parent class assigned to a div inside all blocks.
      It is usually either set to a max-width of 1920px or 100% for each project by default, but can be changed to anything.
      This ensures all of the web elements are constrained to a specified max-width and easily changed.

      .container

      Container is usually set to 1366px max-width.
      Inside this container, usually blocks adhere to a col setting/offset of col-12 col-lg-10 offset-lg-1.
      This ensures blocks do not touch the sides of the viewport on larger screens.

      .container-padding

      Container padding kicks in on at @media(max-width: 991.98px). This ensures the gutter size for text for blocks underneath large viewports.

      <div class="container-fluid">
    <div class="container container-padding">
        <div class="row">
            <div class="col-12 col-lg-10 offset-lg-1">
            </div>
        </div>
    </div>
</div>

      Responsive Breakpoints

      Bootstrap breakpoints are used for responsive and deviation from these is to be avoided much as possible.

      @media(max-width) Breakpoints:
      /* XX-Large devices (larger desktops) */

@media(max-width: 1399.98px) {
    /* xl breakpoint */
    /* X-Large devices (large desktops, less than 1400px) */
}

@media(max-width: 1199.98px) {
    /* lg breakpoint */
    /* Large devices (desktops, less than 1200px) */
}

@media(max-width: 991.98px) {
    /* md breakpoint */
    /* Medium devices (tablets, less than 992px) */
}

@media(max-width: 767.98px) {
    /* sm breakpoint */
    /* Small devices (landscape phones, less than 768px) */
}

@media(max-width: 575px) {
    /* xs breakpoint */
    /* X-Small devices (portrait phones, less than 576px) */
}
      @media(min-width) Breakpoints:
      /* XS-Small devices (mobile phones) */

@media(min-width: 576px) {
    /* sm breakpoint */
    /* Small devices (landscape phones, less than 768px) */
}

@media(min-width: 768px) {
    /* md breakpoint */
    /* Medium devices (tablets, less than 992px) */
}

@media(min-width: 992px) {
    /* lg breakpoint */
    /* Large devices (desktops, less than 1200px) */
}

@media(min-width: 1200px) {
    /* xl breakpoint */
    /* X-Large devices (large desktops, less than 1400px) */
}

@media(min-width: 1400px) {
    /* xxl breakpoint */
    /* XX-Large devices (larger desktops) */
}
      Colors
      Color CSS convention Color variable swatches
      Buttons
      Buttons folder convention Buttons ACF function & export Button styles
      Body styles
      Font declarations Headings Body text
      Form styles Grid System
      Container conventions Bootstrap breakpoints