Skip to main content

(S)CSS

SCSS that is in the /src/scss/ directory should be global styling since the contents within will be loaded on all pages, unless specified.

Component related CSS should be placed within the component's directory within /components/componentName/.

📦 src
└─ scss
   ├─ admin - Admin styles
   ├─ base - Base styles
   ├─ blocks - Gutenberg Core Blocks
   ├─ components - Global components that are not specific to a component in the components directory.
   ├─ critical - Critical CSS
   ├─ global - Global tools, variables, mixins, etc.
   ├─ template-tags - Styling for template tags
   ├─ templates - Styling for page templates
   ├─ wordpress-global - Global WordPress styles
   ├─ admin.scss - Main admin styles
   ├─ critical.scss - Main critical styles
   └─ index.scss - Main frontend styles

Variables​

/src/scss/global/ is where all variables are stored. This is where you can set your colors, fonts, etc. for your project.

There should be nothing but variables and mixins in this directory.

Mixins​

Mixins are there but are of course optional to use.

@font-face generator​

This mixin will generate the @font-face css for you. It takes 3 arguments, the font-family, the font-weight, and the font-style. The font-weight and font-style are optional, and will default to normal if not specified.

Usage:

@include font-face('Font Name', '../path/to/font-light', 300 );
@include font-face('Font Name', '../path/to/font-light-italic', 300, italic, $exts: woff2 woff);

Output:

@font-face {
    font-family: 'Font Name';
    src: url('font-light.woff2') format('woff2'),
         url('font-light.woff') format('woff');
    font-display: swap;
    font-style: normal;
}

Font families​

Update @mixin sans() and @mixin serif() with your font families and available weights. Add more of these mixins or delete. These mixins will check to see if you're loading the weight that is specified, and if not, will alert you that it's not available.

This mixin includes a $print variable. Sometimes you don't need to output the family name in each selector, so you can set $print to false and it will only output the font-weight and font-style.

Usage:

@mixin sans($weight: 400, $style: normal, $print: true) {
    $available-weights: 400, 500;
    @if $print == true {
        font-family: 'Font Name', sans-serif;
    }
    font-style: $style;
    font-weight: valid-weight($available-weights, $weight);
}


@include sans(400);
@include serif(400);

Output:

font-family: 'Font Name', sans-serif;
font-weight: 400;

Fading in / out mixins​

These mixins are used to fade in or out an element.

Usage:

.element {
    @include fade-in(1s);
}
.element.is-hidden {
    @include fade-out(1s);
}

Placeholder input styling mixin​

This mixin is used to style the placeholder text in an input field.

Usage:

    .input {
        @include placeholder() {
            color: blue;
            opacity: 0.5;
        }
    }

Media Query Mixins​

These mixins are used to create media queries. The breakpoints are set in /src/scss/global/_media-queries_.scss.

Usage:

.element {
    @include respond-above(small) {
        color: blue;
    }
}

Output:

@media (min-width: 576px) {
    .element {
        color: blue;
    }
}

Usage:

.element {
    @include respond-below(medium) {
        color: blue;
    }
}

Output:

@media (max-width: 991px) {
    .element {
        color: blue;
    }
}

Usage:

.element {
    @include respond-between(small, medium) {
        color: blue;
    }
}

Output:

@media (min-width: 576px) and (max-width: 991px) {
    .element {
        color: blue;
    }
}