CategoryCSS

October 10, 2019 — The web has seen an incredible evolution in the last decade: new HTML/CSS features, browser improvements, and design techniques. Ever since releasing Grid Inspector, the Firefox DevTools team has been inspired to build a new suite of tools to solve the problems of the modern web. In this article, Victoria Wang will tell you everything about all 7 tools and take a peek at potential future projects, with stories from the design process and practical steps for trying out each tool. Read more…

October 4, 2019 — By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns. Read more…

October 3, 2019 — In this fifth installment of Inspired Design Decisions, Andy Clarke will teach you about Bea Feitler, who directed Harper’s Bazaar throughout the 1960s and has been described as “the pioneering female art director you’ve never heard of.” Andy will teach you about Feitler’s confident work and show you how to apply some of her design techniques to the work you make for the web. In this article, you’ll learn how to emphasize scale and maintain its contrast on even the smallest screens. Andy will teach you how to make confident color choices, and how to use pattern and texture to add depth to your designs. Read more…

September 10, 2019 — The market is filled with site builders that promise to be universal solutions for any design challenge, but when it comes to practice, they fall short on both the design and development side. Only a few tools actually keep their promises. In this article, Nick Babich reviews Webflow — the next-generation tool for building a sophisticated web experience that allows users to design, build, and launch websites visually. Read more…

September 5, 2019 — In this fourth instalment of Inspired Design Decisions, Andy Clarke will teach you about Alexey Brodovitch, one of the most influential art directors of the twentieth century. Andy will teach you about Brodovitch’s iconic work and show you how to apply some of his design techniques to the work you make for the web. In this article, you’ll learn how scattering images will fill your designs with movement. Andy will teach you how to mirror pictures and text, and how to carve text into shapes using CSS Shapes. Read more…

September 4, 2019 — In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content. Rachel will show you how new layout methods and new values in CSS can help us to deal with overflow and create less fragile designs. She’ll also explain one of the fundamental concepts behind the design of CSS — that of avoiding data loss. Read more…

September 3, 2019 — The typical website stack has gotten complex, involving many tools and technologies, and requiring automation to handle its deployment adequately. By automating all the tasks to execute, you will not dread doing the deployment, indeed you may not be even aware of it. In this article, Leonardo Losoviz will take a closer look at Buddy, one of the most comprehensive tools for automating website deployments. Read more…

August 9, 2019 — Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, Luke Harrison will explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation. He will then touch upon some existing solution for removing it from stylesheets. Read more…

August 8, 2019 — In this third instalment of Inspired Design Decisions, Andy Clarke will teach you how to use frameworks to create layouts as engaging as in the well-known Ernest Journal. All it takes is an understanding of layout design and imagination. Curiosity keeps a creative mind open to new possibilities, and that’s what Ernest Journal magazine — the inspiration for this issue — is all about. Ernest Journal’s design is successful because although each article has its own distinctive elements which connect the visual style with the content, those articles use a consistent grid system and foundation styles. Read more…

August 6, 2019 — The support of multiple writing modes is key to the way that our new layout methods of Flexbox and Grid Layout have been designed. An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important. Read more…