What Zen was to the 70’s (most famously with motorcycle maintenance), the Tao Te Ching was to the 90’s. From Piglet and Pooh to Physics and back, many have sought sense in applying the Tao Te Ching to something (the Tao of Physics), or something to the Tao Te Ching (the Tao of Pooh). It can be a cheap trick, but lately it has struck me that there is more than a little to be understood about web design by looking through the prism of the Tao.

H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

Screenqueri.es is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions.

Nathan Smith's Fluid Grid

CSS3 Drop-Down To Accordion Responsive Menu by Ian Hansson @teapoted

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

Style Guide

Roots is a starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter.

Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The “Don’t use IDs in selectors” suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me because smart people have been saying prefer classes to IDs for a while now. The article was light on reasons why this suggestion might be bad, but it boils down to:

I find myself in situations where I’m using CSS generated content to add a glyph to a tag using :after to add more meaning, say a check mark for a list of features, or an arrow to a next link. Most times, I’ll find a glyph using Jesse Gardner’s fantastic SymbolAssist or by simply pressing Command-Option-T ⌘⌥T on my Mac to pull up the characters palette.

Important! No javascript has been harmed in these demos. Nowhere on this page. Nada. Zilch.

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. tell me more

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

A simple, lightweight, jQuery photo viewer for the web

In Genesis we have added the ability to create columns (column classes) within the content area. Below you find instructions on how to use content column classes.

HTML/CSS + media queries (no images, no JS*) this is a simple interactive experiment with responsive design techniques.

Minimus is a GUI frontend for Yahoo’s YUI Compressor. Instead of using inconvenient and slow websites to compress your JavaScript and CSS, you can do it right on your Mac.

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

CSS spec­i­fi­ca­tions

This page contains a list of all completed specifications and drafts by the CSS WG (formerly “CSS & FP WG”). If you want to follow the development of CSS3, this is the place to start. You have ideas? Contributions? See “If you want to help” on this page.

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width? You could use text-align:center;, but that won’t work on 100%-width block-level elements either… that’ll only work on text-level elements.

The first one is used to render the page on screen, the other one is used for printing the page and print previewing it. Good.

The thing is, when it comes to performance, the browser won't render any part of the page, until all stylesheets are downloaded (fiddled with here). That includes, unfortunately, stylesheets not designed for the currently rendered media. In other words, the browser won't display your page, until the print stylesheet is also downloaded, although it's not used at all for displaying the page. That sucks and should really be addressed in future browser versions.

A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is also compatible with my perfect liquid layouts. Let's start with a basic example then I'll explain how it works.

No longer must your rainbow dividers be images slowing down your computer! Make them hardware accelerated!

In defense of CSS hacks — introducing “safe CSS hacks”

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

Off the back of this article in Net Magazine last week, and the subsequent few tweets popping up in my stream, I’ve finally managed (in no small part from the help of Nathan and Alex) to pull together some of my thoughts and concerns regarding CSS grids and how they could (or, maybe, should) be created.

Our PSD to HTML coding and implementations support all the latest and most popular browsers: Internet Explorer 7+, Firefox, Opera, Chrome and Safari.

a collection of sites using media queries

See exactly which lines of code are not supported in over 24 email clients.
Email designers that are tired of trawling through check lists, this is for you.

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

GridCalc is a easy to use grid calculator. Just enter the desired width of your page and an aproximate range for your column and gutter width and the calculator will give you all the possible combinations within the limits you entered. You get a nice visual representation of the results, click preview on a result and you get a better presentation of how the grid can be used. When you have decided which grid configuration you want to use you can download the configuration as a css file to use in your project.

Here’s a quick solution to the problem of using regular CSS image replacement on inputs. The text-indent method fails in IE so we need a slightly different approach.

A jQuery plugin for radical web typography

Real web type in real web context

Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Debuted in a special issue of A List Apart, Web Font Specimen is now in its second iteration.

A ‘tiny screen first’ boilerplate extension*

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

CSS Tools: Reset CSS

Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows <tr> using only CSS. IE however, has an erratic support for :hover at best, depending on the particular version your visitor is using.

This document outlines our de-facto code standards. The primary motivation is two- fold: 1) code consistency and 2) best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. By adhering to best practices, we ensure optimized page loading, performance and maintainable code.

