Atomize React

Get Started

Introduction

Getting Started

Showcase

Contributing

Liberary

Responsive

Spacing

Theme Setup

Grid

Atoms

Molecules

Functions

Available Colors

The available colors come by default in atomize react are given below. The name of the color can be used for any color props in atomize. You can also edit or add your own colors to this palette.

black

dark

light

disabled

white

transparent

brand
100

brand
200

brand
300

brand
400

brand
500

brand
600

brand
700

brand
800

brand
900

black
100

black
200

black
300

black
400

black
500

black
600

black
700

black
800

black
900

gray
100

gray
200

gray
300

gray
400

gray
500

gray
600

gray
700

gray
800

gray
900

success
100

success
200

success
300

success
400

success
500

success
600

success
700

success
800

success
900

info
100

info
200

info
300

info
400

info
500

info
600

info
700

info
800

info
900

warning
100

warning
200

warning
300

warning
400

warning
500

warning
600

warning
700

warning
800

warning
900

danger
100

danger
200

danger
300

danger
400

danger
500

danger
600

danger
700

danger
800

danger
900

Add or Edit Colors

You can overwrite the existing color or add a new color to the theme using ThemeProvider. You can create your own brand color palette like -

brand
100

brand
200

brand
300

brand
400

brand
500

brand
600

brand
700

brand
800

brand
900

// Overwriting an existing color
import { ThemeProvider, Div, Text } from "atomize";
const theme = {
  colors: {
    brand100: "#F9F8FC",
    brand200: "#F3F1FA",
    brand300: "#E9E6F6",
    brand400: "#D2CCEC",
    brand500: "#BCB3E2",
    brand600: "#9C8FD6",
    brand700: "#6F5CC3",
    brand800: "#553EB5",
    brand900: "#382683",
  }
};
const BrandColors = () => (
  <ThemeProvider theme={theme}>
      <Div d="flex">
        {["100", "200", "300", "400", "500", "600", "700", "800", "900"].map(
          shade => (
            <Div
              m={{ r: "1rem" }}
              w="2rem"
              d="flex"
              flexDir="column"
              align="center"
            >
              <Div
                bg={`brand${shade}`}
                rounded="circle"
                h="2rem"
                w="2rem"
                m={{ b: "0.5rem" }}
              />
              <Text
                textSize="tiny"
                textAlign="center"
                textWeight="500"
                textColor="medium"
              >
                brand
                <br />
                {shade}
              </Text>
            </Div>
          )
        )}
      </Div>
    </ThemeProvider>
)
ReactDOM.render(<BrandColors />, mountNode);

You can also add your own color name & it's value like -

myColor

// Creating your own colors
import { ThemeProvider, Div } from "atomize";
const theme = {
  colors: {
    myColor: '#234423',
  }
};
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div d="flex">
      <Div
        bg="myColor"
        m={{ r: "1rem" }}
        w="2rem"
        d="flex"
        flexDir="column"
        align="center"
      />
        <Div
          bg="myColor"
          rounded="circle"
          h="2rem"
          w="2rem"
          m={{ b: "0.5rem" }}
        />
        <Text
          textSize="tiny"
          textAlign="center"
          textWeight="500"
          textColor="medium"
        >
          myColor
        </Text>
      </Div>
    </Div>
  </ThemeProvider>
  , mountNode
);

Column Count

Atomize has 12 column grid structure by default. You can edit this by providing it in theme.

// Default Column count of 12
import {
  Div,
  Row,
  Col } from "atomize";
ReactDOM.render(
  <Div m={{ b: "4rem" }}>
    <Row>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (
        <Col size={1} key={index}>
          <Div bg="warning800" h="3rem" rounded="md" />
        </Col>
      ))}
    </Row>
  </Div>
  , mountNode
);

You can change the column count by changing the colCount in theme using ThemeProvider.

// Changing the Column Count through theme provider
import {
  ThemeProvider,
  Div,
  Row,
  Col } from "atomize";
const theme = {
  colCount: 9
};
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div m={{ b: "4rem" }}>
      <Row>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(index => (
          <Col size={1} key={index}>
            <Div bg="warning800" h="3rem" rounded="md" />
          </Col>
        ))}
      </Row>
    </Div>
  </ThemeProvider>
  , mountNode
);

Container & Gutter Width

Container has default width of 1200px, 1156px, 960px, 720px & 540px on xl, lg, md, sm & xs devices, respectively.

