Creating Themes for super fast development! In both Vue and React

For the past year I have been part of a wonderful team who taught me how to get fast and get awesome! This article is dedicated to this team, Zaelot, for helping me grow and propel my coding to the next level!!!

One thing that really helps me scale and develop faster is making a few decisions up front, that could be for example, creating a theme for the project to grow from. This will help us deliver a more consistent product and also to create something that's going to have a low maintenance cost in the future, in case things change.

So let's see what that means in code. I'm going to use first a Vue example and then a React example, to show that this is not even related to the framework itself, but with a mindset of setting things up to be great from the start. Even the smallest project has to feel that way while developing, because otherwise, why bother?

So every time I hear we need to build a project super super fast, that translates to me as "we are going to use Vue for this". And most of the time, that also includes Tailwind, because they just pair for speed.

We do the classic:

yarn create nuxt-app <project-name>

This time I'm choosing Tailwind to be installed upon initialization, so once the process is complete we should be all set.

I first remove all the unnecessary boilerplate and should be left with an index.vue file looking like this:

<template>

</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

Then inside the empty template we can start creating whatever we want to see. Now I'm just making a simple landing page to prove the point of how easy it is to change and maintain a color theme.

So here's the code for the awesome landing page using the companies colors and branding: github repo

And here's the deployed sample

As you can see is mostly just a logo centered on the screen with the addition of scroll event listeners to trigger the scroll behavior. And with a Theme!

We now add our style and brand identity creating a tailwind.config.js file.

module.exports = {
    theme: {
      fontFamily: {
        // Here we add the font we want.
        sans: ['Inter'],
      },
      extend: {
        fontFamily: {
          sans: ['Inter', 'sans-serif'],
        },
        colors: {
          // Then all the default colors are overwritten
          // So you can set up your own palette!
          yellow: {
            DEFAULT: '#FDD00E',
            50: '#??????',
            100: '#??????',
            200: '#??????',
            300: '#??????',
            400: '#??????',
            500: '#FDD00E',
            600: '#??????',
            700: '#??????',
            800: '#??????',
            900: '#??????',
          },
          indigo: {
            DEFAULT: '#??????',
            ...
          },
        },
      },
    },
  }

Let's say we completely change the brand color and now for the font and every background I need to change the color we are using. With this setup, it takes only a second to do so since it's centralized in one single file. Or the font, or whatever you can setup for the styling.

Then on the code, just simply call bg-yellow-500 and we would be using a background with our own customized yellow 500.

So no matter how much the app grows you'll always be able to reach every piece of the style from there if you stick to it. You can completely change the palette from there, no hassle.

Let's say I change the main color to #732B80 and the typography to yellow-400 and boom! Just took a second to get this >>

This kind of small decisions make a big difference when working in a team that constantly pushes itself to become more efficient and more kind to each other in terms of maintainability.

Also if you're looking for inspiration or are having a hard time finding a color palette, check out adobe color

On the other hand, we can totally achieve the same goal using my other most favorite tool in the world, React!

This is the React way -->

This same thing can be done with React super easy.

As usual:

npx create-react-app my-app

Let's say we really mean this time for our app to go big, so lot's of components are going to share the theme. I like to create a folder named global and there I add a theme.js or fonts.js or whatever the file is about.

Then inside the file you would export the constants you mean to use, them being 'colors', 'spacing', 'TwoColumnLayout' or whatever you mean to use there. Let me give you an example:

export const colors = {
  primary: {
    regular: '#BB2020',
    dark: '#06111C',
    darker: '#121317',
    hover: '#BEC7C7',
    focus: '#FFEB4D',
    selected: '#D4762C',
    disabled: '#F99546'
  },
  secondary: {
    regular: '#FFFFF4',
    dark: '#7E8054',
    darker: '#7F807A',
    hover: '#CCCCC3',
    focus: '#52A2A2',
    selected: '#44B4B4',
    disabled: '#5FD8D8'
  }
}

export const spacing = {
  one: '8px',
  two: '16px',
  three: '24px',
  four: '32px',
  five: '40px',
  fiveAndAHalf: '44px',
  six: '48px',
  ...
  fifteen: '120px'
}

Then you can go to your component and import your style to be able to use it locally.

import { colors, spacing } from '@global/theme'

Then, I like to use styled components, so we are also going to be exporting constants like StyledAlerts in the case we're creating an alert component for example:

export const StyledAlert = styled.div`
    padding: ${spacing.one};
    color: ${colors.secondary.regular};
    min-height: ${spacing.seven};
`

So you can just interpolate using ${spacing.one} to access the exported constants from the theme file.

This will help you create a more scalable, consistent, easier to maintain and fast built UI.

Ok, that was a lot! Let's recap.

So no matter the framework you use, you can create a theme for styling guides and to centralize all style related code. That way it's easier to maintain and to access it while developing new features.

Also it helps you stay style-consistent and organized when it comes to code architecture.

Now enough nerd talk. Let's go build stuff!

Check out the React docs

Check out the Vue docs