HTML & CSS
Reggie Dawson, Jan 29

Sass Basics: The Function Directive

Reggie shows us the basics of Sass' @function directive and how we can use it.
HTML & CSS
Cathy Dutton, Jan 27

A Dynamic Gradient Text Function in Sass

Cathy, shows us how we can create a dynamic gradient text function for webkit browsers.
HTML & CSS
Hugo Giraudel, Jan 22

The Ultimate Long-shadow Sass Mixin

Hugo Giraudel shows off a really powerful Sass mixin to create a nice CSS3 long-shadow effect.
HTML & CSS
George Martsoukos, Jan 20

Super-fast Responsive Layouts with Jeet

George introduces us to Jeet a grid system that works with Sass or Stylus that keeps the grid in the CSS and not in the markup
HTML & CSS
Hugo Giraudel, Jan 15

Extra Map Functions in Sass

Hugo shares some extra functions we can use when using Sass maps.
HTML & CSS
Ahmad Ajmi, Jan 13

Manage RTL CSS with Sass and Grunt

Ahmad shows us how to use the power of Sass and Grunt to make CSS for multi-lingual sites with left-to-right and right-to-left languages a breeze.
HTML & CSS
M. David Green, Jan 06

Sinatra and Bourbon - Web Development My Way

M. David Green shows us how to get Bourbon up and running in your Sinatra projects.
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
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.
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
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
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
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
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
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?

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