And gutterWidth is of 16px by default.

Gutter Width

Container Width

Default Container Width and Gutter Width can be overwritten by using ThemeProvider & DefaultTheme as shown.

// Changing the Column Count through theme provider
import {
  ThemeProvider,
  Div,
  Row,
  Col } from "atomize";
const theme = {
  grid: {
    containerWidth: {
        xs: "540px",
        sm: "720px",
        md: "960px",
        lg: "1156px",
        xl: "1156px"
    },
    gutterWidth: "12px",
  }
};
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Container>
      <Row>
          <Col size={4} />
          <Col size={8} />
      </Row>
    </Container>
  </ThemeProvider>
  , mountNode
);

Shadows

There are 5 values of shadows present in atomize in default theme - that are 1,2, 3, 4 & 5.

More shadows can be added to the design system by adding them to the shadows inside the theme.

New Shadow

// Adding Your Shadow
import {
  ThemeProvider,
  Div,
  Row,
  Col } from "atomize";
const theme = {
  shadows: {
    "new-shadow": "0 16px 24px -2px rgba(0, 0, 0, 0.08)"
  }
};
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div
      h="3.5rem"
      p={{ x: "1rem" }}
      shadow="new-shadow"
      rounded="lg"
      d="flex"
      align="center"
      justify="center"
      textColor="medium"
    >
      New Shadow
    </Div>
  </ThemeProvider>
  , mountNode
);

Border Radius

By default border radius values available are 0, xs, sm, md, lg, xl & circle having border radius of 0px, 2px, 4px, 6px, 8px, 12px & 1000rem respectively.

circle

You can customize the available or add your own border radius by providing rounded variable in the theme.

Custom Radius

// Adding a custom border radius
import {
  ThemeProvider,
  Div,
  Row,
  Col } from "atomize";
const theme = {
  rounded: {
    veryLarge: "18px",
  }
};
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div
      rounded="veryLarge"
      h="3rem"
      bg="warning700"
      d="flex"
      align="center"
      justify="center"
      textColor="white"
    >
      Custom Radius
    </Div>
  </ThemeProvider>
  , mountNode
);

Font Size

The default theme font size present in atomize are tiny, caption, body, paragraph, subheader, title, heading, display1, display2 & display3.

tiny

Typography

caption

Typography

body

Typography

paragraph

Typography

subheader

Typography

title

Typography

heading

Typography

display1

Typography

display2

Typography

display3

Typography

To add or edit a font size, both the size value and its lineheight of the textSize has to provided to theme as shown.

customSize

// Providing a custom font size
import { Text, ThemeProvider } from "atomize";
const theme = {
  textSize: {
    size: {
      customSize: "25px"
    },
    height: {
      customSize: "34px"
    }
  }
};
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Text textSize="customSize">Custom Text Size</Text>
  </ThemeProvider>
  , mountNode
);

Font Family

There are three type of font families by Default.

primary: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
secondary: serif
code: "monospace"

You can add or edit the font families of theme by using fontFamily in theme.

This is different font

// Changing the secondary font
import { Text, ThemeProvider } from "atomize";
const theme = {
  fontFamily: {
    primary: "equity-text, serif",
  }
}
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Text fontFamily="secondary" textSize="heading">
      This is different font
    </Text>
  </ThemeProvider>
  , mountNode
);

Transition

Default value of transition is all 0.4s ease-in-out.

You can edit this default transition value by changing the transition in the theme as shown.

// Changing the transition value
import { Div, Text, Tag, Row, Col, ThemeProvider } from "atomize";
const theme = {
  transition: {
    custom: "transform 0.8s linear"
  },
};
componentDidMount() {
  setInterval(this.toggleState, 1000)
}
toggleState() {
  const { animate } = this.state
  this.setState({ animate: !animate })
}
class Transition extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      animate: false,
    }
    this.toggleState = this.toggleState.bind(this)
  }
  render() {
    cosnt { animate } = this.state;
    
    return(
      <ThemeProvider theme={theme}>
        <Div
          h="3rem"
          w="3rem"
          m={{ b: "4rem" }}
          rounded="lg"
          bg="brand200"
          style={{
            transform: animate
              ? "translateX(20rem)"
              : "translateX(0)"
          }}
          transition="custom"
        />
      </ThemeProvider>
    )
  }
}
ReactDOM.render(<Transition />, mountNode);