https://github.com/ulyssear/css-in-js-in-html
CSS-in-JS without CSS and JS
https://github.com/ulyssear/css-in-js-in-html
concurrently github-workflow html html-class-attribute javascript javascript-library jest nodejs
Last synced: 28 days ago
JSON representation
CSS-in-JS without CSS and JS
- Host: GitHub
- URL: https://github.com/ulyssear/css-in-js-in-html
- Owner: ulyssear
- License: mit
- Created: 2022-07-26T08:25:11.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-01T21:09:52.000Z (over 1 year ago)
- Last Synced: 2025-03-01T21:28:02.529Z (over 1 year ago)
- Topics: concurrently, github-workflow, html, html-class-attribute, javascript, javascript-library, jest, nodejs
- Language: JavaScript
- Homepage:
- Size: 204 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Table of Contents
## About The Project
CSS-in-JS-in-HTML is a JavaScript library which permits you to apply CSS properties with also some useful features to design your dynamic HTML elements.
### Built With
[![Javascript][Javascript-shield]][Javascript-url]
[![NPM][NPM-shield]][NPM-url]
## Getting Started
### Compatible browsers
* Chrome : 73+
* Firefox : 67+
* Safari : 13+
* Edge (Chromium) : 79+
* Opera : 60+
* Samsung Internet : 11.1+
* iOS Safari : 13+
### Installation
#### From CDN
1. Import `main.js` in your HTML file
```html
```
2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute)
```css
[hidden]:not([hidden="false"]) { display: none!important; }
```
#### Manual installation
1. Clone the repo
```sh
git clone https://github.com/ulyssear/css-in-js-in-html.git
```
2. Import `main.js` in your HTML file
```html
```
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Ulysse ARNAUD - ulysse@arnaud.tech
Project Link: [https://github.com/ulyssear/css-in-js-in-html](https://github.com/ulyssear/css-in-js-in-html)
[contributors-shield]: https://img.shields.io/github/contributors/ulyssear/css-in-js-in-html.svg?style=for-the-badge
[contributors-url]: https://github.com/ulyssear/css-in-js-in-html/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/ulyssear/css-in-js-in-html.svg?style=for-the-badge
[forks-url]: https://github.com/ulyssear/css-in-js-in-html/network/members
[stars-shield]: https://img.shields.io/github/stars/ulyssear/css-in-js-in-html.svg?style=for-the-badge
[stars-url]: https://github.com/ulyssear/css-in-js-in-html/stargazers
[issues-shield]: https://img.shields.io/github/issues/ulyssear/css-in-js-in-html.svg?style=for-the-badge
[issues-url]: https://github.com/ulyssear/css-in-js-in-html/issues
[license-shield]: https://img.shields.io/github/license/ulyssear/css-in-js-in-html.svg?style=for-the-badge
[license-url]: https://github.com/ulyssear/css-in-js-in-html/blob/master/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/ulyssearnaud
[JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
[JavaScript-url]: https://www.javascript.com/
[NPM-shield]: https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white
[NPM-url]: https://www.npmjs.com/