Depending on your use case, you may choose to use the Sass source files in your project instead of the compiled css.
Some example use cases may be that you want to use the Sass variables and mixins elsewhere in your theme, that you want to extend a class, or that you would like to override the default breakpoint settings.
Add the sass files to your project via a direct download, NPM, or Composer and integrate them into your normal sass workflow. Use
bux-styles.scss as your main scss file.
Import all fonts and BUX partials into your main scss file prior to the site-specific scss files. This will provide access to BUX variables and mixins from your site-specific scss files.
This method is recommended when building a Drupal theme.
// Add BUX base partials. Order is important.
// Add component partials from BUX. Order is not important, can be globbed.
// Add partials from your site.
The Sass assets come packaged with an optional settings file which can be used to override some system default values such as breakpoints, gutters, container max-width, etc.
To enable the settings file, rename
uncomment the import statement in
If you are using BUX Sass in conjunction with site-specific scss like in the example above, add
@import "settings"; before all BUX base partials.
|Provides an easy way to include a clearfix for containing floats. Takes no arguments.|
|Implements a media query based on a minimum-width and up value. The |
|Strips BUX basic link styles. May be used as a starting point for other link-based elements. Takes no arguments.|
|Converts one or more pixel values into matching rem values. Default.|
|Hides element visually, but leaves it available for screen readers. Default |