Introducing React and Angular Stylizer

6 years ago

Mini Rant

I have found that one of the easiest ways to scaffold a site is to use a foundational CSS framework like Bootstrap, Foundation, or one of the many Material Design frameworks. Unfortunately, many front-end developers have a tendency to use these poorly by arbitrarily overriding classes or redefining classes from page to page. One of the best ways to overcome this is by using an interactive style guide that points to the central styles. This encourages code reuse and more careful use of the framework's exposed variables which are often enough to stylize the majority of a site.

A Simple Solution

I like to incorporate mine directly into the site and then use it as a point of reference and review. This allows developers to focus on specific UI components and not get caught up in the entire page or content they are working on. It also makes it easier to review with UX/UI folks and the customer. Since it is directly incorprated into the site, any changes are updated on the fly and shown in real time. Any components that are not used can easily be commented out to avoid excess bulk.

Note: Of course, the style guide should always be hidden or removed as part of any production build process.

Sample Projects

I have created two projects to make it easier to incorporate an interactive style guide into an Angular or React project. Both projects rely on Bootstrap 4.0 SASS, though the same technique can be used with other frameworks. To get started, just run the project, pick a theme, and start tweaking the core.scss and variables.scss for that theme.

Discuss on Twitter