CategoryCSS

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! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences on the web today. 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…

December 10, 2019 — Today, Rachel Andrew spoke about how to build a CSS layout. Follow along and learn how to use Grid and Flexbox, as well as why Rachel makes certain decisions as she builds out the layout. In this session, Rachel will be building a component of a layout, talking through her thinking as she does so. Is Flexbox or Grid the right method to use? How will the component respond to different screen sizes? And, what about those old browsers? Read more…

November 19, 2019 — In UI/UX, a common pattern that’s needed time and again is that of a simple animated opening and closing panel, or ‘drawer’. You don’t need a library to make these. With some basic HTML/CSS and JavaScript, we’re going to learn how to do it ourselves. In this article, Ben Frain is going to share the details of his ‘go-to’ method in detail in this article. Let’s consider possible approaches first. Read more…