An (Almost) Complete Guide to CSS3 Color

Filed January 2nd, 2011 under CSS, Tutorial

Color is a fundamental principle of design. The right color, in the right place, and the right time can solidify the emotional appeal of a brand. It’s not surprising then that the color module would be one of the key improvements CSS3 makes over the previous version.

Unlike the previous articles in this series, this An (Almost) Complete Guide will focus on some of the more technical aspects of the CSS3 color module, in addition to an overview of the practical applications of opacity, HSL, HSLA, and RGBA.

Read the rest of this entry »

Comment! (2)

Understanding Bounce Rates

Filed November 23rd, 2010 under Web Technologies

I found this fantastic inforgraph via Think Vitamin. Beautiful work, and great info – with the minor exception of recommending that it’s a good idea to make external links open in a new window. Sure, it’s a way to reduce the bounce rate on paper – but it’s not a real solution to the problem in the first place.

Read the rest of this entry »

Comment! (0)

An (Almost) Complete Guide to CSS3 Borders & Backgrounds

Filed October 4th, 2010 under CSS, Tutorial

Borders and backgrounds are two of the most essential CSS elements. They are part of the groundwork that allow us to create aesthetically rich user interfaces, and help make the web a beautiful place to be.

But CSS2.1 has proven inadequate in a number of respects. Remember the rounded corners fad (we even use it on kmsm.ca)? For a long time, that was driven via div and image hacks – creating lots of unnecessary and unpleasant code. CSS3 adds native support for these types of elements. In this guide, I provide an overview of the borders and backgrounds module in clear, easy-to-understand language.

W3C Specification: http://www.w3.org/TR/css3-background/

Browser Specific Support

WebKit support: Strong

Firefox support: Strong

IE9 support: Medium

Backgrounds

Let’s dig right in.

CSS3 introduces two new important elements to backgrounds: multiple images, and background size. In brief, multiple backgrounds is exactly as it sounds: you can layer multiple backgrounds in a single box. Before the advent of CSS3 this had to be done using a combination of layered divs. Thankfully, that’s changed.

Multiple backgrounds

Each box has a background layer that may be fully transparent (the default), or filled with a color and/or one or more images.

W3C Specification

To create a box with multiple backgrounds, we simply define them in a comma-separated list using the background-image element. All other assigned properties, such as background-position require similar comma-separation. For example:

#multipleBackgrounds {
	background-image: url(flower.png), url(ball.png), url(grass.png);
	background-position: center center, 20% 80%, top left;
}

In this case, we’ve got an image of a flower located in the middle of the box, layered over a ball located 20% from the top and 80% to right, layered over grass located in the top left. Stories in Flight has a particularly good working version of exactly this example: CSS Multiple Backgrounds.

Now, this might not seem like much – after all, you can always layer images in Photoshop – but it creates really interesting possibilities when combined with other CSS3 techniques (i.e. gradients). Imagine, for example, that you want to create a repeating background of a texture – but also have the page slowly fade to black as it approaches the bottom of the screen. With CSS2.1, this was possible only by first creating a repeating image of the texture, placing it in a div, and layering a secondary div over top, which itself has a horizontally repeating image of a gradient. Now, we can use a single div, and define both backgrounds at once (and even skip creating an image of a gradient altogether).

Oh and one last note: no vendor prefixes are necessary!

Background size

Let’s say you’d like to dynamically resize the background for the body element of a page – such that the background image is always proportionally scaled to the size of the browser window. CSS3 makes this easy. We’ll have to use some vendor prefixes though.

#backgroundSize {
	-webkit-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
}

Alternatively, we can use contain to limit the background to the inside of the background positioning area (an area you can define in a couple of different ways using background-origin).

Another interesting technique for background-size is defining it as 100%. We can achieve some really cool effects this way. Peter Gasston covers one such example in his article Liquid Faux Columns with Background-Size.

Borders

Border image

As one of the less intuitive new elements in CSS3, border-image is prone to confusion. I’ll try and clear that up.

We start by defining an image, where the image should be sliced horizontally and vertically, and end by declaring a type (repeat, round, stretch). Again, we’re going to have to use vendor prefixes:

#borderImage {
	-moz-border-image:url(border.png) 20 20 round;
	-webkit-border-image:url(border.png) 20 20 round;
	border-image: url(border.png) 20 20 round;
}

Let’s break this down visually. In the image below, we see border.png on the left. We’ve sliced it vertically (slice a) at 20px, and sliced it horizontally at (slice b) at 20px. The image is then used as the border, and repeated along the slice lines. Note that you define up to four slices, in the canonical directions (top, right, bottom, left).

As you can imagine, there are some really innovative applications in store for this element. lrbabe.com has some excellent examples of potential applications for everything from multi-state buttons to tabs.

Border radius

That brings us to border radius, perhaps the most welcome element in the borders & backgrounds module.

We’re going to have to use some vendor prefixes again, but that’s okay – we’ve been dying to be able to do this natively for so long, it hardly matters. And it’s really as easy as could be. First, define a border in the typical way (size, type, color), then define a border-radius:

#borderRadius {
	border: 5px solid #000;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}

In this example a radius of 15px will be applied to each corner (top left, top right, bottom left, bottom right). But we’ve also got fine control of each corner:

#borderRadius {
	border: 5px solid #000;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-webkit-border-bottom-right-radius: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 15px;
}

And with that, we say goodbye to everything from div hacks, to JavaScript, to images in order to get those oh so fashionable rounded corners.

Box shadow

One other interesting new feature from this module is box shadow. Again, it’s simple, straightforward, and clear. To apply a shadow to a box – say a div – we define a horizontal offset, a vertical offset, an optional blur distance, and a color. For example:

#boxShadow {
	width: 100px;
	height: 100px;
	box-shadow: 15px 15px 5px #000; 
}

This produces a 100px square box, with a black shadow 15px horiztonally and vertically offset with a 5px blur. I mentioned it was easy, didn’t I?

Other Resources

Quirksmode: Backgrounds

Introduction to CSS3 – Part 6: Backgrounds

This article is part of a series on CSS titled An (Almost) Complete Guide to CSS3 regularly posted biweekly at kmsm.ca. If you enjoyed this article, you might also enjoy An (Almost) Complete Guide to CSS3 Multi-Column Layouts.

Comment! (10)

21 Essential CSS Tools for Web Designers

Filed September 30th, 2010 under CSS, Resources

Most, if not all, of my projects begin in a simple text editor. And that’s not likely to change any time soon – unless someone develops a serious web design application. That said, a lot of my tasks rely upon the rather monotonaous referencing of W3C specifications, and laborious testing.

Thankfully, the design community has produced some fantastic CSS tools to make our jobs easier. From on-the-fly typography comparison, to entire layout frameworks, there’s a tool for just about everything you can imagine with CSS. In this post, I cover some of the most essential: from golden oldies, to the latest and greatest.

Typography

Typechart

Courtesy of Panduka Senaka, Typechart is my favourite amongst a host of typography apps. Although it’s limited to web safe fonts, it’s a great tool for rapidly comparing font styles.

Typetester

Typetester is functionally the same as Typechart. With it, you can quickly compare different font styles amongst the web safe fonts – and then grab the raw CSS of whatever you’ve tested.

typeface.js

Of the many font embedding solutions, typeface.js is one of the easiest – especially if being cross-platform is absolutely necessary. Of course, Typekit is definitely easy, and cheap – but it relies upon @font-face. For older browsers (say pre-Safari 2.1 and pre-Firefox 3.5), it’s just not an option. So if you absolutely need real fonts, but also want to make sure your project is broadly cross-compatible with older browsers, typeface.js is worth a shot.

CSS Typeset

The last of the typography tools on the list, CSS Typeset is the minimalist counterpart to the two font style editors mentioned above. In fact, the thumbnail below is a screen capture of the entire site. Enter example text on the left, play with the controls on the bottom, and the raw CSS appears on the right. Just about as easy as it can be.

Frameworks

960s.gs

If you haven’t worked with a CSS grid framework before, 960.gs is the place to start. With such widespread acclaim, there’s not much else to say about 960.gs. It’s used by 5by5 Media, Twitter, WooThemes, and a host of freelancers, design agencies, and web professionals. And the grid overlay bookmark is seriously cool.

