certainlyakey starred WebDevStudios/wd_s

FOAAS (Fuck Off As A Service) provides a modern, RESTful, scalable solution to the common problem of telling people to fuck off.

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.

certainlyakey starred una/svg-icon-system-boilerplate

px-em is a px to em tool which allows you to work out the em sizes from px. Just add the parent px size in the top box, required size in the bottom and you're done!

The primary goal of Varying Vagrant Vagrants (VVV) is to provide an approachable development environment with a modern server configuration.

VVV is ideal for developing themes and plugins as well as for contributing to WordPress core.

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…

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.”

The @extend directive in Sass can produce undesirable side effects. David Khourshid shows how to use @extend effectively to produce clean & organized CSS.

When we work at scale, we often find that we spend a large amount of our time reading, maintaining, and refactoring existing code, rather than writing and adding new features. This is the reason we focus so much on things like architectures, naming conventions, methodologies, preprocessors, scalability, etc.: because writing CSS is easy; looking after it is not.

certainlyakey starred CSSSR/csssr-project-template

certainlyakey starred sass-mq/sass-mq

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.

@extend is now widely considered an anti-pattern, so its usage is thankfully fading out, but we’re not quite there yet.

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.

eyeglass is a node-sass (github) extension manager built on top of npm. Using eyeglass, you can bring the power of node modules to your Sass files. [Allows to do a global import sass files in a folder]

Why and how one should switch from icon fonts to SVG files, presentation given by Sami Keijonen in Exove's WordPress Café on May 10th, 2016.

Adds a user-friendly multilingual dynamic content management. [Free alternative to WPML]

Do you add a descriptive title attribute to your links? Did you know that you might be making your site even less accessible? Everything I thought I knew about the title attribute was proved wrong when I started using a screenreader.

Minify images seamlessly

Icons! We see them all over the web, and they're essential to most pattern libraries and web design systems. I recently needed to implement such a system. It had to be non-prescriptive, scalable, and dynamically editable via CSS. The icons were to be used by multiple teams in many different applications, built with various frameworks and techniques. They needed to have the ability to be restyled, get cached, and be updated quickly and easily as more icons are added. Basically, the icon system needed to be really, really flexible. Challenge accepted.

A simple GUI to set up virtual machines for Web development.

Ansible allows to control what's gonna be installed inside the VM (webserver, database, PHP, Drupal etc.).

Check unicode support for browsers & devices

Interestingly I found that there are two actions taken by the browser: firstly on the percentage itself - for example - Internet Explorer 7-11 will truncate any percentage to 2 decimal places, more modern browsers will round to a large number of decimal places.

Lint: Bad practices of CSS with explanations

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.

BYC — Baltic Yachting Club, морская школа, основанная при яхт-клубе Baltsail 2006 году, партнерская школа всемирной системы сертификации яхтсменов International Yacht Training Worlwide, проводит подготовку и обучение судоводителей маломерных судов, капитанов катеров и яхт.

12 мая Россия присоединяется к международной системе автоматического обмена налоговой информацией. Теперь российская налоговая служба сможет получать данные об иностранных счетах россиян из десятков разных стран. Правда, ФНС придется подождать до 2018 года, когда соглашение начнет действовать.

Managing CSS at scale is hard; and a lot harder than it should be. ITCSS is a simple, effective, and as-yet unpublished methodology to help manage, maintain, and scale CSS projects of all sizes.
In this talk we’ll take a sneak peek at what ITCSS is and how it works to tame and control UI code as it grows.

certainlyakey starred HugoGiraudel/sass-boilerplate

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.

certainlyakey starred bbc/gel-grid

certainlyakey starred at-import/breakpoint

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.

But lately (several months) I’ve been thinking can we use SVG icons in Social Menu instead of icon fonts. Leland Fiegel picked up my question in Twitter and rolled his own idea. It’s not bad solution but what if we could do this without Javascript.

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

FOAAS (Fuck Off As A Service) provides a modern, RESTful, scalable solution to the common problem of telling people to fuck off.

...And a crossbrowser sticky footer solution

Sage is a WordPress starter theme based on HTML5 Boilerplate, gulp, Bower, and Bootstrap Sass, that will help you make better themes.

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.)

Ideally, we should all be developing our code in our own little space on our own little local server. This allows us to easily make changes without messing up production code or stepping over other's work. This is usually cost prohibitive so we're "forced" to use virtual machines to make this a reality.

The problem we face is that each developer needs to have a virtual machine that is setup exactly (or nearly exactly) like our production server. This requires a long list of configuration changes that need to be made on every machine. For example, install the apache package, update this configuration file, setup MySQL so you can access the databases remotely. Then we run into more problems when additional changes are needed because the developer has to take time out of their schedule to make them on each machine. There are also passwords that have to be remembered and /etc/host changes that need to be made. You'll be in even worse shape if the deployment consists of multiple VMs.

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.

GZIP compression can be enabled for your website and saves at least 50% of your bandwidth usage. With this tool you can check if your web server is sending the correct GZIP enabled header. Enter your website URL below and we’ll test if the web server sends the GZIP command to your clients!

Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different naming convention to BEM, but an augmentation: small additions that level BEM up a notch. This extended BEM syntax has been dubbed BEMIT, as it borrows some paradigms and patterns from the (as yet unpublished) Inverted Triangle CSS architecture. BEM + ITCSS = BEMIT.

The more your website resembles an application over a document, the more global typography styles become a pain to build upon. Even heavily content-based websites seem more like an app in the modern world of responsive design. The solution? Just scope typographic styles:
.text h1 {...}
.text p {...}

certainlyakey starred bbc/gs-sass-tools

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.)

Redux is a simple, truly extensible options framework for WordPress themes and plugins.