BU Base

BU Base is a new NPM package that provides a standardized set of CSS properties and select mixins from Responsive Foundation to streamline our styling process across our products and themes. Eventually, this may replace burf-tools entirely.

• CSS variables will allow plugins to integrate with themes automatically, streamlining the process for designers and minimizing the amount of styles required
• WordPress is also heavily utilizing CSS variables as part of theme.json, which will make updating our products easier in the future if we incorporate these conventions where/when possible (future-proofing)

How to Use BU Base

BU Base creates a CSS variable in _semantic.scss.

:where(html) {
     --bu-thumbnail-lg: 150px;
}

Foundation then uses this variable in /burf-customizations/profiles/_profile-format-advanced.scss:

.profile-photo-advanced {
	height: var(--profile-advanced-photo-size, var(--bu-thumbnail-lg, 150px));
}

First we have a placeholder variable specific to profiles, for use if you want to customize the size only in BU profiles; a broader BU base variable that’s determining the thumbnail size by default throughout your theme and plugins; and lastly a fallback in case the variables don’t exist.

If you want to change --bu-thumbnail-lg in your theme, you can do so. This will update all instances throughout the theme and plugins that use this variable automatically. In your theme, this might look something like:

:where(html) {
     --bu-thumbnail-lg: 250px;
}

If you want a different size for the profiles advanced layout, then you can just use the placeholder variable --profile-advanced-photo-size which will override the BU base variable. You’ll find that commented out for you in your theme in scss/plugins/bu-profiles/_profile-format-advanced.scss:

.profile-format-advanced {
    --profile-advanced-photo-size: 200px;
}

A plugin, like BU Testimonials, may also use this variable from BU Base. For instance:

.bu-testimonial-photo {
    height: var(--bu-testimonial-image-size, var(--bu-thumbnail-lg, 150px));
}

This follows the same principles as outlined above: a placeholder variable specific to BU testimonials if you want to customize the size only in testimonials; a broader BU base variable that’s determining the thumbnail size by default throughout your theme and plugins; and lastly a fallback in case the variables don’t exist.

BU Base consists of primitive and semantic CSS properties.

Primitive Properties

Primitive properties are a standardized set of un-opinionated CSS properties that will then be used in themes, plugins, etc. Essentially the individual lego pieces. These CSS variables should not be modified.

    --size-1:            1rem;       // 16px
    --size-2:            1.5rem;     // 24px
    --size-3:            2rem;       // 32px
    --size-4:            2.5rem;     // 40px
    --size-5:            3rem;       // 48px
    --size-6:            3.5rem;     // 56px
    --size-7:            4rem;       // 64px
    --size-8:            4.5rem;     // 72px
    --size-9:            5rem;       // 80px
    --size-10:           6rem;       // 96px

View a complete list of the primitive props available in BU Base.

Semantic Props

Semantic properties are a starter kit that takes the primitive properties and starts applying them to BU-specific uses. These CSS variables can and should be modified per your theme or plugin’s requirements.

    --bu-spacing-sm: var(--shim-8);
    --bu-spacing-md: var(--size-4);
    --bu-spacing-lg: var(--size-7);

    --bu-spacing:        var(--size-3);
    --bu-spacing-half:   calc(var(--bu-spacing) * 0.5);
    --bu-spacing-double: calc(var(--bu-spacing) * 2);

View a complete list of the semantic props available in BU Base.

Using BU Base with Foundation variables

BU Base variables are used throughout Foundation, Child Starter, and eventually plugins, to make it easier to quickly customize or override variables.

Foundation also has its own CSS variables. In Child Starter, you’ll find examples of the Foundation variables commented out in any relevant stylesheets. This is so you know a) what the variable is declared to (a specific class or :where(html), etc.) and the naming of the variable for easier customization. You can use BU base variables in combination with the Foundation variables as shown below.

// =========================================================
// Custom Properties (Example)
// =========================================================

.comments-area {
   --comment-font: var(--bu-text-font);
}