960.gs thumbnail

Blueprint

If I had to give a rough estimate of usage of these frameworks, Blueprint would come a close second to 960.gs. Again, it’s a platform that’s been widely praised for its intuitive modularity, strong documentation, and broad community support (it even has plugins for things like sprites).

Blueprint CSS framework thumbnail

YUI CSS Grids

Like every part of the YUI framework, Yahoo’s CSS Grids module is beautifully polished, with excellent documentation. Its CDN hosted stylesheet offers a fast, responsive, and cache-friendly grid framework.

YUI CSS Grids

css-boilerplate

Although it’s a bit old (it was released in 2007 – which, as we all know, is the equivalent of 20 internet years ago), it’s still a great resource. css-boilerplate basically gives you a blank slate for your web development projects. Its default settings include a reset stylesheet, IE specific styles, forms styles, and typography. Here’s a teaser snippet from the form styles:

form.hform p { margin: 0 0 .5em; }
form.hform p label { float: left; width: 100px; }

form.hform p input { width: 200px; }
form.hform p select { width: 200px; }

form.hform p input.button { width: auto; }
form.hform p input.checkbox { width: auto; }
form.hform p input.radio { width: auto; }

form.hform p.checkbox { margin-left: 100px; }
form.hform p.checkbox label { float: none; }
form.hform p.checkbox input { width: auto; }

52Framework

52Framework bills itself as the first ever HTML5 & CSS3 framework. It’s basically a mux of boilerplate meets grid system. There’s an HTML5-ready starting document, along with pre-coded CSS using a few of CSS3′s awesome features including the ::selection selector, rounded corners, text-shadows, and more. I’m not sure how much traction this will get within the community – particularly given the strength of HTML5 Boilerplate – but this is a CSS tools list, so we’ll save that discussion for later.

Variable Grid System

Inspired by 960.gs, the Variable Grid System is an easy-to-use tool that allows to create, well, varying grid systems. You input column width, number of columns, and the gutter width – and VGS outputs ready-to-go CSS. It’s really an incredibly useful tool.

Variable Grid System thumbnail

Elastic CSS

Elastic CSS is a semantically-sensitive CSS framework. Classes are named intelligently and intuitively, and it provides a nice blend between some of the more full-blown boilerplates, and the more low-key grid systems.

BlueTrip

Like Elastic CSS, BlueTrip focuses on common sense naming conventions, ease of use, and, well, just plain getting out of your way. This demo page shows off all of its bells and whistles.

Formatting

ProCSSor

This simply beautiful app turns your ugly stylesheets, into poetic pieces of art. It’s simple, intuitive, and works really, really well. First, you paste in some CSS (or upload a file/paste a link to a stylesheet), then you set some optional parameters, and ProCSSor spits out your work in perfectly formatted code. It’s awesome.
ProCSSor Thumbnail

Code Beautifier

Code Beautifier does essentially the same thing as ProCSSor. Input a stylesheet, define some parameters, and out pops some gorgeous looking code.

CSS Compressor from CSS Drive

After aesthetics, the other quintessential CSS formatting problem is a very simple one: size. With a large enough deployment (or sloppy enough coding), every extra kb can start to feel sluggish. With so many CSS compressors out there – all with essentially the same feature set – I feel like I can only justifiably include two. CSS Compresspor from CSS Drive is the first. With three levels of compression, CSS Drive’s tool can do everything from a casual tidy-ing up to full fledged illegibility.

CSS Compressor from Sevenforty

With perhaps the shortest instructions of any tool on this list, CSS Compressor for Sevenforty is lightweight and fast – just like the stylesheets it gives you: “Simply browse your system for the CSS file you wish to shrink down, select your line break option and hit Compress.”

CSS Compressor Thumbnail

Miscellaneous

0to255

0to255 is a new take on an old problem: sorting through hex values for the perfect colour. With a downright beautiful design, it’s hard not to love it.
0to255 Thumbnail

LESS

A cousin to the venerable SASS, LESS is a Ruby-based CSS compiler. Basically, you write your stylesheets like normal – but you can do things like use variables, mixins, and nested rules (like any scripting language). LESS takes this quasi-stylesheet, and compiles it into ready-to-go CSS. It’s an amazing time saver for large scale development.

