Stylin.js is an style ecosystem to provide the most easy and productive way to style your elements and components in the most of frontend technologies, providing a full "no-tab-change" styling experience.
- Stylina
@stylin.js/stylina: Stylin.js for Vanilla - directly to your html element. - STYLIN.JS for React
@stylin.js/react: Stylin.js for React - allows you to create stylin components. - STYLIN.JS core
@stylin.js/core: Stylin.js core - modular functions and logics.
You just need to add the cdn (https://unpkg.com/@stylin.js/stylina@<version>) to your script tag with type="module"
<!DOCTYPE html> <html lang="en"> ... <body in-margin="0" in-padding="0" in-overflow-x="hidden"> <h1 in-color="blue" in-background-color="red"> hello <strong in-color="green">world</strong> </h1> </body> <script type="module" src="https://unpkg.com/@stylin.js/stylina@<version>" ></script> </html>
To install the package you must have installed node and npm/yarn
# npm npm install @stylin.js/react # yarn yarn add @stylin.js/react
It's too simple to use React StylinComponents, see what I mean:
import stylin from '@stylin.js/react'; import React from 'react'; const StylinDiv = stylin('div')(); const Home = () => ( <StylinDiv // all your JSX Styles here padding="2rem" background="#f55" borderRadius="1rem" nHover={{ textAlign: 'right', }} > Hello World </StylinDiv> );
To install the package you must have installed node and npm/yarn
# npm npm install @stylin.js/elements # yarn yarn add @stylin.js/elements
It's too simple to use React StylinComponents, see what I mean:
import { Div } from '@stylin.js/elements'; import React from 'react'; const Home = () => ( <Div // all your JSX Styles here padding="2rem" background="#f55" borderRadius="1rem" nHover={{ textAlign: 'right', }} > Hello World </Div> );
To contribute check the CONTRIBUTING.md.