thepont / bruce

Sass Helpers

Bruce

A utility base for Sass. Nothing Schmancy.

npm install --save-dev bruce

Getting Started

bruce is a bunch of Sass helpers. To use it just import as you like, before your real sass.

@import "bruce";

@import "myActuallySass";
@import "otherSass";
@import "moreSass";
@import "embarrassingSass";

Planning

Functions

@import 'src/functions/grey';
@import 'src/functions/baseUnit';
@import 'src/functions/color';
@import 'src/functions/fourProps';
@import 'src/functions/get-zindex';
@import 'src/functions/gridValues';
@import 'src/functions/invert';
@import 'src/functions/lists';
@import 'src/functions/map-fetch';
@import 'src/functions/pastel';
@import 'src/functions/power';
@import 'src/functions/remsToPixel';
@import 'src/functions/repeatChar';
@import 'src/functions/stripUnits';
@import 'src/functions/time';
@import 'src/functions/toPixel';

Box Model

@import 'src/layout/clearfix';
@import 'src/layout/columns';
@import 'src/layout/flood';
@import 'src/layout/grid';
@import 'src/layout/hide';
@import 'src/layout/ratio';
@import 'src/layout/reset';
@import 'src/layout/size';
@import 'src/layout/verticalAlign';
@import 'src/layout/widths';

@import 'src/structure/structure';
@import 'src/structure/flexbox';
@import 'src/structure/background';
@import 'src/structure/padding';
@import 'src/structure/margin';
@import 'src/structure/position';

Typography

@import 'src/type/ellipsis';
@import 'src/type/fontface';
@import 'src/type/fontWeight';
@import 'src/type/verticalRhythm';

Utility

@import 'src/utils/animations';
@import 'src/utils/behaviours';
@import 'src/utils/breakpoints';
@import 'src/utils/dev';
@import 'src/utils/hacks';
@import 'src/utils/ios';
@import 'src/utils/maths';

Components

@import 'src/style/arrow';
@import 'src/style/opacity';
@import 'src/components/Input';
@import 'src/components/Media';
@import 'src/components/Table';