Full Stack JavaScript Strategies

Chapter 17. Custom Styles

You already have designs to work with to get the initial app built, but this will go through multiple iterations as you build out features and the Product team gets feedback from users. You will be working with the Design team constantly to ensure that the styling of the app remains consistent as new features are added and new designers are brought onto their team.

Fonts, sizes, spacing, colors, and custom components like steppers, modals, and containers are going to be reused throughout the app. Sometimes the Design team will introduce inconsistencies because there is a lot to manage. As this happens, make sure to mention it immediately so that you all can decide which is the best design for both the users and the devs. If you notice a design will decrease accessibility, mention that, too.

In this chapter, I’ll cover:

• Accessibility

• Consistency in designs

• Custom themes

• Responsive design

You’ll need to use your experience to know when designs are becoming too complex in the codebase and work with the Design team to find a good balance. You already have the structure set up for custom theming, so now you’ll expand on that with the organization style guide. Let’s start by covering accessibility because that should be built into the designs from the beginning.

Accessibility

The reason I’m bringing up accessibility first is because it can be an afterthought when you are trying to get a minimum viable product (MVP) ready and you and the team are ...