CategoryCSS

March 4, 2020 — Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4. In this article, Rachel Andrew rounds up some of the pros and cons of doing so, and asks for your feedback on the suggestion. Read more…

March 2, 2020 — In this sixth instalment of Inspired Design Decisions, Andy Clarke will explore how British art director Neville Brody and in particular his work on The Face Magazine inspires his designs for the web. How do we use blend modes to add depth to our designs? How do we use vertical text for impact? How can we use clipping paths to bring in character and energy to a design? In this article, Andrew Clarke will explore just that. Read more…

February 24, 2020 — In this article, Blessing Krofegha introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. With Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS. You’ll also learn how to seamlessly set up Tailwind CSS in a React project. Read more…

February 12, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, Rachel Andrew will learn how to use the grid-template-areas property to define placement on the grid and find out how the property really works. If you haven’t used this layout method before, give it a try. We find that it is a lovely way to experiment with layouts and often use it when prototyping a layout — even if for one reason or another we will ultimately use a different method for the production version. Read more…

February 5, 2020 — In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem. You’re going to build a flip card grid with some CSS basics — transforms, flex, and grid. Dan will cover: how flip cards are usually implemented using absolute positioning, the sizing problem that absolute positioning introduces, and a general solution for automatic sizing of overlaid content. Let’s dig in! Read more…

January 10, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items. The other methods Rachel will show you in future articles are alternate ways to specify your layout, but are based on the grid created by numbered lines. But for today, here you will find pretty much all you need to know about grid lines! Read more…

January 7, 2020 — Browsers’ visual display of headings nested inside <section> elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies. In this article, Bruce Lawson explains what use we have of <section> and how authors should mark up headings that are hugely important to AT users. Read more…

January 6, 2020 — Let’s make 2020… fast! An annual front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences on the web today. Updated since 2016. Kindly supported by our dear friends at LogRocket, a frontend performance monitoring solution that helps reproduce bugs and fix issues faster. Read more…

January 3, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid. Read more…

December 27, 2019 — The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout. In this article, Rachel Andrew is going to introduce a CSS Specification that has just become a W3C Recommendation. The CSS Containment Specification defines a single property, contain, and it can help you to explain to the browser which parts of your layout are independent and will not need recalculating if some other part of the layout changes. Read more…