This is a WIP, no documentation is currently done and the entire process might be buggy or some properties might be missing.
I'm working alone and I'll add new features in the future like:
It's a new way to write css using Javascript!
JSSheet is based on a javascript-driven layout, you can define multiple layouts using partials and hierarchies using children. A gulp watcher will compile the javascript component into a minified css called dist.css.
Starting from a styles.js element you can define css properties and children:
/**
* ROOT STYLESHEET
*
* @author nicolacastellanidev@gmail.com
* @desc the root stylesheet, don't rename stylesheets export
*/
/// Get shared constants
const { fonts, colors } = require("./variables");
/// Get partials
const { body } = require("./partials/body");
const { header } = require("./partials/header");
const { generics } = require("./partials/generics");
/**
* Core stylesheet
*/
const stylesheets = {
root: {
selector: "body",
background: colors.primary,
fontFamily: fonts.main,
padding: 0,
margin: 0,
overflowX: "hidden",
children: [header, body, ...generics]
}
};
module.exports = {
stylesheets
};
partials are sub-components wich can be separate from the main styles component and handled as atomic components:
/**
* HEADER PARTIAL
*
* @author nicolacastellanidev@gmail.com
* @desc handle .Header partial styles
*/
/// get color constants
const { colors } = require("../variables");
/// custom partial constants
const headerHeight = "75vh";
const headerBackground =
'url("myBgUrl")';
/**
* .Header styling
*/
const header = {
selector: ".Header",
color: colors.primary,
width: "100%",
height: headerHeight,
align: "center column",
background: headerBackground
};
module.exports = {
header
};
Download the repository from https://github.com/NicolaLC/js-sheet and follow those steps:
From root directory:
yarn (if yarn is not installed run npm i yarn -g)
yarn watch to start watching edits
yarn server to run the server @ localhost:3000
If everything works fine you should see this page at localhost:3000
Now you can start creating your own styles starting from this template!
Note:yarn dev to run the wather and the server @ localhost:3000 (if concurrently is not installed run npm i concurrently -g)