Skip to content

Feedback: Product page project

Jump to bottom
Chris Brett edited this page Mar 8, 2019 · 1 revision

Courtesy of Diana Frunza

This project is a marketing page that includes presentational content for the Casebook for Partnerships bigger project. Therefore, it may come with different styling than other Citizens Advice projects, so my thoughts below might not be relevant for future projects, but hopefully it will provide a feedback for the new Design System and give a general idea of how it can be implemented and used in a project.

General details on the project development

  • The project has 18 .js files that include actual components and 13 .scss files that serve as stylesheets for these components.

  • 27 custom classes have been used along with the new Design System utility classes to complete the styling.

  • The proportion of the utility classes styling versus the custom classes styling is approx, 7/3.

  • Most (approx. 95%) of the utility classes were used for: display, width, margin, padding, font-size, text-align.

  • Most (I would say 80%) of the custom classes were created to complete the css in terms of: margins, paddings, width, max-width and font-size.

General feedback

Stuff that works great

  • ​Most of the utility classes (especially flexbox, display, positioning, are very detailed and covered every need of the project.

  • The name of the classes are very intuitive and can be easily learned ​and used.

  • Overall, the design system was very useful and met most of this ​project’s requirements in terms of styling. It includes almost all the css attributes a stylesheet needs and their most used values (nice work!).

Ideas for improvement

Consider more flexibility in the box-model area. Some suggestions below:

​1.​ Add max-width and min-width attributes classes. ​2. ​Add the auto value to the width attribute. 3. Add larger spacing values (margins, paddings).

Add more values to the font-size attribute, going maybe 2 or 3 values up (font-size-6: 42px and font-size-7: 50px) and also include 24px as a value (I used it frequently in the project).

Create a sequence pattern for utility classes. My suggestion is:

1.​ Custom classes (if needed). 2.​ Element classes (e.g: .button, .button-secondary, .a). 3. Layout (display, position). 4. Box-model (width, height, margins, paddings). 5. Borders, background. 6. Typography (font-family, font-size). 7. Other (z-index, cursor, overflow).

The above sequence was used in the Product Page project.

Clone this wiki locally