Object Oriented CSS!!

An open source project from Nicole Sullivan, a web developer living in California.

"My Object Oriented CSS grids and templates are open sourced on github. They have all the functionality of YUI grids plus some important features."

Over at github you can view a slideshow that describes OOCSS in visuals. They explain:

"Nicole first presented Object Oriented CSS at Web Directions North in Denver. Since then, the response has been overwhelming. OOCSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites."

Top 50 Best CSS Articles & Resources

A very rich site, as its title implies. It's part of a site that's devoted to design, inspiration, and tech.

The Art & Science of CSS: FREE 208 page book

No strings attached. :)
Time limited offer.

I just downloaded the book and had a quick glance through it. It doesn't just tell you the "how" of things, it explores CSS in the context of good website design.

Here are a couple of snippets from their Preface and Intro:

"Each chapter of this book will teach you how to style common web site components through practical examples. Along the way, you’ll learn many handy techniques for bringing complex designs to life in all modern browsers without needing to resort to messy hacks or superfluous presentational markup."

"Who Should Read this Book? This book is ideal for anyone who wants to gain the practical skills involved in using CSS to make attractive web sites, especially if you’re not the type who likes to learn by memorizing a formal specification and then trying to work out which browsers implemented it completely (does anyone enjoy reading specifications?)."

I'm looking forward to digging right in and reading every word!

Web Developer Toolbar

This FREE browser plugin/toolbar/extension was recommended by a fellow online student. She said,

"It adds a toolbar to your browser that gives you all kinds of control of cookies, CSS, forms, images, page and code source, etc. You can have it outline areas of CSS, tables and such on your page to help figure out how it was constructed. It will display all sorts of info such as HTML items, JAVA, links, META data, etc. You can disable CSS on a page to see what it looks like without the styling. It has validators for CSS, HTML and links. You can view the CSS split screen with the actual page to see how things are defined (both linked and embedded css). There are three little icons on the right side of the toolbar that give you a quick visual on whether the page you're viewing is standards compliant, has CSS errors or JavaScript errors. The list goes on and on. Take a look... can't beat the price!"

CSS Resources

I'm taking a course online and have gathered a few CSS resources that were recommended by fellow students.

• First, here's a link to my own CSS resources page
  
• CSS Vault: A site of resource links to inspiring websites done entirely with CSS. The site also has a blog that covers CSS topics, tips, tricks, ideas, etc.
  
• CSS Beauty: "A project focused on providing its audience with a database of well designed CSS based websites from around the world. Its purpose is to showcase designers' work and to act as a small portal to the CSS design community."
  
• Position Is Everything: "We're Big John & Holly Bergebin, and together we built this site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes."
  
• CSS Edge: "The goal here is to find ways to make CSS live up to its fullest potential with only minimal regard to browser limitations."
  
• CSS Quick Reference Guide: A list of properties all on one page includes "only the CSS features that work in most browsers.
  

Later: An addition to the list:

• W3Schools CSS "try it" examples page: Enter your text and try out CSS properties, see the results instantly on their page. My online instructor says, "I STRONGLY recommend spending some time playing with the "try it" here. You can see immediate results from the changes that you make in the css to really fine tune your learning experience."
  

CSS Type.com

Generate CSS code visually. Create a box of type using their online element selectors, including font, size, color, etc. See your selection results right on screen. Then click to generate the CSS code for it.

Web standards checklist

A fairly extensive guide to standards in a question/checklist format.

"The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc). In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly. This is not an uber-checklist. It is simply a guide that can be used..."

Webmaster Resource Centre

Bravenet offers an excellent all-in-one resource site. Includes Quick Reference Sheets for various types of code (HTML, CSS, more), articles, tutorials, MiniTools for your website, free clip art, fonts, scripts, and other free downloads and tools. A must-have bookmark!

Bravenet CSS Reference Sheet

What I like about this one is how thorough it is -- each entry (1) explains the property, (2) gives a list of all possible values for it (3) gives an example of how to use it. Excellent for beginners and beyond.

Iconico Online Dynamic CSS Editor

Edit in your browser & capture the code. This CSS Editor allows you to edit an entire CSS file at once with a dynamic preview shown as you work. The preview will show the exact line you're editing, and it will update as you type. Works on modern versions of Internet Explorer, Firefox (Mac and PC), Safari, Mozilla.

CSS Templates

The site also has a CSS How-To section.

Ten CSS tricks you may not know

I've been using CSS for quite a while. But I learned a few new tricks on this webcredible site. NOTE that near the bottom of the page there's a link to some other CSS resources, including Ten more CSS tricks you may not know.

Creating CSS Design from scratch

From Informit.com's Web Design Reference Guide:

"Even for experienced Web designers, creating a site in CSS for the first time can be a daunting task. In this tutorial, I'll help you face your first CSS site design without fear by breaking the process into three easy steps, starting with a blank canvas and finishing up with a fully functioning Web site. I used this very process to create an existing site, which I'll discuss more later in this guide."

Web Developer - a Firefox Extension

This extention's author, Chris Pederick, says:

"The extension is highly configurable and contains many powerful features including CSS manipulation, multiple validation options and tools to display information about the current page."

The editor if Mozilla Update calls it

"an essential extension for any web developer/designer as it provides a raft of incredibly useful features all under one roof. You will wonder how you ever managed without it!"

Menus on the handy toolbar include CSS, Forms, Images, Information, Miscellaneous, Outline, Resize, Validation, View Source, Options. Bravenet's Webmaster Tips n Tricks Newsletter says,

"...a few of the developers tools that I have found most useful for basic website development. First and foremost is the Web Developer Toolbar. This is a fantastic toolbar that caters to the needs of developers. Each item (except ‘View Source’) has a drop down full of great things to do so there won’t be room to explain them all. You can resize your browser to different resolutions, outline different HTML elements in varying colors to locate problems in your code - there is a ton of great stuff in this toolbar."

Here's a direct link to the download page at the author's website (chrispederic.com)

CSS Panic Guide

Also entitled A Guide For The Unglued. :)

This is not a complete resource, this is a fast resource. These are the sites that I refer to first, and that I tell people to read. When you want more, just about all of them have their own links to good sites.

Modular CSS

I'd never thought of this concept before, and it seems to be a good approach to simply life in the CSS lane.

This isn't a new idea but looking at people's code it doesn't seem to be a particularly widely used practice: modular CSS. That's a poncy name for the very simple idea of grouping related styles into separate stylesheets. The same set of tasks turn up on project after project and a little careful thought can save hours of foundation work, allowing you to get on with the serious business of turning a flat design into a web page far more quickly. The broad groups that I use are: typography, forms, layout, navigation and colour.

CSS - Style Templates

I always love to find a good source of some new CSS ideas, some layout templates, etc. This is a good one.

... this is like peeking at the answers at the back of the book. Some of these styles are like low hanging fruit, ready to pluck and use. Others take a little work to adapt. And some even let you specify a couple of things on a form, turn a crank, and out comes your styles. So you've got no excuse for building nasty, unmaintainable web pages any more. Let's get stylin!

Want more CSS resources? Here's a link to my website's CSS Resources page.