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/reactIt'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/elementsIt'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.