nucleus.js

The framework for constructing quantum mechanical models of subatomic classes.

nucleus.js is a library that reads .json to build dynamic atomic like classes.

Getting started

npm install nucleus.js --save-dev

Background

It imports a library of .json formatted styles like this:

{
  "display": [
    "block",
    "flex",
    "inline",
    "inline-block",
    "inline-flex",
    "none",
    "table",
    "table-cell"
  ]
}

And turns it into a file display.css that looks like this:

.db { display: block }
.df { display: flex }
.di { display: inline }
.dib { display: inline-block }
.dif { display: inline-flex }
.dn { display: none }
.dt { display: table }
.dtc { display: table-cell }

API

Import nucleus.js and pass an array of .json formatted styles through the generate() api.

import nucleus from 'nucleus.js'

nucleus.generate(nucleus.library)

Configuration

The default settings object gets passed to the generate() function as a second parameter.

const settings = {
  action: 'minified',
  css: {
    selector: '.',
    separator: '',
    typeset: {
      import: 'https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto:300',
      fonts: [`'Open Sans', sans-serif`, `'Roboto', sans-serif`],
      base: 16,
      sizes: 6,
      leading: 1.5
    }
  },
  directory: {
    library: join(__dirname, '../../library'),
    output: join(__dirname, '../../../build')
  }
}

nucleus.generate(nucleus.library, settings)

This means you pass in your own custom config object to do things like:

const settings = {
  action: 'verbose',
  css: { separator: '-' }
}

nucleus.generate(nucleus.library, settings)

That will spit out a bunch of files in this format:

.display-block { display: block }
.display-flex { display: flex }
.display-inline { display: inline }
.display-inline-block { display: inline-block }
.display-inline-flex { display: inline-flex }
.display-none { display: none }
.display-table { display: table }
.display-table-cell { display: table-cell }

For example, to change the library from classes to Sass placeholders:

const settings = {
  css: { selector: '%' }
}

nucleus.generate(nucleus.library, settings)

And vuala:

%db { display: block }
%df { display: flex }
%di { display: inline }
%dib { display: inline-block }
%dif { display: inline-flex }
%dn { display: none }
%dt { display: table }
%dtc { display: table-cell }

Build directory

const settings = {
  directory: { output: 'absolute/path/to/your/css/directory' }
}

nucleus.generate(nucleus.library, settings)

Todo

• Add line-height
• Add background-color and color classes
• Add transitions and transforms
• Add media queries