js-for-css
v0.0.3
Published
ES6, babel, webpack, rollup project starter.
Downloads
6
Readme
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.