0.0.3 • Published 6 years ago
js-for-css v0.0.3
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...
.build()
This method is required to build each selector. This must be invoked at the end of every selector invocation.