airstyle

Airstyle

A lightweight 275 bytes ( airstyle.min.js ) JavaScript library to style HTML elements with JS as easy as possible.

Installation

With npm and Browserify do:

$ npm install -g browserify

Alternatively install it via unpkg

<script src="https://unpkg.com/airstyle"></script>

Basic Usage

<div class="myClass">
	<p id="myText">airstyle.js</p>
</div>

const airstyle = require("airstyle")

// basic syntax
airstyle(element, style)

// style:string
airstyle(".myClass", "width: 200px; height: 200px; border: 1px solid #000000")

// style:object
airstyle("#myText", {
	color: "red",
    "font-size": "40px",
    "font-family": "Arial"
})

Extended usage

You can select an element also with a longer selector.

airstyle("div.user-panel.main input[name=login]", style)

Airstyle is also compatible with almost every JS Framework. Tested in Angular, React and Vue.

Vue example

<div id="root">
	<div class="container">
    	<p>Hi!</p>
    </div>
</div>

const style = require("airstyle")
new Vue({
    el: "#root",
	data: {
    	color: "red",
        size: "20px"
    },
    methods: {
    	setStyle(){
        	style(".container p", {
            	color: this.color,
                "font-size": this.size
            });
        }
    },
    mounted(){
    	this.setStyle();
    }
})

React example

<div id="root"></div>

const style = require("airstyle")
class App extends React.Component {
	constructor(){
    	super();
        this.state = {
        	color: "red",
            size: "20px"
        }
    }
    componentDidMound(){
    	style(".container p", {
        	color: this.state.color,
            "font-size": this.state.size
        });
    }
    render(){
    	return (
        	<div className="container">
            	<p>Hi!</p>
            </div>
        )
    }
}