LESS Thumbnail

Modernizr

Ok, so Modernizr isn’t strictly a CSS tool. But it enables you to detect CSS3 support when a user visits your site. It doesn’t add any functionality, but it allows you to selectively control certain features – so that everything works as intended.

ecsstender

Unlike Modernizr, ecsstender actually does add functionality to older browsers. You choose from a number of extensions (including CSS3 transform, transition, font-face, etc), and then ecsstender determines whether or not the user’s browser supports a given function. If it doesn’t, it outputs browser-specific functionality pertaining to that function using JavaScript.

Did we forget something?

Did we forget to mention your favorite tool? The one that you absolutely, positively cannot live without? Let us know in the comments!

Comment! (5)

Yes, web design has a future.

Filed September 27th, 2010 under Web Technologies

Cameron Chapman’s recent article in Smashing Magazine titled Does The Future Of The Internet Have Room For Web Designers practically begs me to respond. Chapman knows how to craft a brilliantly provocative article. But that doesn’t mean she’s right – and she’s not.

The crux of Chapman’s argument is that the importance of presentation layers is waning. She argues that design is irrelevant for most users, that devices are beginning to integrate connective functionality, and that content aggregators like Facebook are dominating (and limiting) the extent of average user interaction online. She concludes that the real value moving forward will not be in the presentation layer but in the content itself.

For the record, Chapman believes what she says. The above is a screenshot from the site for one of her books, Internet Famous. This should give us pause. Look, I’m not suggesting that this approach hasn’t been successful for her – who knows, maybe it’s been a great success – but her design gives us an intuitive sense of the quality of the product.

Maybe that intuition is wrong! (I’m not trying to be overly critical here – really) As they say, don’t judge a book by its cover – but how can we entirely avoid drawing conclusions? This is the first way in which presentation layers really do matter. Your content can be great, but if its designed in this way, your potential customers are obviously going to formulate their opinions before they crack open the first page.

In short, design impacts purchasing decisions and preferences. That matters – and in a big way.

Presentation Layers

I’ll back up a bit here.

When I refer to presentation layers I’m talking about the form of the content. Information itself is formless. So we can distinguish between content and its presentation layer. The internet has really radicalized this distinction, because it’s now possible to mux content and form in rapid, sometimes spontaneous ways. Of course, it’s always been possible to do this – but the internet makes it easier, and way, way faster.

When users interact with information now, they can do so on their own terms. They can use RSS feeds, iPads, and mobile devices of all sorts of shapes – heck, even internet-enabled fridges. So there’s a growing sense of trepidation in our community that users don’t care either way about how content looks – but whether or not it’s useful or meaningful to them.

But I don’t think that tells the whole story.

RSS Feeds and iPhones and iPads, oh my!

Most of these new layers are actually where really innovative design is happening. In fact, the most popular devices on these new layers – the iOS products – are entirely premised on quality design and artistry. And that extends beyond the engineering of the products themselves. From Objective-C applications, to HTML5 apps and mobile sites, the entire iOS experience is centered around the notion that design powerfully impacts the ease and enjoyment of user interaction – and more importantly, people are willing to pay for it.

Of course, there are counter examples. RSS feeds in particular really attempt to break away the form of the content. And the idea of Facebook’s walled garden seems to scare some people in the design industry the same way that RSS feeds do. But both of these mediums are still fundamentally gateways to the outside. They haven’t hampered interactivity or the need for design – they’ve amplified it, by powerfully accelerating the pace of discovery.

But what about templates and themes?

Chapman’s article points to the strength of theme and template markets as another reason to expect the erosion of the design industry. But again, I think this is exactly the wrong conclusion to make.

Look, the reality is that custom design work isn’t always necessary. If you’re a small business, with no e-commerce activity, and little interest in online marketing then there’s simply very little reason to fork over thousands of dollars for a custom design. The ROI is questionable at best, so it just doesn’t make sense.

