1.1.1 • Published 4 years ago
css-makeup v1.1.1
css-makeup
A tiny library to add CSS styles in a declarative way for vanilla JS, highly inspired by CSS-in-JS libraries like styled-components.
Installation
npm install --save css-makeup
Usage
import cssMakeup, { setTheme } from "css-makeup";
// Application Theme
const theme = {
spaces: [0, 4, 8, 12, 16, 20, 24, 28, 32],
colors: {
primary: "#009688"
},
fontSizes: {
s: 12,
m: 16,
l: 20,
xl: 24
}
};
// set theme values
setTheme(theme);
// Set global styles
cssMakeup.global`
* {
box-sizing: border-box;
}
`;
// Create button element
const btn = cssMakeup.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
&:hover {
border: 2px solid tomato;
cursor: pointer;
}
`;
Examples
Check demo examples
Dependency
Limitation
Scope of this library is limited and it only supports these HTML tags/elements.
License
MIT