Start New Style Guide

Set Up and Run

Let's talk about how to get your new style guide set up and running.

1. Create a new repository for your style guide by clicking here.

   • Follow the prompts and name things as you see fit.

2. Clone your new repository.

   • If you're unfamiliar with git try this:
     • Download Github Desktop
     • Follow this tutorial on how to download your new repository.
     • Now you have a way to 'commit' changes to a place that isn't your computer. Simply use Github desktop to commit the changes. Grab a developer or check out this more in depth Github Desktop Tutorial if you're having any trouble at all.

3. Go to VSCode and open your new folder containing all of your style guide files.

4. Run the following in your terminal of choice to get things running (NOTE: VSCode will automatically put you in the right place on the command line, but ultimately you need to be in the directory - folder - where your new style guide is)

nvm use
npm install
npm run start

Lay of the Land

The folder structure of the base style guide is as follows:

• src: The directory where all the magic happens

  • src/config.js: This is the file where a majority of the site configuration is done. Title, home page blocks, colors, etc.
  • src/assets: Where all static assets like fonts, images, downloads, etc. all belong
  • src/components: All usable "blocks" and "components" that can go on each page
  • src/page_templates: The base page templates to be copy pasted into "pages" for building the site!
  • src/pages: All files here resolve to a url at their name - i.e. colors.js would result in www.{SITE}.com/colors. This is where 99% of the work you do will be done!

• Optional sections:

  • src/styles: Where custom css can be included (it will need to be imported to be actually used)
  • src/utils: This is the land where the light does not touch 🦁🛑 Enter at your own risk if you are not a developer!