Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:

HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than three years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed.

Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

Zelf, met de hand, een website maken is tegenwoordig zo lastig nog niet. Echter, een grote maatwerk website is heel andere koek. In het begin lijkt het wel simpel maar iedere beslissing heeft invloed op je volgende beslissing en één verkeerde beslissing kan heel snel tot frustratie leiden. Mocht je toevallig het (on)geluk hebben om meerdere grote websites te maken en te onderhouden, dan ben je, als je niet uitkijkt, al heel snel de sigaar.

Waarom? Niets blijft hetzelfde en het maken van een website is een oefening in constante verandering.

HTML wil je zo hebben dat je het achteraf niet hoeft aan te passen voor CSS of JavaScript. Dergelijke aanpassingen zijn duur, omdat je met nog meer onderhoud wordt opgezadeld, wat uiteindelijk ook de duurzaamheid van je product aantast. Erger nog, het is meestal onnodig en makkelijker te voorkomen dan je denkt.

De truc is om binnen de drie front-end gebieden (HTML, CSS en JavaScript) generiek te zijn waar deze gebieden elkaar raken en specifiek te zijn binnen een enkel gebied.

On the iPad and iPhone, using CSS transformations in Mobile Safari often results in elements with ugly jagged or stair stepped edges.

In most cases it’s easy to get nice anti-aliased edges by wrapping whatever you want to transform in an additional element that adds a few pixels padding:

(Source: http://twitter.com/twotribes/status/131088256224858112)

Below is a list of CSS snippets that will help you minimize headaches, frustration and save your time while writing css, and I hope you will find it useful. Whether you are a experienced web developer, or just getting started with css, they are all worth checking out.

Shower is a HTML/CSS presentation tenmplate for use in modern browsers.

Code available on Github.

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too.

Web Safe Typography on Screen for Pixel Perfectionists

The 100% Easy-2-Read Standard Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small. So…

Design beautiful, innovative and fast-loading web sites… with a beautiful, innovative and fast app. CSSEdit's intuitive approach to style sheets and powerful previewing features will make you deliver awesome standards-based sites in no time!

Lets you flip through, preview and compare web typography while retrieving the CSS.

Tables got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, amount of detail we have to look over to, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!

Article about incremental leading, a typography thing.

This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.

Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site.

Intelligent websites should tune-in to the content preferences of their visitors, tailoring a specific experience based on each visitor's favorite sites and services across the social web. In this post I will teach you how to mine the rich treasure trove

This is the demo of the Peacock Tail Tumblr theme, by Richard Dunlop-Walters.

After a brief period of unstyledness, we’re back with a realign and overhaul of simplebits.com. Aesthetically, it’s not much of a departure from the previous design — but under the hood is new markup, new stylesheets and a strict grid layout based o

I’ve been pondering reset styles over the past few months, and come to a bit of a shift in my thinking. Here’s the result of that thinking.

If I could, I’d give you a special present this christmas - I’d tell you how to make IE on Windows behave like a grown-up browser. Sadly, reality sucks - as does IE on Windows - so I can only offer to share with you a couple of CSS tips to ease the pa

There’s been a welcome resurgence of interest in web typography over the past year or so, with many articles and conference talks offering techniques and theory. Frequently asserted is the notion that good typography requires accurate control of font si

This is a CSS tutorial on how I created the image browser controls for Shacknews.

"For the last three months, my sole focus at work has been getting this site ready. It has involved a major redesign, a major architectural change and dramatic streamlining of the content." -- Nice job!

JavaScript geeft je de mogelijkheid om de CSS-presentatielaag van je site te veranderen. Een verandering in hoe een element in de pagina er uit ziet is een uitstekende (en veelgebruikte) manier om de aandacht van je bezoekers te trekken naar het element w

Eric's basic sheet that resets all browsers. The starting point for ny good CSS based website, thus any website.

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads.

How to divide content over multiple columns, while keeping layout/design and content separated.

A simple PHP tip for marking alternating rows in different colours.

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.