Skip to content

Latest commit

 

History

History
121 lines (88 loc) · 2.55 KB

README.md

File metadata and controls

121 lines (88 loc) · 2.55 KB
Raw

Stylin.js

Stylin Logo

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.

Introduction

Stylina

Installing: @stylin.js/stylina

You just need to add the cdn (https://unpkg.com/@stylin.js/stylina@<version>) to your script tag with type="module"

Usage: @stylin.js/stylina

<!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>

See more here

STYLIN.JS for React

Installing: @stylin.js/react

To install the package you must have installed node and npm/yarn

# npm
npm install @stylin.js/react

# yarn
yarn add @stylin.js/react

Usage: @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>
);

See more here

STYLIN Elements

Installing: @stylin.js/elements

To install the package you must have installed node and npm/yarn

# npm
npm install @stylin.js/elements

# yarn
yarn add @stylin.js/elements

Usage: @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>
);

See more here

Contributing

To contribute check the CONTRIBUTING.md.