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?

56 COMMENTs
HTML & CSS
Aurelio De Rosa, Nov 12

5 Obsolete Features in HTML5

Aurelio De Rosa offers a description of 5 elements we used to be encouraged to use in HTML5, but are not not part of the spec, made obsolete.
29 COMMENTs
HTML & CSS
Syed Fazle Rahman, Nov 11

Understanding Bootstrap's Grid System

Syed Fazle Rahman takes a detailed but succinct look at Bootstrap's grid system, breaking down the parts to get you up and running quickly.
8 COMMENTs
HTML & CSS
Byron Houwens, Nov 11

Sass Functions to Kick-Start Your Style Sheets

Byron shows us some of Sass' built-in functions and how you could use them to kick-start your style sheets.
1 COMMENT
HTML & CSS
Reggie Dawson, Nov 07

An Overview of Compass 1.0

In this article Reggie looks over the improvements made in the recent release of Compass, the Framework for Sass.
64 COMMENTs
HTML & CSS
Ahmad Ajmi, Nov 05

Using Helper Classes to DRY and Scale CSS

Ahmad Ajmi takes a look at how we can use classes in CSS to abstract class sets that each perform a single action, making our HTML more like Lego blocks.
6 COMMENTs
Web
Craig Buckler, Nov 05

HTML5 and the W3C Recommendation Ruckus

The HTML5 Specification has become a W3C Recommendation. Despite the media attention, Craig discusses why it'll have little impact on web development.
11 COMMENTs
HTML & CSS
Ivaylo Gerchev, Nov 04

Front-end Frameworks: Custom vs. Ready-to-use Solutions

Ivaylo Gerchev looks at the pros and cons of choosing between a prebuilt framework vs. a custom solution.
17 COMMENTs
HTML & CSS
James Steinbach, Nov 04

Switching from Ruby Sass to LibSass

James takes a practical look at inconsistencies between Sass 3.4 and the newly released LibSass 3.0
14 COMMENTs
HTML & CSS
Jacob Gube, Nov 03

6 Current Options for CSS Preprocessors

Jacob Gube shows us the most popular options for CSS preprocessors, along with some more obscure options you may not have considered before.
3 COMMENTs
HTML & CSS
James Steinbach, Oct 30

Sass-based Media Queries With Breakpoint

James Steinbach takes a look at the Breakpoint Compass extension from the Sass-y at-import team for media queries in responsive web design.
10 COMMENTs
HTML & CSS
Armando Roggio, Oct 29

20 HTML Elements for Better Text Semantics

Armando Roggio runs through 20 different HTML elements that you can use to mark up various parts of text on your web pages. Some of these might be new to you.
HTML & CSS
Hugo Giraudel, Oct 28

Dealing With Constants In Sass

In this article Hugo Giraudel shows us three options for creating and dealing with constants in Sass
27 COMMENTs
HTML & CSS
James Steinbach, Oct 23

Sass Grids: From Neat To Susy

James Steinbach discusses how, in Sass, he's moved from using Bourbon's Neat grid system to at-import's Susy grid framework.
1 COMMENT
HTML & CSS
Hugo Giraudel, Oct 21

Debugging Sass Maps

Hugo Giraudel explains how we can create a mixin in Sass to assist in debugging Sass maps and generating the CSS to check through.
10 COMMENTs
HTML & CSS
Pankaj Parashar, Oct 21

Building a Pull-Quote Custom Element with Polymer

Pankaj Parashar with a step-by-step tutorial demonstrating how to build a custom element using Polymer. His example builds a simple pull-quote element.
16 COMMENTs
HTML & CSS
Stephan Max, Oct 16

Optimizing the Critical Rendering Path

Stephan Max explains what exactly is the critical rendering path and how we can use that knowledge to make our pages load faster and thus improve the UX.
2 COMMENTs
HTML & CSS
James Steinbach, Oct 16

Scaling Values Across Breakpoints Using Sass

James Steinbach walk us through a complex Sass mixin that will generate CSS that scales across media query breakpoints to ease development.
51 COMMENTs
HTML & CSS
Heydon Pickering, Oct 15

Replacing Radio Buttons Without Replacing Radio Buttons

Heydon Pickering describes how he built beautiful, accessible custom radio buttons with just HTML and CSS and no reliance on complex ARIA or JavaScript.