Basement

Ground floor CSS utility classes

How to

Import any settings before the src/index.scss file and any default settings will get overwritten:

@import
  'overrides',
  'src/index';

Usage with Webpack (or Create React App)

First, install the webpack deps for compiling sass. If you are using Create React App < v2.0.0 you will be using react-app-rewired if you haven't ejected and will require the following packages:

yarn add sass-loader node-sass --dev

Add the following loader to your webpack config:

{
  test: /\.scss$/,
  loaders: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    require.resolve('sass-loader'),
  ]
},

If you are using Create React App v2.0.0+ then SCSS modules is natively supported and you will only need to install node-sass:

yarn add node-sass --dev

Then rename your index.css file to index.scss (and be sure to change any javascript imports to import 'index.scss';). Sass should be working nicely, now!

---

Now you can install basement:

yarn add '@sanctucompu/basement'

And require it in index.scss like so:

@import '~@sanctucompu/basement/src/index';

Usage with Ember JS

Be sure that Basement, as well as Ember CLI Sass, Sass, and Broccoli Funnel are included in your devDependencies.

yarn add -D @sanctucompu/basement
yarn add -D sass ember-cli-sass broccoli-funnel

Update ember-cli-build.js. Using broccoli-funnel enables us to set the destination directory, so that the call to import 'basement/index' works as we'd expect.

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const Funnel = require('broccoli-funnel');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    sassOptions: {
      includePaths: [
        new Funnel('node_modules/@sanctucompu/basement/src', { destDir: '@sanctucompu/basement' })
      ]
    }
  });

Now you can import basement in your main sass file

@import '@sanctucompu/basement/index';

Settings

Overwriting these settings is encouraged! To do so, define them in a .scss file and import them before Basement.

variable	description	default
$grid-columns	Amount of columns in the grid.	12
$colors	Color map use for color-<color>, bg-color-<color>, and border-color-<color> classes.	('black': #000, 'white': #FFF, 'blue': #0A3862);
$breakpoints	Media query breakpoints.	('sm': 640px, 'md': 832px, 'lg': 1024px, 'xl': 1152px)
$spacing-units	Spacing units defined here will be available in spacing and padding utility classes at each breakpoint. For example, .p_25 will set padding: .25rem; on the selected element. If you update the list of $spacing_units to include 3.125rem, then .sm:mt3_125 will affect the top margin of your element only at small screen sizes. Negative margin classes are automatically generated and prefixed with n, so .mn1 will set margin: -1rem.	0rem, .25rem, .5rem, .75rem, 1rem, 2rem, 3rem, 4rem, 6rem, 8rem;
$aspect-ratios	Ratios for .aspect-<ratio> utility class.	('square': (1, 1), 'landscape': (16, 9), 'portrait': (2, 3));
$dynamic_spacing	Whether or not each margin and padding class is generated for each breakpoint.	true
$decimal_deliminator	The deliminator used to replace a .	'_'
$dynamic-grid	Whether or not each col-<i> class is generated for each breakpoint.	true
$additional-class-definitions	Add additional classes.	()
$additional-responsive-classes	Create responsive classes from additional class definitions.	()

Contributing

We want basement to be effective and effecient so we encourage contribution. You can contribute by making a pull request and requesting review from previous contributors or a member of the Sanctuary Computer team.

Running locally

# clone the repo
git clone https://github.com/sanctuarycomputer/basement.git

cd basement

# Install dependancies (currently only node-sass)
yarn install
# or
npm install

# Run the watcher
yarn watch
# or the minified watch if you are pointing towards the minified build (dist/basement.min.css)
yarn watch:min

# Build before commiting
yarn build