But this has always been the case. It’s never made sense for brick-and-mortar businesses without strong cash flows and/or an immediate sense of how being online can help their business to invest the time, and energy into online branding. It’s just that now the cost of entry is so low, that the ROI for a basic, template-based site actually does start to make a little bit of sense. Particularly if there’s an expectation for basic information about business online.

A market opportunity

The point here is that the primary market for themes and templates wasn’t the market for custom web design in the first place. It’s not cannibalizing our work, or our industry. In fact, the increased demand for themes and templates has created new revenue possibilities that didn’t exist five years ago. This is a good thing.

The Future of Information Design

The future of web design is really the future of information design. This sounds a little funny only because we’ve come to form very strong associations between web design and desktop internet browser design. For a long time, the two were synonymous. But that’s not true any more. So maybe it’ll be helpful if we start to think about these ideas in bigger ways.

The future of information design is in providing cohesive cross-layer branding, with a strong focus on usability and depth of interaction. New devices, and new ways of accessing content aren’t a death knell for our industry. They are signs of a prosperous future. With so many new layers, our work is becoming more intricate, more technical, and more specialized than ever.

And every one of these changes is a market opportunity. It’s an opportunity for old designers to make new use of their expertise, and for new designers to find their strengths. Oh, and an opportunity not just to stay in business, but to do remarkable things.

Comment! (0)

An (Almost) Complete Guide to CSS3 Multi-column Layouts

Filed September 20th, 2010 under CSS, Tutorial

One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case.

First of all, it’s generally easier to read lines of text between 8 and 12 words long. Second, it’s easier to control the amount of negative space in a layout with columns. For a long time, this was the primary advantage of print but CSS3 makes multi-column layouts possible online (and without the need for JavaScript).

W3C Specification: http://www.w3.org/TR/css3-multicol/

Browser Specific Support

WebKit support: Strong

Firefox support: Strong

IE9 support: None

The multi-column model

The WC3 specification introduces a number of new properties that allow us to define columns in HTML layouts. Just like print designs of old, we’re able to define the number of columns, column width, column gaps, and even rules governing overflow.

Essentially, the specification states that a multi-column element needs to have either a defined column width or column count. Browsers are supposed to render these elements similar to the way they render tables – but the content in a column layout is dynamically split into blocks.

At the moment, we’re not able to define certain properties about columns (like column-specific backgrounds), but it’s possible this might change.

The number and width of columns

column-count and column-width are the two most basic ways to define the properties of a multi-column element.

column-count

By default, column-count is set to auto. This means that if we explicitly define the column-width, the browser will sort out for itself how many columns are necessary to populate the content in the multi-column element. Obviously, that’s not always desirable so we’ll want to explicitly define the number of columns to span the content across. And it’s easy to do:

#multicolumnElement {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

column-width

As I mentioned, we can define column-width without defining the number of columns, and the browser will render our content dynamically (there are some fine controls available too – keep reading for those). To define column-width, we can use any of the units regularly available to CSS properties (em, px, %, etc).

#multicolumnElement {
	-webkit-column-width: 15em;
	-moz-column-count: 15em;
	column-count: 15em;
}

Of course, we can always combine column-width and column-count:

#multicolumnElement {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-width: 15em;
	-moz-column-width: 15em;
	column-width: 15em;
}

Column gaps and rules

All print designers are familiar with column widths and gaps, but web designers are addicted to the language of margins and padding.

But column gap is exactly as it sounds – the size of the space between columns defined in any unit regularly available in CSS (em, pixel, etc).

column-gap

The WC3 specification defines 1em as the default column-gap value, so we’ll use it in this example:

#multicolumnElement {
	-webkit-column-gap: 1em;
	-moz-column-gap: 1em;
	column-gap: 1em;
}

column-rule

Column rule is another throwback to the print era. Basically, column rules are thin lines between the columns, to further aid readibility and/or to distinguish between separate stories. CSS3 gives us three different properties for the column rule: column-rule-size, column-rule-style, and column-rule-color, but we can use the shorthand column-rule to declare values for all three at once.

As you might have guessed, the regularly available units, styles, and color values can all be used:

#multicolumnElement {
	-webkit-column-rule: 1em solid #000;
	-moz-column-rule: 1em solid #000;
	column-rule: 1em solid #000;
}

