Getting started

Installation

Install componentry and import the styles. Componentry uses PostCSS to convert custom @componentry directives to CSS.

1. Install Componentry and PostCSS

npm install componentry postcss autoprefixer

2. Add Componentry to your PostCSS config

Include Componentry's PostCSS plugin in your config. The plugin converts the@componentry directives into styles.

{
  "plugins": [require("componentry/postcss"), require("autoprefixer")]
}

3. Add directives to your CSS

The foundation directive is converted to the base styles, and the componentsdirective is converted to the component styles.

/* The "foundation" param includes a set of browser normalization styles */
@componentry foundation;

/* The "components" param include all of the component styles */
@componentry components;

/* The "utilities" param includes the componentry states styles */
@componentry utilities;

4. Build something radical

You're ready to start using Componentry.

import { Flex, Text } from 'componentry'

export const GettingStarted = () => {
  return (
    <Flex>  
      <Text variant="h1">Radical</Text>
    </Flex>
  )
}