The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article Rachel Andrew explains why it is different to other layout methods, and shows some useful patterns and sites which showcase it well. Rachel will take a look at Multi-column Layout — often referred to as multicol or sometimes “CSS […]
Tables are a design pattern for displaying large amounts of data in rows and columns, and have been used for this purpose as early as the 2nd century and when the world started to go digital, tables came along with us. Tables have not yet seemed to fall out of favor, so, in this article, Huijing Chen will
Tables frequently appear on the web but aren’t easy to design and code. People will expect tables. Not those fancy ones from design inspiration sites but Excel-looking monsters with hundreds of cells and complex interaction. In this case, a designer faces many challenges. With this illustrated guide, Slava Shestopalov explains the table anatomy and how
When inspecting most other grids in DevTools, you’ll notice that column widths are dependent on their parent element. Container units are a specialized set of CSS variables. They mirror the layout functionality found in UI design software where configuring just three values provides your document with a global set of columns and gutters to measure
Last year, Rachel Andrew wrote “Take A New Look At CSS Shapes” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “Art Direction for the Web” with CSS Shapes to create exciting and inspired new design ideas. Andy is going to show
Phones are getting bigger, and some parts of the screen are easier to interact with than others. Having the hamburger menu at the top provides too big of an interaction cost, and we have a large number of amazing mobile app designs that utilize the bottom part of the screen. We need to adjust how
Back in the day when we didn’t have responsive tables, it wouldn’t have been a problem to display a complex table on mobile the same way you would on desktop. Visitors knew that they’d need to pinch to zoom in, then scroll left and right, to consume all the data within it. But we don’t
Foldable devices have brought with them talk of a ‘foldable web,’ and the idea that long-standing web conventions may be on the verge of a serious shakeup. Is it all hype, or is it time to get flexible? The ‘foldable web’ will bring with it new challenges, new opportunities, and, in all likelihood, new syntax.
Flutter has already made quite a splash on the mobile development scene. Now it’s taking on bigger devices as well. In this article, Carmine Zaccagnino will show you what you need to know to be ready to take on the task of developing web and desktop apps using this wonderful cross-platform framework. Flutter is a
A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past! In this article, Stephanie Eckles will show you how to use these properties, in addition to creating a responsive