Column breaks

What if I want to break the column before an h3 tag, you ask? Well, that’s easy too. CSS3 gives us the column-break property with a number of possible related properties and values, including: auto, always, avoid, left, right, page, column, avoid-page, and avoid-column.

column-break

So if we want to break the content before every h3 tag we simply include the column-break-before property in our stylesheet:

h2 {
	-webkit-column-break-before:always;
	-moz-column-break-before:always;
	column-break-before:always;
}

Spanning columns

If we want an element, say a headline, to span across multiple columns we can make use of the new column-span property.

column-span

column-span has two possible values: all, and regular numbers (e.g. 1,2,3). Defining column-span as all means that the given element will span across the whole multi-column block, while assigning it a regular number will limit its span to that number of columns:

h2 {
	-webkit-column-span:all;
	-moz-column-span:all;
	column-span:all;
}

h3{
	-webkit-column-span:2;
	-moz-column-span:2;
	column-span:2;
}

Filling columns

Just like print design, we might want some finer control over how columns are filled with content. CSS3 introduces column-fill to give us that kind of control.

column-fill

We can either define a value of auto or balanced. The former will sequentially fill columns with content, while the latter evenly distributes the content.

#multicolumnElement {
	-webkit-column-fill:auto;
	-moz-column-fill:auto;
	column-fill:auto;
}

Demo!

To cap things off, I’ve created a quick demo project based on the first few paragraphs of Moby Dick. It should display correctly in both WebKit and Mozilla based browsers (though it’s not formatted properly for mobile).

Click here for a live preview or click here to download the project files.

Other Resources

Introducing the CSS3 Multi-Column Module by Cedric Savarese

Remembering: The CSS3 Multi-Column Layout Module by Web Designer Notebook

Comment! (58)

An (Almost) Complete List of Global CSS Reset Styles

Filed September 8th, 2010 under CSS, Resources

W hat’s the value in returning to a CSS trend from 2 years ago? Well, most descriptions, guides, and round ups of CSS reset styles are outdated. Not to mention that the advent of HTML5 makes revisiting reset styles particularly worthwhile.

I’ll be covering 6 tried-and-true methods, 2 newer minified approaches, and finally a new HTML5 CSS reset style. Of course, I owe a great debt to Jeff Starr of Perishable Press for his 2007 post A Killer Collection of Global CSS Reset Styles. Several of the early methods stem from his post.

Ultra Minimalist CSS Reset

Description: It’s pretty obvious isn’t it? The only trouble with the Ultra Minimalist CSS Reset is that it can degrade performance on large sites, given that its use of the universal selector.

* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	}

Condensed Universal CSS Reset

Description: Using the Ultra Minimalist CSS Reset as a base, we add typographic resets to several of the font tags as well as to the vertical-align tag. Like the Ultra Minimalist CSS Reset, however, it can degrade performance on large sites. So unless you’re dealing with a micro implementation, it’s best to stay away from universal selectors.

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

Siolon’s Global CSS Reset

Description: Building on the Condesenced Universal CSS Reset, Siolon’s solution extends the reset styles to include other typical tags such as h1 through h6, p, table, and li. He assigns base-level margin attributes to many of structural selectors, making his solution a solid base for further development. Technically speaking, these changes aren’t germane to a reset stylesheet, but their relatively innocuous and fairly standard. Again, the use of the universal selector can be problematic in large cases so be wary of applying this to big projects.

Permalink: http://www.siolon.com/blog/browser-reset-css/

/*

Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences

*/

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

YUI 2: Reset

Description: For a long time, Yahoo’s YUI Reset has been a go-to reset file for web developers. It avoids the issues posed by the universal selector entirely, and gives a truly blank slate to build upon. The YUI 2 framework launched in February 2006 – and it encompasses both JavaScript and CSS libraries. Of course, Yahoo offers CDN hosting for the stylesheet so you can take advantage of caching goodness.

Yahoo also offers a Base CSS stylesheet (which applies a consistent style foundation for common HTML elements) and a Fonts CSS stylsheet (which offers offers cross-browser typographical normalization and control).

Permalink: http://developer.yahoo.com/yui/reset/

