moneyadviceservice/frontend

MAS/Dough/Yeast theme variable refactor

ourmaninamsterdam opened this issue · 0 comments

Problem
Currently Dough contains a number of MAS-specific styles which cannot be overridden directly/easily using the dough_theme layer in frontend.

Solution
I've started a refactor to tidy up the theming layer across frontend and Dough by removing any MAS-related theming and setting up a simple base for Dough. The dough_theme is moved from frontend into its own repo: mas_dough_theme. This allows for the theme to be overridden at an app and engine level.

Frontend now relies on three different dependencies:

  1. Dough - provides base CSS styling for Dough components.
  2. Yeast - provides grid, mixins, placeholders and functions support for mas_dough_theme and other MAS site components.
  3. mas_dough_theme - overrides the default Dough theme with MAS styling.

Progress
The majority of the work is done, the last remaining part is to implement mas_dough_theme @imports across the engines and do some regression testing. @Guntrisoft suggested diffing the generated CSS to check for any abnormalities.

Here's a little CLI command that will diff served files (The left-hand CSS is master and right-hand CSS is the new changes):

sdiff <(curl -s http://localhost:3001/assets/enhanced_responsive.css\?body\=1) <(curl -s http://localhost:5000/assets/enhanced_responsive.css\?body\=1) |grep "<" > diffs.txt 

PRs

An example of the new changes implemented in an engine:

  • moneyadviceservice/pensions_calculator#172

@moneyadviceservice/frontend