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)

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-0: 0.5rem; // 8px
    --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(--size-2);
    --bu-spacing-md: var(--size-4);
    --bu-spacing-lg: var(--size-6);

    --bu-spacing:        var(--bu-spacing-md);
    --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.