sculptrr
v1.0.0
Published
A css-in-js styling library for enjine-io a.k.a droidscript hybrid
Downloads
72
Readme
sculptrr
Sculptrr, a css-in-js library for Enjine-Io a.k.a DroidScript Hybrid >3
Getting Started >3
Firstly download the sculptrr.core.js
file then load in into your project like :
ui.script("sculptrr.core.js");
The next step is using it.
The library extends ui.Control
- this class is used to build elements in hybrid.
So we have added our own method, you can access it using :
ui.script("sculptrr.core.js");
class Main extends App {
onStart() {
this.layMain = ui.addLayout("main", "linear", "fillxy,vcenter");
this.txt = ui.addText(this.layMain, "My Hybrid app");
// Usage Of Sculptrr Method
this.txt.sculptrr({
position: "relative",
color: "red",
"&:active": {
boxShadow: "0px, 0px, 0px, 0px",
top: "5px",
left: "5px"
}
});
}
}
Usage >3
Here is working code examples and usage.
// This is the most basic way to use
this.btn.sculptrr({
color: 'red',
})
// We can go on to add pseudo-elements like this :
this.btn.sculptrr({
color: 'red',
"&:active": {
boxShadow: "0px, 0px, 0px, 0px",
top: "5px",
left: "5px"
},
"&:hover": {
boxShadow: "0px, 0px, 0px, 0px",
top: "5px",
left: "5px"
}
})
// We can also do parent elements selection like
this.btn.sculptrr({
" *": {
marginLeft: left,
marginTop: top,
marginRight: right,
marginBottom: bottom
}
})
// We can go on to add media queries
this.btn.sculptrr({
"@media (max-width: 1250px)" : {
/* */
}
})
// Anything can be added, just add "" and eqaute to an object
//just like the media query
Thanks For The Interest, Wishing You Happy Coding >3