Creating awesome CSS3 animations – Thomas Fuchs

At the moment, my work is all about how to start producing Flash style animation without Flash. This looks like it should give me a few insights into achieving this with CSS.

Processing demos at Monocubed

On the path to figuring out this animation puzzle I’ve also been playing around with ProcessingJS. Monocubed has heaps of great demos, most of which are really easy to replicate

How to Centre and Layout Pages Without a Wrapper

As soon as I read  the first paragraph I’d ripped off the idea and starting playing with code. But I really should read through this article entirely

HTML5 Doctor

Just sit down and devour this site I think…

CSS Gradients

Turns out that ye olde IE6+ has some gradient tricks up it’s sleeve… not quite (!) as flexible as the modern browsers, but still work reviewing this to see what can be squeezed out of the old dog.

In the last 3 years I have worked in larger and larger teams and I’ve found the following guidelines quite useful for making the change from solo developer to a member of a team.

Some General Rules to keep in mind

• Working in a team, you have to surrender some of your personal preferences when writing your CSS (eg comments style, how you format the document, and how you build the directory structure).
• Expectaion should be that by looking at the web page, you can predict the CSS code before you look at the source file, and that you can quickly scan the CSS file to find what element is being styled.
• The basis of good CSS needs to be in consistently written HTML, if HTML is inconsistent you will end up writing CSS to compencate. More code means more difficulty in maintenance.
• Be consistent with the CSS file, don’t mix formatting styles or selector styles. If you lose consistency it will make the developer have to stop and think each time consistency is broken. This will slow you down.
• If you are going to be maintaining the CSS after site launch: Out of the selector and the style defined, the selector is more important to you. The formatting of your document should reflect this.

Bear in mind that these rules can’t always work for you, but try to follow them if you can.

Stock standard CSS

Use reset, and a common way to measure fonts. Establish the font measurements and stick to them.

What CSS to put on what area of the page

Layout

Layout should only deal with the grid layout for the page, therefore you shouldn’t need anything more that widths, floats, position… maybe some padding or margins.

Site Furniture, Modules and page specific content

These are similar in concept. This makes up the majority of your page, you should avoid setting explicit widths on modules, allowing the layout to take care of how wide modules and furniture should be.

Formatting code and consistent selectors

These two areas need to be consistent, once they are you will be able to quickly scan your CSS document to find which rules are applying to which elements

Formatting code

• One line, alphabetical order of properties (I know alphabetical is anal)
• Don’t indent your code, the approach to using the selectors will automatically take care of that.

Selectors

• Try to keep general style rules for tags to a minimum.
• Begin all your selectors from the same place, and begin them from either the layout, furniture, module or page specific root. eg (.module .heading .h3 {} .group .item .)
• Be as descriptive as you can be with you selector
• Only make a general rule if you are confident it’s not going to cause problems with other elements

Dealing with Hacks

Don’t use hacks inline with the stylesheet, seperate them out and put them in a seperate style sheet.