Recipes

Usefull tips for working with Backbreeze

Overwrite a utility class name

To overwrite a classname change the name key in the property config variable:

// in your project variables file
$bb-text-align-config: (
  'name': 'text-align', // <- Custom name here
  'prop': 'text-align',
  'bps': $bb-bps,
  'values': $bb-text-align-values
);

Will yield:

/* result shortend for brevity */
.text-align-center {
  text-align: center:
}
.text-align-left {
  text-align: left:
}
/* ... */

Use custom breakpoints for a utility class.

To use custom breakpoints pass a custom breakpoint map to the bps key in the property config variable:

// in your project variables file
$bb-text-align-config: (
  'name': 'ta',
  'prop': 'text-align',
  'bps': (
    'medium': 62em,
    'large': 1600px,
  ),
  'values': $bb-text-align-values
);

Will yield:

/* result shortend for brevity */
.ta-center {
  /* ... */
}
@media all and (min-width: 62em) {
  .ta-center\@medium {
    /* ... */
  }
}
@media all and (min-width: 1600em) {
  .ta-center\@large {
    /* ... */
  }
}
/* ... */

Add a breakpoint to the existing ones.

To just add a new breakpoint to a utility keeping the existing ones you will need to extend the default $bb-bps variable using map-merge (which is the Sass way of doing things!).

// in your project variables file
$bb-text-align-config: (
  'name': 'ta',
  'prop': 'text-align',
  'bps': map-merge(
    $bb-bps,
    (
      'xxl': 2600px
    )
  ),
  'values': $bb-text-align-values
);

Classes for all breakpoints in $bp-bps will be generated as well as a class for the xxl breakpoint.

To customize the default breakpoints refer to the configuration guide

Creating a component using Backbreeze values

For complex structures it might be desirable to create a custom component. As Backbreeze is all Sass using values is fairly easy, you can use map-get to retrieve values from general or property value variables or, if the values are used very often, you can create global variables and use them in your components as well as use them in your Backbreeze configuration.

// _container.scss
@media all and #{map-get($bb-bps, 'sm')} {
  .container {
    max-width: map-get($bb-bps, 'sm');
  }
}

// _vars.scss
$bp-xs: 416px;
$bp-sm: 416px;
$bb-bps: (
  'xs': $bp-xs,
  'sm': $bp-sm,
);

// _container.scss
@media all and #{$bp-xs} {
  .container {
    max-width: $bp-xs;
  }
}
@media all and #{$bp-sm} {
  .container {
    max-width: $bp-sm;
  }
}