HTML & CSS
Joe Hewitson, Jan 05

Video: Getting Started with Sass in Foundation

A video screencast teaser for Joe Hewitson's Learnable course that shows you how to build a website project using Sass and the Foundation front-end framework.
HTML & CSS
Matt Carella, Dec 30

A Good Front-End Architecture

Matt goes through what we need from a good front-end architecture and outlines how we can create the structure for it.
HTML & CSS
Hugo Giraudel, Dec 23

Introducing Sass-Compatibility

Hugo shows us a new tool he and other have been working on to see if we can move our codebase from one Sass engine to another.
HTML & CSS
Louis Lazaris, Dec 23

Write Better Markup with HTML Inspector

Louis Lazaris takes a look at HTML Inspector, and easy-to-use and customizable markup quality tool to help teams write better and more consistent HTML.
HTML & CSS
Hugo Giraudel, Dec 18

Functional Wrappers in Sass

Hugo shows us a great way that we can build a functional wrapper with functions and mixins.
Design & UX
Alex Walker, Dec 17

Dreamweaver CC: The Web Development Tool That Opens PSDs?

Dreamweaver's ability to work directly with PSDs is a new approach to bridging the gap between layouts and code. Alex takes it for a test-drive.
HTML & CSS
M. David Green, Dec 16

Bourbon Refills Provide Drop-In Design and Functionality

M. David Green shows how using the Sass'y Bourbon Refills can provide drop-in design and functionality for your site.
HTML & CSS
Ivaylo Gerchev, Dec 15

Semantic UI 1.2: A New Version with Lots of New Features

Semantic UI is now past its first major point release, at 1.2. Ivaylo Gerchev looks at many of the new features added since 1.0.
HTML & CSS
Hugo Giraudel, Dec 11

Why You Should Avoid Sass @extend

Hugo gives reason why we should avoid the @extend directive in Sass for better comprehension of the code we write.
HTML & CSS
Ivaylo Gerchev, Dec 11

The 5 Most Popular Frontend Frameworks of 2014 Compared

Ivaylo Gerchev looks at the most downloaded frontend frameworks available today and offers some suggestions on how to choose one that's right for you.
HTML & CSS
Hugo Giraudel, Dec 10

Hacking a Routing Component in Jekyll

Hugo Giraudel comes from a Symfony background and in this post, he describes how he hacked together a URL-to-name mapping component in Jekyll.
HTML & CSS
James Steinbach, Dec 09

Creating a Responsive Grid System with Susy and Breakpoint

James shows us how to combine Susy with Breakpoint to make a responsive grid system.
HTML & CSS
Massimo Cassandro, Dec 09

Finding a Date Picker Input Solution for Bootstrap

Massimo Cassandro looks at some of the challenges in creating a date picker input that works cross-browser and is compatible with Bootstrap.
HTML & CSS
George Martsoukos, Dec 04

CSS Sprites with Sass and Compass

George Martsoukos shows us some of the basic functionality that's built into Compass to help make CSS sprites that much easier and quicker.
HTML & CSS
Hugo Giraudel, Dec 02

Building a Linear-gradient Mixin in Sass

Hugo shows us how to make a robust linear gradient Sass mixin.
10 COMMENTs
HTML & CSS
James Steinbach, Nov 26

Write CSS3 without Worrying about Prefixes

James Steinbach discusses the different methods you can use to automate adding any necessary vendor prefixes to your CSS.
9 COMMENTs
HTML & CSS
Zell Liew, Nov 25

How to Use Susy with Bootstrap

Zell shows us how to add the Susy grid framework to a UI or prototyping library like Bootstrap
48 COMMENTs
HTML & CSS
Aurelio De Rosa, Nov 25

10 Typical HTML Interview Exercises

Aurelio De Rosa helps you brush up on your HTML skills by presenting 10 problems you might be asked to explain in a front-end developer job interview.
9 COMMENTs
JavaScript
Louis Lazaris, Nov 24

Resources for JavaScript and DOM Compatibility Tables

Louis Lazaris looks for the perfect resource for JavaScript and DOM browser compatibility tables. A number of really good choices are available.
2 COMMENTs
HTML & CSS
Hugo Giraudel, Nov 20

Sass Multiple Arguments, Lists or Arglist

In this article Hugo Giraudel discusses where we should be using multiple arguments, a list or an arglist when writing functions or mixins in Sass.
HTML & CSS
Charlie Owen, Nov 18

Migrating Your Team to Sass

Charlie shares how to migrate your team from CSS to Sass with this in-depth guide
2 COMMENTs
HTML & CSS
Reggie Dawson, Nov 18

Anatomy of a Ghost Blog Theme

Reggie Dawson breaks down the different components of a Ghost blog theme, and how you can use that info to build your own responsive Ghost theme.
12 COMMENTs
HTML & CSS
James Steinbach, Nov 13

Passing Your Sass to Someone Sass-less

James gives us some options when handing over files to client who needs to edit your Sass, when they don't have Sass.
9 COMMENTs
Design & UX
Alex Walker, Nov 12

The Secret to Underlined Links That Don't Sting Your Eyes?

Hypertext Editing System - Brown University This is the Hypertext Editing System (HES) created at Brown University by the 'father of the hyperlink' - Ted Nelson in 1969. The coolest thing about the system was the built-in lightpen, that allowed the operator to manually underline the text they wanted to link. Gee Willikers, Mr. Peabody! You can almost trace that lightpen directly through to the underlined links we still use on the web today. The underline may be the most widely understood convention on the Web, and isn't going away any time soon. On the other hand, in typography circles, underlining has always been a serious no-no. Butterick's Practical Typography goes as far as saying: "Absolutely not. In a printed doc­u­ment, don’t un­der­line. Ever." So,.. accessibility and UX experts tell us we should use them, but we're told they are typographical poison. Mr. Rock. Can I introduce you to Mr. Hard Place?

The Problem

So, if we can't throw away the underlined link convention, can we make it better? What are its biggest failings? Beside the general cramping that comes with filling in the whitespace between lines, perhaps the biggest single issue is what happens when the underline touches the letterforms. Problems with lowercase 'q' and 'a'. One common example of nastiness is where the descenders on lowercase p, g, y, q and sometimes z often crashing into an underline. Light bauhaus-influenced fonts with short decenders seem to suffer worse than most typefaces. As you can see below with Google Fonts suchs as Rajdhani and Poiret One, it's visually difficult to discern the difference between a lowercase 'q' and an 'a' when an underline is involved. Quattrocentro's capital Q disappears into the underline Likewise, the tail on capital 'Q' is usually fine with an underline, but can present serious problems with certain typefaces. For instance, Quattrocentro has a very low, horizontal tail that almost disappears in an underline. The small tail on the capital 'J' also becomes less clear. Messy, right?

Is there a Solution?