retachyons
A very happy marriage between tachyons-css and react – type less, more style.
Why?
Styling with react tends to be quite a strain on a typical keyboard. So many special characters. And a lot of boilerplate-y code. Let's learn from the atomic css movement. [tachyons]((http://tachyons.io/) is a prime example of being very expressive with very little code. An experience that promises a big productivity boost once you've learned its syntax.
retachyons takes this approach even further. Rather than using classNames to describe the style of your component, simply use attributes. Much leaner!
Example code
<B.Col > <B ="img" = /> <B >children</B></B.Col>
Features
- media queries via customisable suffixes:
<B pa3 pa5Md/>
- hover, active, focus states via prefixes:
<B blue hoverDarkBlue/>
- full power of glamor for all kinds of fallbacks:
<B w50 opacity={value} select={[' svg': {height: 12}]}/>
- support for server side rendering
- 4 Basic building blocks:
B
: block,B.Col
: flexDirection column,B.Row
flexDirection column,B.I
: inline-block (set your custom display prop via e.g.<B display="inline"/>
) - Overwritable defaults for colors, scales, etc
- Support for camelCase and kebabCase:
<B bg-dark-green/>
and<B bgDarkGreen/>
- Potential for very nice performance due to fixed set of atomic-rules
Getting Started
npm i retachyons
import B from retachyons const Media = img children <B.Col > <B ="img" = /> <B >children</B> </B.Col>
Use your custom colours or scales
mystyle.js
const opts = ...defaultOpts colors: ...defaultOptscolors brand: '#aa6633' light-brand: '#ffee55' mediaQueries: xs: 'screen and (min-width: 0)' sm: 'screen and (min-width: 576px)' md: 'screen and (min-width: 768px)' lg: 'screen and (min-width: 992px)' xl: 'screen and (min-width: 1200px)' opts
import B from './mystyle' const Component = <B />
Contribute
- clone the repo
npm install && cd samples && npm install
- for running the sample project:
cd samples && npm run dev
and openhttp://localhost:8080/
License
ISC