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…
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…
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…
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…
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…
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…
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…
Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, in this article, Rachel Andrew will take a look at some of the things which trip people up with regard to using margins. In particular, you will be looking at how margins interact with each other, and how margin collapsing actually works. As with anything in CSS, share with your team the decisions you make, and comment your code!
Read more…
In this second installment of Inspired Design Decisions, Andy Clarke will teach you how to expand your repertoire of layouts by combining more than one grid into a compound grid. This article will change the way you think about designing with grids.
Read more…
You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. There is more to styling lists in CSS than you might think. In this article, Rachel Andrew starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters.
Read more…