crease
v1.0.2
Published
The super lightweight, fully tested, simple, and easy CSS by JS module. Create CSS with Ease.
Downloads
1
Readme
Crease
The super lightweight, fully tested, simple, and easy CSS by JS module. Create CSS with Ease.
Currently supports children inheritance and camelCase:
import crease from 'crease'
var createdStyleElement = crease({
'#container': {
border: '1px solid black',
padding: '5px',
boxShadow: '3px 3px 6px black',
'input[type="button"]': {
cursor: 'pointer'
}
}
})equals the following html element appended to the document's head (in minified form):
<style>
#container {
border: 1px solid black;
padding: 5px;
box-shadow: 3px 3px 6px black;
}
#container input[type="button"] {
cursor: pointer;
}
</style>Crease works great with crelm for native javascript componentization:
import crelm from 'crelm'
import crease from 'crease'
var createdCSSElement = crease({
'#sample': {
border: '1px solid black',
padding: '5px',
boxShadow: '3px 3px 5px black',
a: {
textDecoration: 'none',
color: 'blue',
cursor: 'pointer'
}
}
})
var createdDOMElement = crelm({
id: 'sample',
parent: document.body,
children: [
'My Links:',
{tagName: 'a', innerText: 'My Website', href: 'https://<whatever>.me'},
]
})Would equal:
<head>
<style>
#sample {
border: 1px solid black;
padding: 5px;
box-shadow: 3px 3px 5px black;
}
#sample a {
text-decoration: none;
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="sample">
My Links
<a href="https://<whatever>.me">My Website</a>
</div>
</body>