Project files for O'Reilly Learning Path: Building a living style guide

All project files for building a living style guide in O'Reilly learning path. You can access the course here

Description

This is the project we build during the course. It includes the following:

1. A CSS style kit - A collection of common reusable CSS.
2. Styleguide - Generated using Gulp which monitors for changes to the CSS style kit.
3. Project that uses the styleguide - A simple web page that uses the style guide to style it.

Set up

• Clone this repo using git clone https://github.com/archana-s/living-styleguide-project-complete.git
• npm install
• npm start - This starts your server and gulp which monitors for changes to style guide directory
• Visit your style guide at http://localhost:3000/styleguide
• Visit the project that uses the style guide at http://localhost:3000
• Make edits to any of the CSS files under /src/styleguide/styles/*.css and see how gulp generates the style guide again in the command line. Also see the updated styles in the styleguide at http://localhost:3000/styleguide

Course material referencing this repo

• Project Setup for CSS Style guide
• CSS Style guide generation setup
• Building Colors for Style Guide CSS
• Building Typography for Style Guide CSS
• Building Buttons and Links
• Building Cards
• Building Tabs
• Building Forms
• Building Layout CSS Selectors
• Building Layer Variables
• Build TwinPeaks Website Using Style Guide

Other resources used in the course material

• styleguide-starter-kit
• A11Y Style guide
• Lonely planet style guide