SVG sprites & stacks galore — Node.js module that reads in a bunch of SVG files, optimizes them and creates SVG sprites in various flavours along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)

Icons are everywhere. These “little miracle workers” (as John Hicks described them) help us reinforce meaning in the interfaces we design and build. Their popularity in web design has never been greater; the conciseness and versatility of pictograms in particular make them a lovely fit for displays large and small.

But icons on the web have had their fair share of challenges. They were time-consuming to prepare for every intended display size and color. When high-resolution displays hit the market, icons looked particularly low-res and blocky compared to the text they often accompanied.

So it’s really no wonder that icon fonts became such a hit. Icons displayed via @font-face were resolution-independent and customizable in all the ways we expected text to be. Sure, delivering icons as a typeface was definitely a hack, but it was also useful, versatile, and maybe even a little fun.

But now we need to stop. It’s time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-Proof Rounded Corners and Scalable Inman Flash Replacements. Here’s why…

This article is to serve as a guide for best practices when using icon fonts on the web. Because icon fonts are still in their infancy, browser support and new technologies are constantly being developed. Be sure to check back often for updated information. If you have any knowledge or experience to contribute, please tweet to @pictos or email drew@pictos.cc to have it included in this article.

The BBC HTML Accessibility Standards and BBC Mobile Accessibility Standards and Guidelines outline the requirements and recommendations necessary for ensuring the BBC’s digital products are accessible to the widest possible audience.

Slideshows, sliders, carousels: whatever you call them, in terms of web design they are just evil. Do a quick Google search and you will see that most frontend developers and UX/UI designers can agree on this point and have been talking about it for years. But why do we still constantly see them? Part of the issue is that slideshows, especially in the hero region, are so ubiquitous that many clients see them as necessary and keep asking for them. They have essentially become a “home page standard.”

Back to architecture, shall we? I usually go with what I call the 7-1 pattern: 7 folders, 1 file. Basically, you have all your partials stuffed into 7 different folders, and a single file at the root level (usually named main.scss) which imports them all to be compiled into a CSS stylesheet.
base/ - resets and basic typography
components/ (or blocks/) - components with their separate mixins, images, variables, (also possibly scripts and markup)
layout/ - structural styling for main elements (asides, mains, headers etc.)
pages/ - styles specific to certain pages
themes/ - if site contains several color/typography themes - put here styling that should vary according to different themes
abstracts/ - common vars, functions, mixins, extends
vendors/ - external scripts or frameworks specific styling (jq-ui etc.)

Luckily for us, solutions exist to the problem of creating fast, responsive, fully customizable grids: Susy is a Sass-based grid framework. It’s very lightweight and enables you to create entirely custom grids in CSS without touching your markup.

Grandstand is a scalable front end architecture and a lightweight Sass framework. Consisting of a collection of common CSS abstractions and utility helper classes, Grandstand allows you to quickly development components in a reusable, performant manner.

certainlyakey starred bbc/gel-grid

Our Global Experience Language, (GEL), is the BBC's shared design framework which enables us to create consistent and delightful user experiences across all of our Digital Services.

I promised I’d write a blog with more details so here goes. When I started writing this I realised there was lot to say so I’m going to split this two blog posts which covers how we’re approaching CSS at BBC Sport.

Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons.

At many of the web development conferences I attend, there is a talk on how to use an integrated development environment to aid in programming. The speaker will almost invariably mention a few of his favorite keyboard shortcuts within that environment for performing his most frequently used activities. Programmers are big fans of using the keyboard instead of continually shifting between the keyboard and mouse.

During the winter 2014, me and my family rented an apartment from San Diego, CA for few months through my work. While staying there, we had an AT&T hotspot device that provided the network connection. For us, relying on this device, meant constant drops of connection, network latency like we’ve never seen before, and websites that were completely broken because Java­Script wasn’t loading at all. A part of this can be explained by the poor reception at the location where we were staying, but overall, the whole experience put me thinking.

About a year ago, I wrote Mixin or Placeholder (my first article here at SitePoint) immediately followed by What Nobody Told You About Sass Extend. And here I am, one year later, changing my mind again and writing why I think the @extend directive from Sass is really far from being the Eldorado.

The free web debugging proxy for any browser, system or platform

Accessibility is an important part of modern web development. It is our responsibility as creators of WordPress themes to make them accessible to all users, on any device. In this article, I’ll offer some simple tips to create better, more accessible WordPress themes.

As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.

A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.

In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

X’s are everywhere in user interface (UI) design. A powerful symbol, [x] is capable of closing windows and popups, toolbars and tabs and anything else that might otherwise be cluttering up your screen. via Pocket