I was tasked to do a redesign of the Developer Pages for DuckDuckGo which meant diving into the old codebase, isolating the necessary CSS, and modifying Xslate templates to reflect the new design.
The name of the game in this project was detective work and a lot of patience. I had to figure out where the code lived and separate that out to make the CSS more modular. Fortunately, Sass makes it easy for me to just isolate a piece of CSS and put that into a partial.
Why make it modular in the first place? There are two reasons for that:
- Having things more modular means I can easily change the code when I'm iterating on the design.
- It means I have a better map of the structure of the website in my head.
I also found that before doing anything, having live reloading is a hell of a life saver. I've never done live reloading before this project, and I found that it's just so much more fun to modify and experiment when Sass is automatically converted to CSS and the page automatically loads in all your changes. No ⌘-R needed!
I wrote about the details of this project in several blog posts:
- Building the Developer Pages: Consistent Styling #1
- Building the Developer Pages: Consistent Styling #2
- Building the Developer Pages: Consistent Styling #3