Home arrow Style Sheets arrow Using Yahoo Grid CSS

Using Yahoo Grid CSS

Are you looking for a way to save time when building professional-looking web sites? You're in luck. Yahoo just released Yahoo Grid CSS. This series will show you how to use it to create the templates you need to make your web pages look attractive and appropriately complement your content.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
August 21, 2007
  1. · Using Yahoo Grid CSS
  2. · Building some predefined web page layouts
  3. · Using another web page template
  4. · Completing the utilization of the predefined templates

print this article

Using Yahoo Grid CSS
(Page 1 of 4 )


Any web designer knows that building professional-looking web sites can be a rather daunting task. The creation process requires the interaction of different disciplines, such as creating the decorative images that will comprise the web site along with the corresponding CSS styles and its structural (X)HTML markup.

Of course, some processes like designing the web site's images should be completely delegated to one or more graphic designers, so this task shouldn't be hard to tackle. However, things get a bit harsh when it comes to creating the pertinent web page's layout.

And logically, questions that have to be asked include: do I have to use a three-column layout with liquid widths? Or wouldn't be it better to build a fixed, two-column schema? As you might guess, deciding what kind of web page layout best fits a particular web project may not be as intuitive as it seems at first glance.

However, if you're currently going through this rather painful experience, the subject of this series might bring good news to you. Yahoo's web designers have recently released a pretty neat framework, called "Yahoo Grid CSS," which among other things, lets you easily build different types of DIV-based web page layouts by using only a few simple templates which also accept a decent level of customization.

In the course of this three-article series, I'm going to show you how to put the "Yahoo Grid CSS" framework to work for you. You'll find it quite useful in those cases where you don't want to spend your precious time designing a specific web page layout on your own.

As with every framework that exists today on the web, there are some conventions and directives that need to be followed to get the Grid CSS working seamlessly. I believe that these predefined rules are actually pretty straightforward, and they shouldn't be a major problem to you.

All right, having introduced the subject of this series, it's time to learn together how to build different kinds of DIV-based web page layouts using the Yahoo Grid CSS framework. Let's get started now!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials