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 {
    --brand-blue: #0044FF;
}
.brand-blue {
    color: var(--brand-blue);
}
.brand-blue_background {
    background-color: var(--brand-blue);
}

Color Variable Swatches

These are the example color variables used in this project.

Monotone Colors

Brand Colors

Border / Pattern Colors

Functional Colors

Buttons

Slick Slider Buttons

These are the slick slider buttons. Slick styles are located in css/slider/nw-slick.css
Slick arrow SVG files are located in css/slider/assets.

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

• 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

Sitewide Form Fields

The text field settings here will automatically overwrite the text and select fields across the site.
The radio buttons and checkboxes however are only targeting the WPCF7 classes.

CF7 Specific Style Overrides

Radio buttons & Checkboxes work off a two state SVG: selected or deselected.
SVG files for these are saved in css/forms/assets/checkbox and css/forms/assets/radio.
The acceptance fields by default have the checkbox selected and deselected SVG.

You have to copy the acceptance, radio and checkbox fields as they are in this theme for it to work properly with the CSS provided.

Key CF7 Field Markup/Shortcode

These are the key ways to build these inputs. All imputs will have a label wrapped around them for accessibility.
Some inputs require a particular few settings/ways of laying out code to achieve the effect desired with pre-written theme CSS.

<label>Text input field
[text* text-example placeholder "Placeholder text 1"]</label>

<label>Select input field
[select select-example "Option 1" "Option 2" "Option 3"]</label>

    <div class="col-12 mt2">
        [radio radio-example use_label_element default:1 "Radio Example 1" "Radio Example 2" "Radio Example 3"]
    </div>

    <div class="col-12 mb3">
        [checkbox checkbox-example use_label_element "Checkbox Example 1" "Checkbox Example 2" "Checkbox Example 3"]
    </div>

    <div class="col-12 col-md-8 mb3">
        [acceptance acceptance-example use_label_element] By submitting this form, I agree that the information entered will be used in the context of my request for information in accordance with the privacy policy, personal data and data protection.[/acceptance]
    </div>

    <div class="col-12">
        [submit "Submit"]
    </div>

    <div class="col-12">
        <button type="submit" class="wpcf7-form-control wpcf7-submit">This is a custom button, instead of default submit. This allows more animations/features with pseudo elements.</button>
    </div>
</div>

Gutenburg Blocks

Typical Block HTML

This is the typical HTML for a block when starting. Some blocks may differ slightly.

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

Block PHP Declaration

This is the way a Gutenburg block is declared in lib/blocks.php.
After a block is declared, it can then be assigned specific ACF fields.

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' => 'blocks/branding-testing/branding-testing.php',
            'render_script' => 'blocks/branding-testing/branding-testing.js',
        )
    );
}

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.

/* 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) */
}

/* 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) */
}