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…
In this second part of our tutorial on building Sketch plugins, Matt Curtis will pick up where he left off with the building of our user interface, and then he’ll move on to the key feature of actually generating our layer mosaics and optimizing the final plugin code. You will learn how to connect the user interface to the core plugin code and how to implement the plugin’s main features. Last but not least, you’ll also learn how to optimize the code and the way the plugin works.
Read more…
In this two-part article, you’ll learn how to build your our own Sketch plugins from scratch — giving you the skills needed to accomplish tasks much faster, easier, and better.
Read more…
