Styling applications is a world in itself, one not often given the importance and attention it deserves. With complex modern user interfaces, it’s only matter of time before your app becomes a mess of unordered styles, reducing consistency and making it harder for new code to be added or changes made to the existing codebase. In this article, Ajay NS welcomes you to take a detailed dive into the different ways of organizing styling in modern applications which often have complex interfaces and design patterns. Let’s walk through BEM, preprocessors, CSS-in-JS and even design systems to find out what works best for you.
Read more…
CSS Grid Layout is switched on by using display: grid. What this single value property actually means is display: block grid. We get a block level box which is defined as a grid container, with direct children that are grid items and participate in grid layout. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.
Read more…
The display specification is a very useful spec to understand as it underpins all of the different layout methods we have. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at the values which control box generation, for those times when you don’t want to generate a box at all.
Read more…
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 you how to use CSS Shapes to create the following five different types of layout: v-shapes, z-patterns, curved shapes, diagonal shapes, and rotated shapes.
Read more…
We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series. Rachel is going to take a look at the way that the values of display are defined in the Level 3 specification. This is a change to how we defined display in earlier versions of CSS. While it may seem unusual at first, we think these changes really help to explain what is going on when we change the value of display on an element.
Read more…
The z-index property, despite all that’s written about it, is still widely misunderstood and mishandled. Stacking issues in a complex single-page web application can become a major pain. Adhering to some principles, however, we can easily avoid these issues. In this article, Pavel Pomerantsev will recap what z-index actually is and how you can stop guessing whether it might work in any specific case and start treating it just like any other convenient tool.
Read more…
There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why. She will take a look at the different alignment methods. Instead of providing a comprehensive guide to each, Rachel explain a few of the sticking points people have and point to more complete references for the properties and values. You can go a long way by understanding the fundamental things about how the methods behave, and then need a place to go look up the finer details in terms of how you achieve the precise layout that you want.
Read more…
Art direction has been part of advertising and print design for over 100 years, but on the web art direction is rare and there have been few meaningful conversations about it. Art Direction for the Web by Andy Clarke changes that and explains art direction, what it means, why it matters, and who can do it. Jump to table of contents or pre-order the book right away. This is a book about why art direction matters and how you can art-direct compelling and effective experiences across devices and platforms.
Read more…
There are a good number of benefits in being able to write SVG by hand, such as optimizing SVGs in ways a tool can’t (turning a path into a simpler path or shape), or by simply understanding how libraries like D3 or Greensock work. In this article, Bryan Rasmussen will show you how to turn SVG circles into paths which you can use in animation and text paths, as well as how to turn paths into circles. Once you’ve figured out how it all works, you’ll be able to achieve some quite practical effects. Let’s dig in.
Read more…
The CSS Working Group have designed an aspect ratio unit for CSS. While this isn’t in browsers yet, in this article Rachel Andrew takes a look at the process of designing a new sizing method and explains how it will work. This is a new resolution, so we have no browser implementations yet, but Rachel thought it would be worth writing up the proposal in case anyone in the wider web community could see a showstopping issue with it. It also gives something of an insight into the work of the CSSWG and how issues like this are discussed, and new features designed.
Read more…