Finding a good Typekit font for long blocks of text is hard, but Sleepover has made it a lit­tle eas­ier for ya. We’ve sifted through the Typekit library and pared it down to the fol­low­ing list accord­ing to two sim­ple rules: first, the font had to have low­er­case, upper­case, bold, italic, and bold italic; sec­ond, the font couldn’t be hand­writ­ing, script, or mono­space. If you think we’ve missed some­thing, or made any mis­takes, send a note to contact@sleepoversf.com. A spe­cial thank you goes out to John Holdun and Bruce Spang for awe­some jQuery help. Happy typesetting!

Stylus

Expressive, dynamic, robust CSS

{Less} extends CSS with variables, nested rules, operators and more. If you're still building websites without it, you're an idiot. This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

Internet Explorer User Agent Style Sheets

A UA Style Sheet is a simple set of css styles that each web browser uses before any other css styles are applied.

This chart lists and compares the different default style sheets used to render HTML in the four major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.

You can download each of these UA style sheets by using the links at the top of this chart.

The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories.

We asked all students to use the 12 column, 960 grid when designing their pages in order to focus their work. However, it was very common for students to build unnecessarily complex grids instead of taking advantage of the simplicity that the 960 grid offers. Let’s look at four examples of problematic grids, along with strategies for improving them. As you’ll see, the solutions are straightforward: make it simpler!

Initializr is a simple tool to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate, a powerful HTML5 template created by Paul Irish and Divya Manian. Initializr will generate for you a clean customizable template based on Boilerplate with just what you need to start.

/* ------------------------------------------------------------- CSS3, Please! The Cross-Browser CSS3 Rule Generator =================================================== You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match, that's all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet. ------------------------------------------------------------- */

We are passionate about the web, learning, and craftsmanship. We want you, as web designers and developers, to be successful in your careers. We feel, though, that W3Schools is harming the community with inaccurate information. Like any other authoritative educational resource, W3Schools should both hold itself to, and be held to, the highest standards.

We hope we can illuminate why W3Schools is a troublesome resource, why their faulty information is a detriment to the web, and what you (and they) can do about it.

HSL(a) is the jam. It's a piece of cake to do mentally, too. Hue is like this: ROY G BIV is 0 to 300, and then back to red again at 360. Saturation % is from grey to intense color; lightness % and alpha 0-1 are easy 'nuff. read more on hsl awesomeness.

Fortunately, most (if not all) of your WP CSS work happens at the “theme” or “post” level. And when you do need to style the Admin, it’s usually easiest to just do it en bloc via plugin. You can also do it the old-fashioned way.

There has been a lot of discussion on that third part—including a superb presentation by Bryan Rieger—but there has been less emphasis on those first two parts. Anyone hoping to take an existing fixed-width rigid design and adapt it for smaller screen widths using media queries is going to be disappointed and frustrated.

This week’s extended round up takes a look at some superb examples of responsive web design, as well as the best resources to find out more about this new way of designing for a flexible internet experience.

I’ve created a selection of 960 pixel-wide uniform grid templates ranging from 3-columns to 16-columns, for both Adobe Photoshop and Fireworks

A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world.

Lectures, Screencasts and conferences for real web developers & designers.

I realised quite late that to say something meaningful about CSS, I would have to know exactly what the terms used mean. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS.

Bookmark this page, if you are prone to panic attacks while racing a deadline and are likely to have issues with your CSS at that time.

By far, one of the most frustrating parts of dealing with browser inconsistencies has got to be forms. There are two distinctively differing schools of thought regarding (not) styling form elements. For the longest time, we’ve had people on both sides of the proverbial fence, neither group being particularly pragmatic.

Ten years ago, only the most cutting-edge web designers used CSS for layouts and styling. Browser support for CSS layouts was slim and buggy, so these people advocated for web standards adherence, while creating hacks that made CSS layouts work in all browsers. One hack that became widely used was browser sniffing: Detecting which browser and version the user had by looking at the navigator.userAgent property in JavaScript. Browser sniffing allowed for quick and easy code forking, allowing developers to target different browsers with different instructions.

HTML5 ★ Boilerplate

We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.