One pretty cool tool I use to assist in the development side of web design are grid overlays. Grid overlays are exactly what they sound like, a grid that overlays your website. I use them as a quick visual guide to check to see in all my elements line up as intended and are pixel perfect.

Browser plugins

One option is to use Firefox and an extension called Gridfox. This is useful as I already use Firefox as my main development browser.

Scripts

Andy Budds Layout Grid Bookmarklet

A more die hard approach would be to use Javascript. Andy budd wrote a nice overlay grid bookmarklet, originally inspired by Khoi Vinh’s post about using a background image of a grid for layout. The script is also demonstrated on the SubtleGradient website.

#grid

A personal favourite is this Hashgrid script you can embed on your site. The clever part is you can turn it on and off by typing ALT + G – g33k! The clever scripting gives me the functionality I need, if I have a particular layout to test with a different structure I can simply replace the bg image.

Designing with Grids in mind

Do you or have you considered using a CSS framework when developing sites? Personally I don’t as I feel I can write lightweight CSS which is both flexible and cross browser. Photoshop guides and grids help in the design phase but you lose these when developing, until now of course.

In summary

These tools help bridge the gap between the design phase (Photoshop, guides and grids) and the development phase (using these tools to test and compare). Let us know if there are any other tools out there that do something similar, I’m sure I’ve missed some, oh and let us know what you think of these, if you already use them and what your experiences of working with them are.

Related posts:

1. Your CSS framework needs you!
2. Smush.it for WordPress – Optimise your images for a lightening quick website
3. CSS NEWS – A quick catchup

Conclusion

Now hopefully you are fully versed on CSS Inheritance, let us know what you thought. Did you learn anything new? I’ve been hand coding CSS for as long as it’s been feasibily supported and I have certainly picked up a firm understanding of Inheritance.

More CSS resources by us

CSS Shorthand

CSS Shorthand top tips. Think you’re a CSS Guru? You should checkout CSS Shorthand, we’ve even written an article on it.

CSS for ABSOLUTE BEGINNERS – shaping up with CSS

CSS for ABSOLUTE BEGINNERS training presentation. If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the presentation to watch.

The CSS Bible

The CSS Bible – full chapter and verse, every article on css you’ll every need from third party sites. A great post to bookmark.

Related posts:

1. CSS for ABSOLUTE BEGINNERS – shaping up with CSS
2. The CSS Bible – CSS is your God!
3. CSS NEWS – A quick catchup

<br clear="all"> is typically used by crap developers who hold no appreciation for web semantics nor accessibility. Ironically these culprits are usually the smart a**** that are the first to point out others mistakes, no matter how minor. They build websites that are both bloated, slow and unstable cross-browser. <br clear="all"> to me acts as the ultimate professional insult to those that have crafted for years, through changing technologies and user demands. <br clear="all"> is like a bird crapping on your freshly washed and polished hatchback, a minor little thing that really p***** me off when I encounter it.

Like the story ‘The Princess and the Pea’, no matter how much preparation and effort you put into something, all it takes is a stupid little pea to annoy you and reduce a potentially relaxing nights sleep to an unexpected search for the very thing that shouldn’t be there in the first place, the <br clear="all">.

Dear Website Developer,

If you need to clear a floated element, please don’t use <br clear="all">. As a last resort use a simple CSS class on the element you want clearing. In your bloated, unstructured CSS file, which more than likely will be inline, create a class:

.clear{
     clear:both;
}

and remember you can add multiple classes to an element, like:

<div class="className className clear">
I'm a clever little developer aren't I
</div>

As Borat would say, this is ‘unbelievable’!!!

<br clear="all">

<div class="className">
Hack hack hack
</div>

<br clear="all">

<div class="className">
Hack hack hack
</div>

So next time to quickly quack in <br clear=”all”>, think, you’re a dirty little bugger! One last thing, if you write <br clear="all">, it should be <br clear="all" />, but I guess you don’t care do you?

Related posts:

1. Poll: Shortest search phrase a visitor found your website with

The CSS Box Model

CSS linky link craziness

Related posts:

1. Your CSS framework needs you!
2. CSS NEWS – A quick catchup
3. 10 CSS shorthand techniques you’ll use everyday

Originating from an unknown source in the UK at around 2am GMT, The “Comic Sans” Virus ‘CSV’ started corrupting the CSS files of websites through a server loophole, leaving them defaced with the “Comic Sans” typeface.

By 9am GMT, an estimated 10 million websites were infected with ‘CSV’, by which time the suspected ‘loophole’ in the servers configuration, at the originating London Exchange center, was plugged.

By 9:31am GMT, over 5 million websites were returned to their original state, leaving the rest still infected with ‘CSV’.

A patch download has been created to remedy any websites still infected. This patch can be downloaded at the bottom of this article.

Evidence of infection

Apple

Estimated infection time: 3 hours

Microsoft

Estimated infection time: 6 hours

UK newspapers

Times Online

Estimated infection time: 1 hour

Telegraph

Estimated infection time: 2 hours

Friends

Chrisg (Chris Garrett)

Estimated infection time: 15 minutes

Bronco (Dave Naylor)

Estimated infection time: still infected

Blog Storm (Patrick Altoft)

Estimated infection time: still infected

Reaction

Dave Naylor from Bronco: “I woke up to the news that the CSV infected our main website. After a few moments of deliberation, we decided to take action, much against the wishes of my wife who actually liked the change.”

