Js For Css

Write CSS selectors using javascript!

This project is currently in development stage. I'm looking for collaborators :) Any type of help is very much appreciated.

Sample

Write Javascript

const selector = new Selector();
 
selector.create('tag', 'p')
  .addProps('text-align', 'justify')
  .addProps('font-weight', 'bold')
  .addProps('font-size', '16px;')
  .build();
 
selector.create('class', 'btn')
  .addProps('width', '100px')
  .addProps('height', '45px')
  .addProps('background', '#fefefe')
  .addProps('color', 'black')
  .build();
 
selector.creae('class:hover', 'btn')
  .addProps('cursor', 'zoom-in')
  .addProps('background', 'rgba(255, 255, 255, 0.5)')
  .build();
 

Output CSS

p {
  text-align: justify;
  font-weight: bold;
  font-size: 16px;
}
 
.btn {
  width: 100px;
  height: 45px;
  background: #fefefe;
  color: black;
}
 
.btn:hover {
  cursor: zoom-in;
  background: rgba(255, 255, 255, 0.5);
}

Install

NPM

npm install js-for-css --save

YARN

yarn add js-for-css

Usage

import { Selector } from 'js-for-css';
 
const selector = new Selector();
 
// do your stuff
 

API

Methods

.create(type, name)

.create() methods is required to create a css selector. This method receives 2 required parameters, type and name. type is the selector type, e.g. classes, ids, tags etc. name is the selector type name, e.g. btn, btn-primary, div, p, h1 etc.

Available types	Ouput
class	.[class name] {}
class:active	.[class name]:active {}
class:focus	.[class name]:focus {}
class:hover	.[class name]:hover {}
tag	.[html tag] {}
tag:active	.[html tag]:active {}
tag:focus	.[html tag]:focus {}
tag:hover	.[html tag]:hover {}

.addProps(property, value)

As the name suggests, this method adds a css property to the selector you created e.g. background, font-size, color, height, width etc...

See CSS Basic Properties

.build()

This method is required to build each selector. This must be invoked at the end of every selector invocation.