Every design project should have a style guide. This is one of the best ways to ensure the design is consistent. There are many tools to create a style guide. However, building one by yourself can be beneficial. It gives you more options and freedom. This tutorial will show you how to build your own style guide from scratch using React and styled-components.

How to Build a Great Style Guide with React & styled-components part 1.

How to Build a Great Style Guide with React & styled-components part 3.

Improving the main component

Let’s start with something easy. Do you remember those variables for objects for colors and sizes? We defined these variables at the top of the index.js. This is not the best place where to put them. Why? W are going to use these variables in all components of this style guide. This puts on a crossroad where we can choose from two available solutions.

First, we can keep these variables where they are, in index.js. Then, we can pass them as props to every component. Second, we can take these variables, save them in another file and export them. Then, we can import these variables, or just one, any time we need inside specific component. For the purpose of keeping the code tidy, let’s choose the second option-exported variables.

So, let’s remove the colors and sizes variables from index.js and move them to new file variables.js in root directory. Then, let’s add imports for both variables to those we already have in the top of index.js. Fortunately, we are using the same name for variables. This means that we don’t need to change any references in components created with styled-components.

// ./variables.js

// Codes for color palette
export const colors = {
  disabled: 'hsl(212.3, 16.7%, 69.4%)',
  error: 'hsl(359.6, 82.1%, 62.7%)',
  errorActive: 'hsl(359.6, 82.1%, 42.7%)',
  errorHover: 'hsl(359.6, 82.1%, 65%)',
  primary: 'hsl(209.6, 100%, 55.9%)',
  primaryActive: 'hsl(209.6, 100%, 35.9%)',
  primaryHover: 'hsl(209.6, 100%, 65%)',
  secondary: 'hsl(29.4, 100%, 63.1%)',
  secondaryActive: 'hsl(29.4, 100%, 43.1%)',
  secondaryHover: 'hsl(29.4, 100%, 65%)',
  success: 'hsl(164, 75.6%, 46.7%)',
  successActive: 'hsl(164, 75.6%, 26.7%)',
  successHover: 'hsl(164, 75.6%, 60%)',
  text: 'hsl(223.8, 81.3%, 6.3%)'
}

// Sizes for typography scale
export const sizes = {
  xs: '12px',
  sm: '14px',
  base: '16px',
  lg: '18px',
  xl: '20px',
  xxl: '24px',
  xxxl: '30px',
  xxxxl: '36px'
}

Finally, we can remove the colors and scale props passed by the main component to sub-components. With this, we are ready to proceed further.

// ./index.js

// Import dependencies
import React from 'react'
import ReactDOM from 'react-dom'
import styled, { injectGlobal } from 'styled-components'

// Import colors and sizes variables
import { colors, sizes } from './variables'

// Import style guide components
import Buttons from './components/buttons'
import Colors from './components/colors'
import Forms from './components/forms'
import Typography from './components/typography'

// Global styles and resets
injectGlobal`
  html {
    box-sizing: border-box;
    font-size: ${sizes.base};
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  body {
    padding: 0;
    margin: 0;
    font: 100% / 1.618 Roboto, Arial, sans-serif;
    color: ${colors.text};
  }
`

// Main container or wrapper
const AppContainer = styled.div`
  padding: 0 8px 60px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  max-width: 992px;
`

// H1 heading
const StyleguideHeading = styled.h1`
  position: relative;
  display: inline-block;
  font-weight: 500;

  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background-color: ${colors.text};
  }
`

// H2 heading
const StyleguideSubheading = styled.h2`
  position: relative;
  display: inline-block;
  margin-bottom: 26px;
  font-weight: 400;
  text-align: left;

  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 1.5px;
    background-color: ${colors.text};
  }

  div + & {
    margin-top: 60px;
  }
`

class App extends React.Component {
  render() {
    return (
      <AppContainer>
        <StyleguideHeading>UI Style guide</StyleguideHeading>

        <p>
          A short info about the company. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </p>

        <StyleguideSubheading>Colors</StyleguideSubheading>

        <Colors />

        <StyleguideSubheading>Typography</StyleguideSubheading>

        <Typography />

        <StyleguideSubheading>Buttons</StyleguideSubheading>

        <Buttons />

        <StyleguideSubheading>Forms</StyleguideSubheading>

        <Forms />
      </AppContainer>
    )
  }
}

const rootElement = document.getElementById('root')

ReactDOM.render(<App />, rootElement)

#react #styled-components #javascript #webdesign