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
andcolor
classes - Add
transition
s andtransform
s - Add
media queries