Shorti
Shorti helps you style your React components by rendering short-hand "class names" into inline styles. Also works in React Native and as a separate file in the browser! For browser support, include shorti-browser.js
and add "shorti" as a class along with your other Shorti class names.
Check out the API page to get all the Shortis.
This is a work in progress, please fork and add to it!
Getting started
Install
npm install shorti
and then include the package in your app:
import S from ' shorti ' ;
const style = S ( ' w-500 h-500 p-20 ' ) ;
React Example
git clone https://github.com/tonyspiro/shorti
cd shorti/examples/react
npm install
Run webpack dev
npm run dev
Go to http://localhost:8080/webpack-dev-server
Edit app.js for live reloading
This:
const style = S ( ' border-1-solid-444 w-500 h-210 p-40 font-50 relative t-100 l-50p ml-205n ' ) ;
< div style = { style } >
Hello world
< / div > ;
renders to:
< div style = " border: 1px solid #444;font-size:50px;height:210px;left:50%;margin-left:-205px;padding:40px;position:relative;top:100px;width:500px; " >
Hello world
</ div >
Browser Example
This:
<! DOCTYPE html >
< html lang = " en " >
< head >
< meta charset = " UTF-8 " >
< title > Shorti Browser Example </ title >
< style >
. shorti {
display : none ;
}
</ style >
</ head >
< body >
< div class = " shorti p-40 w-100 h-100 solid bw-1 bc-000 center-block t-100 relative " >
Here is some text...
</ div >
< div class = " shorti p-40 w-100 h-100 solid bw-1 bc-000 br-100 l-60p t-107 absolute " >
Here is some more text...
</ div >
< script src = " ../../shorti-browser.js " > </ script >
< script >
Shorti ( { showOnRender : true } , function ( ) {
} ) ;
</ script >
</ body >
</ html >
renders to:
<! DOCTYPE html >
< html lang = " en " >
< head >
< meta charset = " UTF-8 " >
< title > Shorti Browser Example </ title >
< style >
. shorti {
display : none ;
}
</ style >
</ head >
< body >
< div class = " shorti p-40 w-100 h-100 solid bw-1 bc-000 center-block t-100 relative " style = " border: 1px solid rgb(0, 0, 0); height: 100px; margin: 0px auto; padding: 40px; position: relative; top: 100px; width: 100px; display: block; " >
Here is some text...
</ div >
< div class = " shorti p-40 w-100 h-100 solid bw-1 bc-000 br-100 l-60p t-107 absolute " style = " border: 1px solid rgb(0, 0, 0); border-radius: 100px; height: 100px; left: 60%; padding: 40px; position: absolute; top: 107px; width: 100px; display: block; " >
Here is some more text...
</ div >
< script src = " ../../shorti-browser.js " > </ script >
< script >
Shorti ( { showOnRender : true } , function ( ) {
} ) ;
</ script >
</ body >
</ html >