Sometimes, you might wonder why something ends up the size that it is. Or, you might want to do something different to the default behavior. To do so, you need to know something of how the underlying algorithms figure out how to distribute space. When starting to use Flexbox and Grid, it can be frustrating to find that we sometimes don’t get the layout we expect. Often this is due to the way sizing is calculated in these new layout methods. In this article, Rachel Andrew will try to explain exactly how big that box is, and how it got to be that size!
Read more…
Writing in a new language requires time and practice. Front-end developer Brian Holt guides readers through building a drum sequencer in Elm. In part one of this two-part series, he’ll walk through the foundational concepts in Elm, i.e. getting started, using types, rendering views, and updating state. You will learn how to work with the Elm architecture in order to create simple applications.
Read more…
Once web apps function like native apps, the design interactions would also change to address the use case — namely, the ubiquity of animations. As web developers, we need a good foundation to create animations that are both performant and maintainable, which is paramount to the native web app landscape. In this article Christopher Ng will show you how to go from After Effects to CSS transitions, animations and keyframes.
Read more…
This article is about the Block Formatting Context (BFC). Today, Rachel Andrew will explain the existing ways to create a Block Formatting Context, why it is important in CSS layout, and show you a new method of creating one. She’ll explain what a BFC is through examples which are likely to be familiar to you, and then show you a new value of display, that really only makes sense once you understand what a BFC is and why you might need one.
Read more…
In this article, Huijing Chen covers known and obscure features of Firefox DevTools that can come in handy when you’re building and debugging CSS Grid layouts. You may have heard quite a bit of talk about a CSS feature called “Grid” this year. If you are someone who cringes when you hear the words “CSS” and “grid” in the same sentence, then I highly suggest you check out this new CSS module called CSS Grid.
Read more…
How do you come up with your list of supported browsers? Why would you force a bunch of JavaScript onto those devices? The question of browser support has to be addressed when using any new CSS. In this article, Rachel Andrew will explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
Read more…
There are methods that enable the naming of lines and even grid areas. Using these methods enables easier placement of items by name rather than number, but also brings additional possibilities when creating systems for layout. In this article, Rachel Andrew will take an in-depth look at the various ways to name lines and areas in CSS Grid Layout, and some of the interesting possibilities this creates. Try not to get hung up on what is “right” or “wrong”. If you find a method confusing, or it doesn’t seem to work in your context, simply don’t use it. The beauty of this is that we can choose the ways that make the most sense for the projects we are working on.
Read more…
Prior to CSS Grid Layout landing in browsers, many people saw flexbox as the answer to all of our design-related problems. However, flexbox doesn’t provide a grid system any more than floats do, although it does make creating one simpler. CSS Grid is such a different way of approaching layout that there are a number of common questions Rachel Andrew is asked as people start to use the specification. In this article, she will answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.
Read more…
Uploading an entire folder or folders of files is usually quite a hassle, as files in each folder have to be selected manually. And then some folders might contain sub-folders as well. You can use webkitdirectory, a non-standard attribute that allows users to pick a directory via a file input. Currently supported in Chrome, Firefox and Edge. It’s important to note that the attribute is non-standard, so it will not work for everybody. However, it doesn’t break anything as browsers that don’t support it will just ignore it, so you can easily progressively enhance your file upload without relying on the feature being supported everywhere.
Read more…
