Nutritious Pancake Mountain

    This package has been deprecated

    Author message:

    WARNING: retachyons has been renamed to 'reta'. Install using 'npm i reta' instead.

    retachyons

    0.1.2 • Public • Published

    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 pa3 bgWashedBlue hoverLightBlue flexRowNs>
      <B component="img" props={{src, alt: "media"}} w-30 mr3/>
      <B flex-auto f5 white80>{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 pa3 bgWashedBlue flexRowNs>
        <B component="img" props={{src, alt: "media"}} w-30 mr3/>
        <B flex-auto f5 white80>{children}</B>
      </B.Col>
    )

    Use your custom colours or scales

    mystyle.js

    import defaultOpts from 'retachyons/defaults'
    import builder from 'retachyons/builder'
     
    const opts = {
      ...defaultOpts,
      colors: {
        ...defaultOpts.colors,
        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)'
      },
    }
     
    export default builder(opts)
    import B from './mystyle'
     
    const Component = () => (
      <B pa1Xs pa3Md bgBrand hoverBgLightBrand/>
    )

    Contribute

    • clone the repo
    • npm install && cd samples && npm install
    • for running the sample project: cd samples && npm run dev and open http://localhost:8080/

    License

    ISC

    Keywords

    none

    Install

    npm i retachyons

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    ISC

    Last publish

    Collaborators

    • danielberndt