Author:

Thierry is passionate about Web Design and CSS. He loves the challenge of solving problems and dreaming up original ideas that get him out of bed in the morning and keep him working late at night. He is a front-end engineer at Yahoo! and owns TJK Design, css-101.org and ez-css.org. His twitter handle is @thierrykoblentz.

Twitter: Follow Thierry Koblentz on Twitter

Challenging CSS Best Practices

Editor’s Note: This article features techniques that are used in practice by Yahoo! and question coding techniques that we are used to today. You might be interested in reading Decoupling HTML From CSS by Jonathan Snook, On HTML Elements Identifiers by Tim Huegdon and Atomic Design With Sass by Robin Rendle as well. Please keep in mind: some of the mentioned techniques are not considered to be best practices.

When it comes to CSS, I believe that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching and more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle.

Challenging CSS Best Practices

For those of you who have never heard of the SoC principle in the context of Web design, it relates to something commonly known as the “separation of the three layers”: structure, presentation, behavior.

Read more...

Device-Agnostic Approach To Responsive Web Design

This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.

Device-Agnostic Approach To Responsive Web Design

Let’s start our journey by looking at the online tools such as Responsive Design Testing, Responsive.is, Responsinator and BriCSS. These pages let people check websites through a set of pre-built views based on various device sizes or orientations. Bricss even goes one step further and allows you to "customize" viewports by setting any dimensions you want.

Read more...

Styling Elements With Glyphs, Sprites and Pseudo-Elements

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.

Displaying icons in links and as custom list markers

[fblike]

Today, on the shoulders of giants, we'll try to push the envelope. We'll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique (you'll find an example below). The technique will work in Internet Explorer 6/7 as well.

Read more...

Equal Height Column Layouts with Borders and Negative Margins in CSS

"What? Another "Equal Height Columns" article? Enough already!" If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margins. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.

Two column layout

[fblike]

In this post we will build three layouts using CSS: a two column layout with no wrapper div, a two column layout with two vertical borders between the columns and a three column layout with a single wrapper. All layouts have coding examples and demos for your convenience.

Read more...
1

↑ Back to top