This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.

StyleDocco generates documentation and style guide documents from your stylesheets.

Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write code examples inside GitHub Markdown code fences (```) or prefixed with 4 spaces in your comments, and StyleDocco both renders the HTML and shows the code example.

The document is automatically split into new sections when it encounters a level 1 or 2 heading. Read more about the heading syntax in the Markdown guide. Only comments at the beginning of new lines are included, so to exclude something from the style guide, put some whitespace before the comment.

If your project includes a README file, it will be used as the base for an index.html. StyleDocco will also add some default styles to your documentation, but they are easy to modify to make it fit with your project.

StyleDocco will automatically compile any SASS, SCSS, Less or Stylus code before it is applied to the page.

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

Grab the theme at Github.
Install the theme.
Create markup & style patterns.
Learn.

/* Checkbox Hack */

input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}

/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}

demo of -webkit-transform: matrix3d() (and transformation matrices in general)

https://github.com/rentzsch/Transformation-Matrix-Funhouse

CSS3 Transitions with custom easing functions

You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you!

-webkit-$1: $2;
-khtml-$1: $2;
-moz-$1: $2;
-ms-$1: $2;
-o-$1: $2;
$1: $2;

has.js
Pure feature detection library, a la carte style.

This document is not complete.

About

Browser sniffing and feature inference are flawed techniques for detecting browser support in client side JavaScript. The goal of has.js is to provide a collection of self-contained tests and unified framework around using pure feature detection for whatever library consumes it.

You likely won't see has.js as a public API in any library. The idea is that %yourfavoritelibrary% will import some or all the available tests, based on their own needs for providing you a normalized future proof API against common tasks.

body {
font-family : monospace;
text-shadow : 0 1px 0 rgba(255, 255, 255, 0.5);
text-align : center;
padding : 30px 0 0 0;
height : 800px; /*sory*/
color : #222;
background-image : -moz-radial-gradient(top, #ccc, #999);
background-image : -webkit-gradient(radial, 330 280, 10, 62 60, 800, from(#ccc), to(#999), color-stop(10%, #ccc));


}

style {
-webkit-box-shadow : 0 1px 3px #444 inset;
-moz-box-shadow : 0 1px 3px #444 inset;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
text-shadow : none;
display : block;
text-align : left;
margin : 0px auto;
padding : 15px;
width : 500px;
background : #eaeaea;
white-space : pre-wrap;

}
http://boaz.se/nder/s.miscellaneous/i-%3C3-inset/

Gradient borders

CSS-based SlideShow System

My name is Lea Verou (actually, in official papers it’s Michaelia Komvouti-Verou, but who can bare to use such a long name in everyday life?) and I’m a front-end web developer currently living in Greece. I am the co-owner of a small company named Fresset Ltd. At the same time, I study Computer Science in Athens University of Economics and Business. I am passionate about JavaScript and CSS3, so this blog is mostly devoted to them. You can email me at me＠leaverou․me (don’t copy/paste the email, it won’t work. Note to self: Must add contact form). Please note however that I am too busy to accept web design/development projects for clients at the time, so if you wanted to contact me about one, don’t bother (unless it’s something quick and interesting I guess).
View my CV
About the blog style:

This was my first second attempt of creating a WordPress theme. Given that it’s a personal project, I promised myself not to pay much attention to the Evil browser (we all know which), especially older versions of it (*cough* 6 *cough*). This theme is heavily based on experimental CSS3 properties, so it will look better in more CSS3-supporting browsers (modern versions of Firefox, Safari, Chrome or Opera). I did devote some time to make it look OK in other browsers but given that this is my personal blog, I wanted it’s design to be fun for me, and browser incompatibilities aren’t much fun, as you probably know already. :P

The State of HTML5

Paul Irish
Google Chrome, Developer Programs Engineer

I’ve been in a pretty heated email conversation over the past couple of days regarding how effective (or not) the CSS Working Group has been. I’ve been pretty brutal in my critique in the past (and much of it still stands), but there’s reason to hope.

The best bits are — not surprisingly — being driven by the implementers. Apple is in the driver’s seat, with major contributions for Animations (including keyframes!), 2D Transforms, 3D Tranforms, and Transitions. Great stuff.

Similarly, David Baron (of Mozilla fame) is editing a long-overdue but totally awesome Flexible Box spec, aka: “hbox and vbox”. Both Gecko and WebKit-derived browsers (read: everything that’s not IE) supports hbox and vbox today, but using it can be a bit tedious. Should you be working on an app that can ignore IE (say, for a mobile phone), this should help make box layouts a bit easier to get started with:

CSS3 brings us a host of new features. Whilst most people will be familiar with gradients, text-shadow etc. I’d like to draw your attention to one of the lesser known modules in CSS3: flexbox. What’s interesting about Flexbox is that you can use it now if you use a Gecko or Webkit based browser (no IE sadly and Opera’s support isn’t there yet).

What does Flexbox bring us that we didn’t have before? Well it gives us a whole raft of new ways of controlling layout and flow. What we now achieve with floats we can do far more successfully and with more control with Flexbox.

I’ve never liked floats, they always seemed a hacky way of structuring HTML. Unfortunately with the meager positional CSS available, floats ended up being the best way of creating flexible fluid layouts. Let’s look at some examples.

I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

The draft describes Flexbox as:

[...] a CSS box model optimized for interface design. It provides an additional layout system alongside the ones already in CSS. [CSS21] In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of "flex" to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. This model is based on the box model in the XUL user-interface language used for the user interface of many Mozilla-based applications (such as Firefox).
Super. What this means to you, as a developer, nay, as a Layout Architect™ is:

Floats? Where we're going, we don't need floats.
Layouts that were challenging before are more sensible.
We can create true flexible layouts, and the browser will do the calculations for us.
Flexbox gives us a new value for the display property (the box value), and eight new properties:

box-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
Eight new properties? Yeah, a little overwhelming, right? Okay let's break these down.

FOUT is what I'm calling the flash of unstyled text that you get while using @font-face in Firefox and Opera.

In June, Remy Sharp documented the how a browser progressively renders a page using @font-face. Things work differently between browsers natch:

Here's how in Firefox; basically the text is in a default webfont until the custom font is ready:
[gecko & presto's progressive rendering]

Webkit takes a very different approach, and very intentionally. They believe it's better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self. (This moment should be familiar to you if you've used sIFR)