Mogens Elsberg from Microsoft: “I see this little f***** has come back to bite us in the a**! Maybe we should have scrapped VINCENT CONNARE’s 1995 font for a less volatile alternate. Thanks for the heads up Frog”

John Smith, Chief Executive of BBC worldwide: “We think the British public will welcome the change, we may revert the fix in the next couple of days.”

The Patch

If your website seems to have been infected by the CSV you can manually patch your website by downloading the file below:

CSV patch 1.21, Multi-OS compatible: CSV patch.jpg

Related posts:

1. FONT EMBEDDING on the web moves one step closer
2. SEO Hot Topics at Think Visibility
3. Typeface Periodic Table

What’s a CSS framework?

A CSS framework can help you achieve rapid development of websites, web apps and mashups. It eliminates repetitive tasks while prototyping designs by using a pre structured CSS/XHTML grid-based framework.

Main features of good CSS Framework is to:

1) Rapidly speed up our development time
2) Very small file size
3) Good documentation
4) A clean grid structure.

You will need a basic understanding of CSS to enable you to utilise the full potential of your chosen framework.

Frameworks currently available

960 CSS Framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

Tutorial: A Detailed Look at the 960 CSS Framework

Demo: Live Demo

Blueprint CSS Framework

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, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

Tutorial: A Closer Look At the Blueprint CSS Framework

Demo: Live Demo

The jQuery UI CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

Tutorial: jQuery UI CSS framework

Demo: Live Demo

YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

Demo

Yahoo YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

Demo

Articles explaining CSS Frameworks

What’s not to love about CSS frameworks?
CSS Frameworks + CSS Reset: Design From Scratch
What Are The Benefits of Using a CSS Framework?
Blueprint CSS Framework vs YUI Grids
Battle of the CSS Frameworks
The Lessons of CSS Frameworks
When to use CSS framework?

Related posts:

1. Instant Blueprint – Create a website framework in seconds!
2. Grid Overlays to assist your website development
3. CSS NEWS – A quick catchup

My Top 10 Most Used CSS Class Names

Many developers are puzzled when it comes to assigning class names to elements and often end up using wrong ones. Class names should not describe how the element looks like or where is it placed. A good class name should describe what a certain element represents. Here are my top 10 class names with explanations. Hopefully it will give you a clearer image of what kind of class names you should use. Read more…

9 CSS frameworks for faster templates building

Frameworks are already widely used for Javascript or PHP development, and it is getting popular for CSS templating. It improves your workflow and lets you set up templates quickly with cross-browser compatibility in mind. Here is nine frameworks to make templating faster. Read more…

The Woork Handbook

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork! Read more…

Useful resources to improve the look and features of HTML Forms

Are you looking for some useful tips to improve the look and features of your standard HTML FORM elements? In this post I suggest you some interesting resources about this topics. Read more…

Useful guidelines to improve CSS coding and maintainability

Developing CSS code for websites with a complex layout structure can be an hard work for a web designer. But in this situation, an harder work is writing code in order to simplify the continuous maintainability process. Read more…

CSS coding: semantic approach in naming convention

Naming convention in CSS coding is an “hot” discussion topic. In this post I want to illustrate some suggests and guidelines to use a semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout. Read more…

Creating easy and useful CSS Sprites

CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does. In this article I will teach you how to make them. Read more…

CSS SuperScrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names. Read more…

Related posts:

1. Your CSS framework needs you!
2. CSS Box Model Hierarchi
3. CSS for ABSOLUTE BEGINNERS – shaping up with CSS

Never ever ever use tables for layout!

Visit: shouldiusetablesforlayout.com

You’ll see a mock towards those who use tables for layout.

It’s such a geeky website, but if you look at the source code it’s even better… Kudos to the developer who had this idea.

<!-- Honestly, no. -->
<!--
    <table border="0" width="100%">
      <tr>
        <td align="center">No.</td>
      </tr>
    </table>
  -->
  <!-- Fact: Chuck Norris hates layout tables! -->

Related posts:

1. CSS for ABSOLUTE BEGINNERS – shaping up with CSS
2. More awesome t-shirt designs from threadless.com

Yep the good old CSS box model, explained once more. The CSS box model is a fundamental element of modern web design that all web designers need to master. This CSS box model controls and details the behaviour of many HTML elements, such as DIV, P, ul, so understanding this is a firm step forwards to better web design.

3D CSS Box Model

Jon Hicks, who’s a leading figure in web standards and userbility, has created this brilliant 3D CSS Box Model diagram and kindly supplied the original Illustrator file for me to modify and put on the site for you to look at, so a big thanks goes out to him.

Related posts:

1. CSS for ABSOLUTE BEGINNERS – shaping up with CSS
2. The CSS Bible – CSS is your God!
3. Your CSS framework needs you!

CSS is an abbreviation for Cascading Style Sheets. Web designers use a CSS file to control the visual layout of a web page, grouping all styling declarations into one reference document while removing them from the HTML code that lies beneath the website.

If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the place to be. Over the next few weeks I’ll be posting walk-through slideshows that explain CSS and XHTML visually, in an easy to digest format. This week it’s…

CSS help for absolute beginners

Shaping up with CSS

Credit: All copyright and materials Slideshare.net.

Think you’re a CSS Guru?

Well I guess your too good for this, it’s like child’s play, right? Well have a look at this, 10 CSS shorthand techniques you’ll use everyday, it will be more up your street.

Related posts:

1. Your CSS framework needs you!
2. CSS NEWS – A quick catchup
3. CSS Box Model Hierarchi