RSS Club: CSS-Tricks Redesign Preview
CSS-Tricks is redesigning its website, aiming to improve security and modernize development tools. The redesign brings a new look and enhanced user experience.
Original reporting · css-tricks.com
Read “RSS Club: CSS-Tricks Redesign Preview” at CSS-Tricks →
How this was written. CTCV wrote this article with a language model from CSS-Tricks’s reporting (model: @cf/meta/llama-3.3-70b-instruct-fp8-fast); it describes that reporting rather than adding to it. The original, linked above, is the full story.
Key points from CSS-Tricks’s report
- CSS-Tricks is redesigning its website to improve security and modernize development tools
- The redesign features a new look and enhanced user experience
- The website's Sass code has been rewritten, resulting in a reduction in the overall size of the CSS
- The website now features a theme toggle and a 'Jawbreaker' texture
- The website's author pages and WordPress admin styles have been updated
The CSS-Tricks website, which has been around for 19 years, has accumulated many outdated pieces that needed to be updated or removed. This process, referred to as 'ghost busting', involved excavating the theme to identify and eliminate unnecessary elements.
As part of the redesign, CSS-Tricks has adopted modern development tools, including Prettier, Stylelint, GitHub Actions, and auto cache-busting. This new workflow is a significant improvement over the previous 5-year workflow.
Security has also been a major focus of the redesign. To ensure the website's security, CSS-Tricks asked Claude to conduct a holistic audit, which involved reviewing recent WordPress security release notes and identifying areas where the theme could be hardened to comply with WordPress's security measures.
The redesign has also involved a rewrite of the website's Sass code, resulting in a reduction in the overall size of the CSS from 180 KB to 169 KB. Although this reduction may not be huge, it is still a notable improvement.
In terms of design, the website now features a more consistent theme, with semantic tokens used for colors, fonts, and font sizes. The website also includes a theme toggle, which allows users to switch between a dark and light theme. The light theme has been described as 'creamy'.
Other new features of the website include a 'Jawbreaker' texture, which is used throughout the site, and a new Almanac index, which provides a quick and easy way to access CSS features. The website also features a new Guides index, with a featured guide, a widget for newly added and updated guides, and a categorized grid of all guides.
The website's author pages have also been updated, with the right sidebar moved to the left and the author image and bio moved in, allowing articles to be displayed more prominently. Additionally, the WordPress admin styles have been updated to reflect the front-end design, with minimal styling used for fonts and text styles.
Questions and answers
What is the purpose of the CSS-Tricks redesign?
The purpose of the redesign is to improve security and modernize development tools, as well as to update the website's look and feel.
What new features does the redesigned website include?
The redesigned website includes a theme toggle, a 'Jawbreaker' texture, a new Almanac index, and a new Guides index.
When can users expect to see the full details of the redesign?
The full write-up on the redesign will be available on Monday.
