- Notifications
You must be signed in to change notification settings - Fork4
Stylin.js is a Javascript library to provide "all" css attributes builtin under component/element.
License
git-marcopitra/stylin.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 yourscript tag withtype="module"
<!DOCTYPE html><htmllang="en"> ...<bodyin-margin="0"in-padding="0"in-overflow-x="hidden"><h1in-color="blue"in-background-color="red"> hello<strongin-color="green">world</strong></h1></body><scripttype="module"src="https://unpkg.com/@stylin.js/stylina@<version>"></script></html>
To install the package you must have installednode and npm/yarn
# npmnpm install @stylin.js/react# yarnyarn add @stylin.js/react
It's too simple to use ReactStylinComponents, see what I mean:
importstylinfrom'@stylin.js/react';importReactfrom'react';constStylinDiv=stylin('div')();constHome=()=>(<StylinDiv// all your JSX Styles herepadding="2rem"background="#f55"borderRadius="1rem"nHover={{textAlign:'right',}}> Hello World</StylinDiv>);
To install the package you must have installednode and npm/yarn
# npmnpm install @stylin.js/elements# yarnyarn add @stylin.js/elements
It's too simple to use ReactStylinComponents, see what I mean:
import{Div}from'@stylin.js/elements';importReactfrom'react';constHome=()=>(<Div// all your JSX Styles herepadding="2rem"background="#f55"borderRadius="1rem"nHover={{textAlign:'right',}}> Hello World</Div>);
To contribute check theCONTRIBUTING.md.
About
Stylin.js is a Javascript library to provide "all" css attributes builtin under component/element.