Extendability

How It Works

Jack's components are comprised of mixens. Component styles are generated when they are flipped to a state of inclusion at the time the library is compiled. To include the card component, you would override the variable that determines whether or not that the card component is included at compilation time, $include_component_card: true;.

Adding and Removing Components

By default, all components are included, $jack_include_all: true !default;. You may cherry-pick components to exclude at this point. Setting $include_component_card: false; before Jack's Sass compiles would include all components minus the card one. Conversely, you can set $jack_include_all: false; followed by $include_component_card: true; to output just the card component.

Placeholders and Mixins

Most utilities classes output a placeholder or mixin, even if their respective stylesheet isn't included and generated. This lets you leverage their usefulness whilst not bloating your output. It's important to understand that the location of the outputted code is affected by using placeholders. Order of declaration has an impact on styling rule weighting.

ExampleCopy Example

// Explicitly exclude the margin spacing utility classes
$include_util_margins: false;

// Create a new class by extending a placeholder selector that's emitted by spacing.scss
.example-with-top-margin {
    @extend %m-t-md-2;
}

// Explicitely exclude the grid classes
$include_component_grid: false;

// Create left navigation (two-columns wide)
.left-nav {
    @extend %col-2;
}

// Explicitly exclude the margin spacing utility classes
$include_util_margins: false;

// Create a new class by extending a placeholder selector that's emitted by spacing.scss
.example-with-top-margin {
    @extend %m-t-md-2;
}

// Explicitely exclude the grid classes
$include_component_grid: false;

// Create left navigation (two-columns wide)
.left-nav {
    @extend %col-2;
}

Extendability

Contents