If you don’t want your design to look like it’s made out of unrelated things, this article is for you. There is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, you can propagate styles that cross the borders of your HTML components, ensuring a consistent design with minimal effort. Today, Heydon Pickering is going to revisit inheritance, the cascade and scope here with respect to modular interface design. He aims to show you how to leverage these features so that your CSS code becomes more concise and self-regulating, and your interface more easily extensible.
Read more…
In this article Rachel Andrew explains how Flexbox and CSS Grid fit together, and how we can build resilient and flexible layouts today while providing a decent fallback for older browsers. Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient.
Read more…
With so many amazing designers creating such beautiful animations, any developer would naturally want to recreate them in their own projects. Now, CSS does provide some presets for transition-timing-function, which add some level of smoothness and realism, but they are very generic, aren’t they? Motion curves are primarily used by animators to create advanced, realistic animations. In this article, Nash Vail will show you how motion curves work. Let’s begin!
Read more…
In this article, Filip Bartos will share his notes about installing and configuring a critical-path performance optimization using Express and Handlebars for an isomorphic React website. This website was developed using React, running on an Express server, and it was going well, but Filip still wasn’t satisfied with a load-blocking CSS bundle. So, he started to think about options for how to implement the critical-path technique on an Express server. Throughout this article, Filip will be using Node.js and Express. Familiarity with them will help you understand the examples.
Read more…
If you’re building a physical structure, like a large edifice, with weak material, a lot of external support is required to hold it together, and things have to be overbuilt to stay sturdy. When you’re building a website out of HTML, CSS and JavaScript, this external support might look like frameworks, plugins, preprocessors, transpilers, editing tools, package managers and build processes. Instead of adding yet another plugin to the top of the stack, Yommy Hodgins thought of extending one of the core languages, CSS, to strengthen the material that websites are built from, developing better, stronger websites that require less external support and tools to build.
Read more…
In this article, Anna Selezniova will share her experience using CSS 3D effects for the first time in a real project and hopefully inspire you to take on challenges. Anna has gained useful experience in working with CSS 3D and she has discovered many interesting properties. More importantly, she has learned that one should never give up; most likely you will find a way to accomplish the task.
Read more…
The theremin’s unique sound proves perfect for sci-fi soundtracks and Good Vibrations by the Beach Boys. The world is a better place. With this tutorial, Stuart Memo hopes you could see how simple getting something musical up and running fairly quickly can be. You can even use the following techniques to make a synthesizer. Stuart created a little HTML keyboard called Qwerty Hancock to help you do this very thing. Feel free to show off your own creation!
Read more…
BEM has been an absolute lifesaver for me in my effort to create applications in a modular, component-driven way. David Berner has been using it for nearly three years now, and the problems above are the few stumbling blocks he’s hit along the way. This article aims to be useful for people who are already BEM enthusiasts and wish to use it more effectively or people who are curious to learn more about it.
Read more…
Dependencies are everywhere. They’re unavoidable. They aren’t inherently bad, but if you don’t consider the possibility a given dependency might not be met, you run the risk of frustrating your users. Reducing dependencies improves the likelihood that your site will be usable by the greatest number of people in the widest variety of scenarios. Even knowing this, however, it’s easy to overlook the most basic dependencies our projects have, undermining their resilience in the process. To illustrate this point, consider the humble submit button.
Read more…
If you write CSS for a living, it is important to understand how to write valid CSS property values correctly. Once you understand how different values can be combined or multiplied, the CSS property value syntax becomes much easier to comprehend. The following syntax can be hard to understand if you don’t know the various symbols and how they work. However, it is worth taking the time to learn. If you understand how the W3C defines property values, you will be able to understand any of the W3C’s CSS specifications.
Read more…