CDN hosted:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">

Full style sheet:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

YUI 3: Reset

Description: In 2009, Yahoo launched YUI 3. The framework contains an updated version of the reset stylesheet. Its biggest feature addition is the ability to reset elements either globally or contextually. If you only want to reset a single div tag, you load the contextual version of CSS Reset, and include .yui3-cssreset as a classname.

Permalink: http://developer.yahoo.com/yui/3/cssreset/

CDN hosted:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-context-min.css">

Full style sheet (comments redacted):

html{
	color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}
li {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
input, textarea, select {
	*font-size:100%;
}
legend {
	color:#000;
}

Eric Meyer’s Reset CSS

Description: Eric Meyer’s bit of code is one of he most used CSS reset style in the web developer community. Originally released in 2007, it’s become a go-to reference. It is, however, far reaching. Nearly every single HTML element is reset in this stylesheet – something to keep in mind during development. But if you’re looking for the ultimate reset, this is probably it.

Permalink: http://meyerweb.com/eric/tools/css/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Simple Reset

Description: Recently, attempts to minify the reset stylesheet have been made. Russ Weakley’s Simple Reset is one such attempt. It’s fairly robust and fast-loading, making it a nice middle ground between the minimalist styles and Eric Meyer’s.

Permalink: http://www.maxdesign.com.au/articles/css-reset/

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

CSS Mini Reset

Description: Authored by Vladimir Carrer, CSS Mini Reset is another bare-bones, but robust approach to CSS reset stylesheets. Inspired by Eric Meyer and Russ Weakley, Carrer composed his minified reset by focusing on “the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.”

Permalink: http://www.vcarrer.com/2010/05/css-mini-reset.html

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

HTML5 Reset

Description: With HTML5 introducing a host of new elements, it’s no surprise that an HTML5-specific CSS reset stylesheet would exist. Released in late July of 2010 by Richard Clark, this thing is piping hot. Clark removed the deprecated elements commonly found in the older reset stylesheet, while adding in HTML5′s new elements. In August the reset stylesheet was wrapped into this lovely package: HTML5 Reset (appropriately written in HTML5). The project is active, so if you use this in a development environment, watch for updates.

Permalink: http://code.google.com/p/html5resetcss/

/* 
html5doctor.com Reset Stylesheet
v1.6
Last Updated: 2010-08-18
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted inherit;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
Comment! (2)

HTML5 for Web Designers Review

Filed September 2nd, 2010 under Web Technologies

HTML5 for Web Designers by Jeremy Keith

I sat down to read Jeremy Keith’s HTML5 for Web Designers this morning. At a slim 95 pages, it’s exactly the kind of introduction to the future of HTML that warrants the attention of the general web designer.

Keith swiftly illuminates the subtle political squabbles amongst competing standards organizations in a historical overview of HTML itself. With the pilloried politics and regulations of the WC3 on the one hand, and the business gumtion of Ian Hickson and the WHATWG, it’s anything but a boring recap of an otherwise theoretical dispute.

It’s exactly this kind of overview that mirrors the philosophy of HTML5: much of the markup specification is a recognition of the practical applications of HTML over the last decade, rather than the wishful thinking of XHTML 2.0. His jabs at the WC3 are backed by a design philosophy of “Priority of constituencies,” whereby consideration is given to users over authors over implementers over specifiers over theoretical purity.

It’s easy to get bogged down in the debate behind the merits of any particular specification design principle, but Keith’s language displays a kind of knowing recognition of his audience. Web designers don’t really care about vendor politics – they care about features they can use right now. To that end, Keith elegantly uses humour to explain the seemingly archaic incubation time of HTML5: “[it] seems to have been written with a level of detail normally reserved for trainspotters who enjoy a nice game of chess while indexing their stamp collection.” This wry humour continues throughout the book, including a particularly choice section where Keith describes the wrongheadedness of disabling JavaScript to remove HTML5′s boolean autofocus attribute as “a heavy-handed solution, like gouging out your eyes to avoid bright lights.”

Beyond the politics and theory, HTML5 for Web Designers contains an excellent description of rich media. He masterfully explains the audio and video tags, and how to progressivel support Ogg Vorbis, MP3, MP4, and Theora Video. Again, he gives a passing nod to the patent-laden politics behind the brewing codec war, but the real depth of his description comes in the form of practical advice to web designers today.

Although much of the community’s attention has been given to the canvas, audio, and video tags, I found the Semantics section to be the most engaging topic in Keith’s overview. HTML5 introduces contextual tags such as section, article, header, and footer – but I was only aware of these new tags in a cursory way. Keith illuminates some of the inconsistencies, and admirably tries to explain the design philosophy behind these new semantic tags.

tl;dr: HTML5 for Web Designers is a highly recommended and practical introduction to the HTML5 spec for web designers. It is available in a softcover print edition or in the electronic ePub format from books.alistapart.com for $18 or $9, respectively.

You can follow Jeremy Keith on Twitter or follow his blog at adactio.com/journal

Comment! (0)

How To Fix Internet Explorer Javascript, PNG Transparency, and Other CSS Problems In One Simple Step

Filed August 31st, 2010 under Web Technologies

We’ve all been there – project is nearing completion, your site looks great in webkit and firefox, and you want to get paid, but your curmudgeonly client cares what his site looks like in IE6 because his clients are all civil servants, and the government only updates their computers once a decade. Or maybe you just run a publishing site like mine, at SalaciousSound.com, and would prefer not to ignore the largest browser segment in the market.

Either way, Internet Explorer can be a pain in the butt, but only if you let it!

I just came across a solution in the google code repository called ie7-js, which

is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Pretty sweet. I just tried it out, and it worked like a charm.

Option 1 – If all your png images with transparency end in “-trans.png”

Only one quick step is required, since the people hosting the code are cool with direct linking to the js file (which helps load time a lot, especially in the case of jquery). Copy and paste this code, and you’re good to go:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

Option 2 – No consistency in filenaming of png images with transparencyCopy and paste this code, and you’re good to go:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js">
IE7_PNG_SUFFIX=".png";
</script>
<![endif]-->
Comment! (2)

5 Creative Uses of WordPress

Filed August 27th, 2010 under Web Technologies, WordPress

I‘ve been working with WordPress since 2005, way back in its version 2.0 days. Back then, endlessly tinkering with CSS selectors I didn’t quite understand was about the limit of what I could do with the platform.

So it’s interesting to me to reflect on where WordPress has come from in that time. From introducing the WYSISWG editor and post previews to custom post types, taxonomies, and on-the-fly menus. It’s come from being a basic blogging platform, to being the starting point for ideas big and small.

But the WordPress core itself is a slow-moving beast. And rightfully so – it’s a mature environment now, and integrating features into the core has to be methodical and well planned. With that in mind, much of the true innovation comes in the form of the theme and plugin market.

I’ve gathered a collection of these resources over the past few months, and I’d thought I’d share them here.

Social Networking: BuddyPress

BuddyPress.org

Dubbed Social networking in a box, BuddyPress is a plugin that sits on top of an existing WordPress installation. By default, it provides activity streams, extended profiles, friend connections, private messaging, WordPress blogging, extensible groups, and discussion forums.

Documentation and Collaboration: WordPress Wiki

If you’ve ever played with the official Wikimedia platform, you know that creating an easy-to-use Wiki is a pain in the ass. WordPress Wiki gives you the core functionality of a knowledge database with minimal trouble.

Ticket Tracking: Quality Control

Ticket tracking is hugely important for project management and customer service. And everyone in the web design/development community deals with on tickets on some level. But just like the Mediawiki platform, most ticket tracking environments are either complete overkill or get a “please gouge my eyes out” rating on the difficulty scale. Quality Control gives you an extremely lightweight ticket tracking system, and you get to keep your sanity.

Classified Ads: Yellooh!

Yellooh! is one of a few different examples of using WordPress as classified ads board. It stands out for its low cost and nice design. Users are able to add new entries from a front-end form (saving the trouble of logging into the WordPress backend), Google Maps is tightly integrated, and it even features PayPal integration if you’re looking to charges users to post ads.

Customer Support: Instant Q&A

Instant Q&A provides an easy to use Q&A forum perfect for customer support.

Comment! (1)