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
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.
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.
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.
2 COMMENTs
HTML & CSS
M. David Green, Oct 14

Adding Bitters to Bourbon and Sass

M. David Green tells us how using Bitters along with Bourbon helps speed up Sass development with simple, unopinionated pre-defined HTML elements.
4 COMMENTs
HTML & CSS
M. David Green, Oct 09

4 Sass Features You May Not Have Tried

M. David Green shows us some great Sass features you might not have used when starting developing using the language.
HTML & CSS
James Steinbach, Oct 07

Managing Color Values with Sass

James Steinbach takes a look at using Sass Maps and functions to help with managing CSS color values, with a demo you can try out.
7 COMMENTs
HTML & CSS
Hugo Giraudel, Oct 02

Building a Step Wizard with BEM and Sass

Hugo Giraudel with a detailed tutorial on creating a step wizard, commonly found in e-commerce, using BEM and Sass techniques.
37 COMMENTs
HTML & CSS
Hugo Giraudel, Sep 25

Beware of Selector Nesting in Sass

Hugo considers different use cases for selector nesting in Sass while also looking at ways it shouldn't be used and the problems it brings.
11 COMMENTs
HTML & CSS
Vinay Raghu, Sep 24

Using Source Maps to Debug Sass in Chrome

Vinay Raghu explains the source maps feature in Chrome, how it's beneficial to Sass debugging, and how you can enable the feature in the developer tools.
21 COMMENTs
HTML & CSS
Satheesh Kumar, Sep 18

Introducing CCSS (Component CSS)

Satheesh Kumar introduces a new architecture, inspired by a number of different tools and methodologies, for helping with building large applications.
1 COMMENT
Web
Paul Wilkins, Sep 12

On Our Radar: New iPhones, New Module Syntax, and CSS Inheritance

Paul Wilkins is back with the most interesting news and views from the week that was, including plenty of new gear from Apple.
HTML & CSS
Hugo Giraudel, Sep 10

A Bulletproof Function to Validate Length Values in Sass

Hugo shows us how he's built a better function to validate length values in Sass, taking a number of different circumstances into consideration.
9 COMMENTs
HTML & CSS
Reggie Dawson, Sep 05

5 Useful Sass Mixins in Bootstrap

Reginald Dawson has some go-to mixins that he's uncovered in Bootstrap's Sass port. Here he describes 5 of them and how they can be used in your Bootstrap projects.
8 COMMENTs
HTML & CSS
M. David Green, Sep 03

Sass and Bourbon Neat for Lightweight Semantic Grids

David Green looks at the features of Neat, a lightweight semantic grid system for Sass, from the creators of Bourbon.
74 COMMENTs
HTML & CSS
Zell Liew, Aug 29

Bootstrap's Grid System vs. Susy: A Comparison

Zell Liew looks at the grid system in Bootstrap and describes what he thinks is a superior grid framework: Susy.
Web
Paul Wilkins, Aug 29

On Our Radar: Walkthroughs, Black Boxes and a Sordid Legacy

Paul Wilkins is back with a summary of the best in web development news from the week that was.
HTML & CSS
Alexander Futekov, Aug 28

HSB Colors with Sass

Alexander Futekov looks at why you should be using HSB colors and how to create a Sass function to implement them just like other color function values.