CategoryCSS

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…

May 25, 2018 — Today we have a real choice in terms of the layout methods we use in CSS to develop our sites, which means we often need to make a choice as to which approach to take. Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today. In this article, Rachel Andrew will run through the various layout methods that you have available to you by explaining the basics of how they are used and what they are used for. Read more…

May 23, 2018 — The modern solution to developing for both modern and legacy browsers is feature queries. They allow us to write CSS that is conditional on browser support for a particular feature. In this article Ire Aderinokun explains how she developed the Feature Queries Manager. Find out how this tool can help you suport older browsers, and also how to create your own DevTools extensions. Read more…

May 16, 2018 — SVG supports the same kind of interactivity we’re used to with HTML. And with the addition of pointer-events, we can improve the way our SVG documents behave in response to user interaction. Every browser that supports SVG supports the property for SVG documents and elements. When used with HTML elements, support is slightly less robust. It isn’t available in Internet Explorer 10 or its predecessors, or any version of Opera Mini. In this article, Tiffany Brown will scratch the surface of pointer-events. Read more…