A very happy marriage between tachyons-css and react – type less, more style.
Warning this is work on progress and not used in production anywhere, tread carefully!
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 is a great example of how to be very expressive with very little code. An experience that promises a big productivity boost once you've learned its syntax.
reta takes this approach even further. Rather than using classNames to describe the style of your component, simply use attributes. So much leaner in react land!
/* index.css */
// component.jsimport B from retaconst Col = <B />const Media = img children<Col ><B ="img" = ="media" /><B >children</B></Col>
- media queries via customisable suffixes:
<B pa3 pa5Md/>
- hover, active, focus states via prefixes:
<B blue hoverDarkBlue/>
- makes it quite easy to combine it with your preferred styling approach
- support for server side rendering
- Overwritable defaults for colors, scales, etc
- Support for camelCase and kebabCase:
- Extremely performant since all the work is done on compile time. The runtime simply sets class names on your components.
Use your custom colours or scales
const opts =...defaultOptscolors:...defaultOptscolorsbrand: '#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)')
import B from './mystyle'const Component =<B />
- clone the repo
npm install && cd samples && npm install
- for running the sample project:
cd samples && npm run devand open