CategoryCSS

August 15, 2018 — In this article, William Lim describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described here. A good understanding of this effect is very helpful for building or designing any website that has fixed elements. Read more…

August 13, 2018 — For the entire history of CSS Layout, being able to properly align things on both axes seemed like it might truly be the hardest problem in web design. The alignment properties that you might think of as the flexbox alignment properties are now fully defined in the Box Alignment Specification. If you have ever been confused about when to align and when to justify, this article will make things clearer! Today, Rachel Andrew will take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works. Read more…

August 2, 2018 — In this article, the beginning of a series on Flexbox, Rachel Andrew will take a detailed look at what actually happens when you add display: flex to your stylesheet. She will take the initial values of Flexbox, in order to explain what actually happens when you say display: flex. It’s a surprising amount once you begin to unpack it, and contained within these few properties are many of the key features of flex layouts. Read more…

July 16, 2018 — Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library, we can continuously utilize past efforts and avoid revisiting already solved design and development challenges. In this article, Oliver Williams looks at augmenting HTML with components that have built-in functionality and styles. He’ll also show you how to make these custom elements reusable across projects using NPM. Read more…

July 11, 2018 — Learning to code can be tough. If you are new to JavaScript and/or have struggles adding it to your skillset, Murat Kemaldar may have an approach for you to overcome those barriers. You are definitely not alone, and you have every right to think that learning to code is a tough nut to crack. In this article, Murat shares his advice on how writing code differently and poetically has helped him overcome his initial struggles and insecurities. Read more…

July 9, 2018 — CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid. Rachel Andrew is going to describe a method of working that she’s adopted over the past two years that helps her to manage CSS across her projects. Read more…

July 3, 2018 — CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew is going to explain what is currently part of the Working and Editor’s Draft of that spec. Note that everything here is subject to change, and none of it currently works in browsers. Take this as a peek into the process! Read more…

June 18, 2018 — CSS styles isolation is the most frequent start point of the BEM usage. But this is the least that BEM can give you. BEM brings a system approach in your project and keeps it from the mess. Nevertheless, many developers believe that such a system approach like BEM puts additional boundaries on their project and makes your project overloaded, cumbersome, and slow. In this article, Inna Belaya will be collecting all of the main aspects of BEM in a condensed form. She will help you understand the basic ideas of BEM in just 20 minutes, and to reject prejudices that the system approach is detrimental to your project. Read more…

June 13, 2018 — Smashing Book 6 is here with everything you need to know to tackle the new adventures web design and development are bringing along. No theory, just things that worked in practice. This book is dedicated to the challenges and headaches that we are facing today, and how to resolve them. In this article, Vitaly Friedman tells you everything about it! Read more…

June 4, 2018 — In this tutorial, you will build a sci-fi ID card for Avengers. Today, Kunal Sarkar will teach you Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project. You will learn an effective way of making a full-page background, centering elements with Flexbox and auto margins, and see the basic usage of Flexbox and nested Flexboxes to make single dimension layouts. Let’s get started! Read more…