JSSheet

Preface

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:

• Typescript Support
• Documentation
• IE Support

What is?

It's a new way to write css using Javascript!

How does it works?

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
};
        

How can I use it?

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)