The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article Rachel Andrew explains why it is different to other layout methods, and shows some useful patterns and sites which showcase it well. Rachel will take a look at Multi-column Layout — often referred to as multicol or sometimes “CSS Columns”. You’ll find out which tasks it is suited for, and some of the things to watch out for when making columns.
Read more…
Let’s make 2019… fast! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences today.
Read more…
In this article, you can learn how to build the animated note display from the Awwwards website. It discusses the HTML5 SVG circle element, its stroke properties, and how to animate them with CSS variables and Vanilla JavaScript.
Read more…
You don’t need to commit to memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. In this article, Rachel Andrew aims to guide you along your path of learning CSS and outline resources for further reading on key areas of modern CSS development. Many of those are things right here on Smashing Magazine. Her aim is to cover the breadth of modern CSS with a focus on a few key areas, that will help to unlock the rest of the language for you.
Read more…
Rendering and interaction have become a lot more consistent across browsers in recent years. It’s still not perfectly uniform, however, and a lot of small issues can trip you up. Add on top of these issues the variables of different screen sizes, language preferences and plain human error, and we find a lot of small things to trip up a developer. When implementing a user interface in a browser, it’s good to minimize those differences and issues wherever you can, so that the UI is predictable. In this article, Ahmad Shadeed has put together a list of common issues, with their solutions, as a handy reference guide for when you’re working on a new project. Let’s begin.
Read more…
With the advent of responsive web design and the mobile-first approach, it’s been seven wonderful years since any new concepts have compelled us to adapt the way in which we write CSS at the base level. These techniques are at the bedrock of most web developers lives, and they’ve served us well, but alas, times change, and developers constantly iterate. As we increase the efficiency of our methods and the project requirements become more complex, new frustrations emerge. Well, today, Alastair Hodgson has a small surprise. Behold: Generic First CSS.
Read more…
Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance. In this article, Leonardo Losoviz will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code. You will see, as an example, how WordPress loads 43kb of scripts to print the Media Manager, which are pure JavaScript templates and could perfectly be loaded as static resources.
Read more…
Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, Rachel Andrew discovered a range of reasons people use a third-party framework and the positive and negative things about doing so. In this article, you will discover that the reasons for using frameworks are varied, and not simply centered around use of the grid system contained in that framework. We hope that by unpacking these reasons, Rachel can help you to make your own decision, in terms of what is best for the sites and applications that you are working on, and also for the team you work with.
Read more…
Last week, Rachel Andrew attended the CSS Working Group meeting at W3C TPAC, and rounds up some of the discussions in this post — including those things where you can help make a decision. Today, she will explain a little bit about what happens at TPAC, and show some examples and demos of the things she discussed at TPAC for CSS in particular.
Read more…
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, John Rhea will discuss how they operate and give you some ideas about how to use them. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic.
Read more…
