@sanctucompu/basement NPM

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

@infinitebrahmanuniverse/nolb-_san @everything-registry/sub-chunk-805 @zalastax/nolb-_san

3 years ago

4 years ago

5 years ago

5 years ago

5 years ago