YUI CSS Framework Tutorial

How to use the YUI CSS Framework to cut down on the time and stress it takes to produce a good layout. What is YUI? The Yahoo User Interface library is comprised mostly of Javascript utilities and controls to help front-end developers create a rich user interface. It also comes with a great CSS framework to make developing websites a lot faster. This CSS framework is what we’ll be focusing on today. It’s lightweight less than 6KB when minified, easy to use, and most importantly, it works with all major A-grade browsers…

YUI 2: 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.

  • Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
  • Supports easy customization of the width for fixed-width layouts.
  • Flexible in response to user initiated font-size adjustments.
  • Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
  • Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
  • Layouts less than 100% are automatically centered.
  • Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
  • Offers full A-grade browser support.

The Z-Index CSS Property: A Comprehensive Look

Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances. The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges…

Beautiful CSS: Organizing Your Stylesheets

An article anout CSS stylesheet organization. The separation of style and content that makes CSS so awesome can also make it difficult to understand. Adding to that difficulty is the fact that each designer may have a different way of organizing stylesheets. If you inherit someone else’s site, this can cause some problems. In a perfect world everyone’s CSS would be well-organized, easy to scale, and easy to understand. We may not be able to attain such CSS Nirvana but we can at least make it easier on ourselves and those we work with by following this set of guidelines…

CSS: Design Out Of The Box

Are you tired of your typical columned and boxed layout? It is time to learn how to break out of the box and do something creative. In this post, I’ve collected some of the best examples that are designed out of the box. I’ve also provided some quick CSS tips with demo files on how to break out of the box by creatively using background images and the CSS position property…

Simple CSS Tricks to Greatly Improve Site Typography

When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the rest of the design. Here are a few CSS tips to make sure you get it right…

Mastering CSS, Part 1: Styling Design Elements

CSS isn’t nearly as tricky as some people tend to believe. Below are fresh tips and techniques for creating and styling design elements with CSS. They’re a good place to start if you’re new to CSS but are valuable even if you’re a veteran designer. Not all the techniques are strictly CSS; some include integration with JavaScript or XHTML to extend the functionality of your site…

Sticky Fixed SideNav Layout with CSS

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site…

The Definitive Guide to Using Negative Margins

Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with coding elegance. Out of all the CSS concepts designers have ever used, an award probably needs to be given to the use of Negative Margins as being the most least talked about method of positioning. It’s like an online taboo – everyone’s doing it, yet no one wants to talk about it…

Vertical Centering With CSS

There are a few different ways to vertically centre objects with CSS, but it can be difficult to choose the right one. I’ll show you all the best ways I’ve seen and also how to create a nice little centered website.

Vertical centering with CSS isn’t an easy thing to do. There are many different ways that may not work in some browsers. Let’s review 5 different ways to vertically center objects, as well as the pros and cons of each method…