Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aneekrahman/jstyling
JStyling is a library which can do Styling totally inside of JavaScript. React.JS inspired object passing in as the styling. No more having to make everything look gibberish inside your JS file to update or set the styling.
https://github.com/aneekrahman/jstyling
css css-in-js javascript only-one-file script-styling style styling styling-css styling-css-in-js syntax ui ui-components
Last synced: about 1 month ago
JSON representation
JStyling is a library which can do Styling totally inside of JavaScript. React.JS inspired object passing in as the styling. No more having to make everything look gibberish inside your JS file to update or set the styling.
- Host: GitHub
- URL: https://github.com/aneekrahman/jstyling
- Owner: AneekRahman
- License: mit
- Created: 2020-08-25T23:40:46.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-29T06:16:28.000Z (over 4 years ago)
- Last Synced: 2024-11-08T14:06:40.284Z (about 2 months ago)
- Topics: css, css-in-js, javascript, only-one-file, script-styling, style, styling, styling-css, styling-css-in-js, syntax, ui, ui-components
- Language: JavaScript
- Homepage:
- Size: 12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
##### 
_- I don't hate css files, but you just won't need them anymore._
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]
[npm-image]: https://img.shields.io/npm/v/jstyling.svg
[npm-url]: https://npmjs.org/package/jstyling
[downloads-image]: https://img.shields.io/npm/dm/jstyling.svg
[downloads-url]: https://npmjs.org/package/jstyling
# Intro
You won't ever need a CSS file every again! Why not just do everything in JavaScript!
This is a library which can do Styling totally inside of JavaScript.
React.JS inspired object passing in as the styling, and CSS like element selection!
No more having to make everything look gibberish inside your JS file for styling.
# What's new in v1.0.13
- Ability to animate using `.animate()`
- Write raw CSS in JS using `.setStyle()`
# Example
Code for this inside `example/client.js` (Check out how simple it is!)
# Intro Code Example
```
// Style it! Keep it Neat & Clean
JS("button").style({
backgroundColor: "transparent",
backgroundImage: "linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.03))",
border: "1px solid rgba(0,0,0,.05)",
color: "#006edb",
padding: ".5em 1.6em",
borderRadius: ".5em",
boxShadow: "0px 1px 3px rgba(0,0,0,0.04)",
});
```
Also help the development by reporting any bugs. Feel free to contribute to this project. Thanks ❤
# Benefits
- Easy and readable syntax
- IT'S JUST ONE JS FILE, NO CSS
- Extremely lightweight: Only 1.2kB (500B gzipped!)
# CDN
```
```
# NPM Installation
```
npm i jstyling
```
# Docs
## .style()
Set the styling using this method:
```
// You pass in a JavaScript Object to .style({})
JS("button").style({
backgroundColor: "transparent",
backgroundImage: "linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.03))",
border: "1px solid rgba(0,0,0,.05)",
color: "#006edb",
padding: ".5em 1.6em",
borderRadius: ".5em",
boxShadow: "0px 1px 3px rgba(0,0,0,0.04)",
});
```
Select any elements just like you would in CSS:
```
JS("h4").style(style); // Every h4
JS("#hero").style(style); // Just #hero
JS("ul li").style(style); // Children of ul
// Also DOMElements work!
const element = document.querySelector("p");
JS(element).style(style);
```
Reapply new styles on callbacks:
```
// Set a transition to get the animation effect!
JS("#hero").style({
width: "100%",
height: "500px",
backgroundColor: "orange",
});
document
.querySelector("button")
.addEventListener("mousedown", () => {
JS("#hero").style({
style.transform = "translateX(30px)"
});
});
```
## .animate()
If you want to animate an element, you should use this method.
```
JS("#button3").animate({
styles: {
backgroundColor: "#006edb",
height: "500px",
},
duration: 1000,
ease: "ease-in-out",
});
```
`.animate()` takes in an `Object` with these parameters:
1. `styles:` - Pass in a styling `Object` consisting all of your styles you want to animate in.
2. `duration:` - Duration of the animation in `integer` miliseconds.
3. `ease:` - The transition-timing-function easing as `string`. All of the CSS easing work
## .setStyle()
If you feel like you can't access anything from the JavaScript Style Object, you can always use this method to write the CSS, inside of JavaScript of course.
```
// Use backticks as they can give you multi-line strings!
JS().setStyle(`
* {
font-family: Arial
}
h2::after{
content: "hello"
}
`);
```
---
# Styling Options
```
JS("#indentifier").style({
// Your styles go here!
maxHeight: "",
fontSize: "",
color: "",
// ...
// Remember, it's all camelCase
});
```
<b>The full list of all the options are the same as vanilla javascript. You can follow this useful guide for all the possible options:<b>
[w3schools.com](https://www.w3schools.com/jsref/dom_obj_style.asp)