It's time to ditch Medium for good! 🌈⚡️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

Getting started with React Atomize & Gatsby

As a JS developer, I love trying out new JS frameworks. Most recently, A Friend of mine, Proksh, launched his React UI Framework atomize.

So, this post is all about getting started with react atomize in gatsby.

For the basic gatsby setup, Check out this video - Quick Start with Gatsby: Create, Develop, and Build Gatsby Sites From the Command Line

Installing dependencies

After setting up Gatsby, let's install atomize ( I use yarn )

yarn add atomize styled-components react-transition-group @callstack/react-theme-provider

Atomize uses styled-components at the core, so we will need to do some extra setup for styled-components in gatsby. Add the following the dependencies first,

yarn add gatsby-plugin-styled-components  babel-plugin-styled-components

Once that's done, add gatsby-plugin-styled-components in gatsby-config.js.

Theme setup

We will need to tell atomize about our custom theme. For that, create theme.js at src/constants and add the following code. ( You will need to create the constants folder )

import { ThemeProvider, DefaultTheme, StyleReset } from "atomize";

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "#0095ff",
    black: "#333", // this is our custom color
  },
  textSize: {
    ...DefaultTheme.textSize,
    size: {
      ...DefaultTheme.textSize.size,
      paragraph: "15px",
    },
  },
  fontFamily: {
    ...DefaultTheme.fontFamily,
    primary: `'Poppins', sans-serif`,
    secondary: `'IBM Plex Mono', monospace`,
  },
};

export default theme;

Atomize provides some default theme values. For e.g - Atomize provides the following colors by default:

Screenshot 2019-07-21 at 10.30.42 AM.png

You can check the complete list of theme variables at - https://atomizecode.com/docs/react/theme

Now we will need to wrap our application in ThemeProvider provided by atomize and pass our custom theme to it. To do so, open gatsby-browser.js and add the following code.

import React from "react";
import { ThemeProvider, StyleReset } from "atomize";

import theme from "constants/theme";

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
    <StyleReset />
    {element}
  </ThemeProvider>
);

Note: I am using gatsby-plugin-resolve-src for absolute imports. ( https://www.npmjs.com/package/gatsby-plugin-resolve-src )

Now we are ready to use atomize components.

Concept

Atomize provides many custom components like Div, Text, Image, Icon and many more. Each component has its custom set of properties. Here is a complete list of components provided atomize at the time of writing:

  • Div
  • Text
  • Icon
  • Button
  • Input & Textarea
  • Checkbox
  • Radio
  • Switch
  • Image
  • Tag
  • Anchor
  • Collapse
  • Container
  • Row
  • Col
  • Dropdown
  • Modal
  • Sidedrawer
  • Notification

and some helper functions:

  • scrollTo
  • currentDevice

Now each component has its own set of properties to provide styling. For example - To provide box-shadow around a div, we can use a prop shadow and provide the level of shadow we want.

Screenshot 2019-07-21 at 10.20.06 AM.png

// Shadow 1
<Div shadow="1">...</Div>
// Shadow 2
<Div shadow="2">...</Div>
// Shadow 3
<Div shadow="3">...</Div>
// Shadow 4
<Div shadow="4">...</Div>
// Shadow 5
<Div shadow="5">...</Div>

Also, the value of each prop can be customized to handle responsiveness like:

<!-- Level 4 shadow on small devices, level 3 shadow on -->
<!-- medium devices and level 1 shadow on large devies -->
<Div shadow={{ xs: '4', md: '3', lg: '1' }}>...</Div>

You can check the complete list of components and their props at - https://atomizecode.com/docs/react/atoms

Here is the example code for creating a login form using atomize -

Atomize feels great in creating a consistent UI design for any project. The project is in beta currently and more awesome components are coming pretty soon. So stay tuned for more and till then Happy Coding :)

Pawan Kumar's photo

Pawan Kumar

New Delhi

jsartisan
Write your comment…

10 comments

Hello Pawan Kumar

I like the Atomize Design System and the design components are awesome.

And being a Vue.js developer, I would love to contribute in creating a style guide in Vue.js as well.

I have also created a GitHub organization, Atomizecode, we can move the React project to the organization and add you as a member as well.

Thanks

Yashu Mittal

Show all replies

How should we chat? Do you use Discord?

Pawan Kumar

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

Seems good! I would love to try it :D

Reply to this…

Pawan Kumar, apologies for the noob question, but when I create the theme file in the src/constants folder, it is not finding the module in gatsby-browser.js. What could be the issue?

Module not found: Error: Can't resolve 'constants/theme' in....

I am also using the resolve plugin as you have.

Show all replies

Pawan Kumar Thanks, but unfortunately, I get the same error as above.

Reply to this…