5 Popular CSS Frameworks + Tutorials & Tools for Getting Started

5 Popular CSS Frameworks + Tutorials & Tools for Getting Started

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love.

Main features of good CSS Framework is to 1) rapidly speed up our development time, 2) should have a very small size, 3) have good documentation and tutorials and 4) have clean grid structure. You will need a basic understanding of the CSS framework you are going to use to understand why and how things get solved.

In today’s post we present an overview of the 5 most popular CSS Frameworks; showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.

1. 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.

Demo can be found here

Tutorials Explaining how to use 960 CSS Framework

• A Detailed Look at the 960 CSS Framework

  

  “Jeffrey Way” takes a close look at the 960 CSS Framework, explaing the pros and cons of using it. He also takes us step by by step and create a simple “12 column” layout with a simple header and two column structure. Most important tip here is : you must assign a class to each div. Naming conventions require that that the class name begins with “grid_” and ends with the number of columns needed.

• 960 CSS Framework - Learn the Basics

  Stefan Vervoort takes the heavy work for you and explains the basics of this framework so you can start developing with 960 pretty fast. Basics principles explained here include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this framework.

• Fluid 960 Grid System

  

  The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.

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

There are several Blueprint plugins available which can overwrite aspects of the framework or add new styles for you to use.

Check out the Live Demos

Tutorials Explaining how to use Blueprint CSS Framework and tools using it

• BlueprintCSS 101

  Jeff Croft explains Blueprint’s core feature, how we use it, how it has impacted our workflow, and what we like about it.

• A Closer Look At the Blueprint CSS Framework

  In this tutorial we will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to actually use the framework.

• Blueprint CSS Cheat Sheet

• Blueprint Grid CSS Generator

  This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png image file for use as a background image during development- very handy for making sure everything lines up properly. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

• PXtoEM

  

  PXtoEM.com is a website that makes converting PX values to EM values easier. The CSS file of the values you’ve choosen can be get based on the typography.css portion of Blueprint CSS to setup a default typography.

• Construct

  Construct, a visual layout editor based on Blueprint & jQuery, Construct, a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

3. 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.

• Styling Buttons and Toolbars with the jQuery UI

  

  A real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content. Here are button examples that demonstrate how to incorporate the power of the CSS framework classes in a custom widget.

  Check out the Live Demos here

4. 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.

YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.

Check out the Live Demos here

• Flexible Layouts with YAML

  

  Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article, providing an overview of what is possible with YAML and may deliver some ideas for your future layouts.

5. 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.

The YUI Grids Builder — a simple interface for Grids customization.

Don’t forget to check the CSS Reset/Base/Fonts/Grids Cheat Sheet

Check out the Live Demos here

• Intricate Fluid Layouts in Three Easy Steps

  This tutorial explains how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids in three easy steps.

• YUI CSS Grids: awesome, but useless?

  Jeff Croft asks if YUI CSS Grids has a certain limitation for sites wider than 750px, Dustin Diaz comes in and explains some interesting features and usage we can do using YUI CSS Grids. “One cool thing I’ve done with it is made seven different templates with virtually the same html with the exception of one class name (yui-t (1-7)). It’s wonderful because it’s completely source order independent. If I wanted a style switcher on my site you could take the approach of swapping out a className rather than a whole new css file. Thus, no reason for the whole “Invasion of the Body Switchers””

Worth Checking CSS Frameworks

- typogridphy

A Typographical and Grid Layout CSS Framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking.

Download it here

- SenCSs

SenCSs stands for Sensible Standards CSS Framework, supplies sensible styling for all repetitive parts of your CSS, allowing you to focus on actually developing your website’s style.

View the example HTML file

- A CSS Framework

A CSS framework allowing rapid development of sites with pre-written and tested components, letting you get to the interesting stuff as quickly and efficiently as possible.

- Tripoli

Tripoli is a generic CSS standard for HTML rendering. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

- BlueTrip CSS Framework

A full featured and beautiful CSS framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons.

Check out the Live Demos

- Emastic

- WYMstyle

- Elements

- Malo

- LogicCSS

Articles Explaining what is CSS Frameworks and how/which to Use

- 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?

ceoxi Read More!

Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc

Learn How to create Compatible CSS for Various Browsers like Internet Explorer 6 , IE7 , IE8 , Opera , Firefox , etc..

Web-designers create blogger template for Hours using one particular browser say Firefox , They don't know that the CSS code they use is compatible only for the browser they are working at present. Especially in IE6 , there are many Compatible issues.

for Example : the sidebar may appear below main content wrapper or there would be more gap between each widget , content wrapper and sidebar may overlap ,etc.

So in this Post I will tell you How to create CSS code which is compatible for almost all browsers. For this you need to have two browsers Internet Explorer 6 and Firefox .


I have chose IE6 because it is one of the most common browsers which windows have.

First let's check is our current Blogger template is compatible with all browsers or not.

For this visit this website : Browser Screen shots
Enter your Blog URL and check the images there to know How your blog looks in various Browsers.

step 2 : If you find any incompatibility issues then you need to modify your CSS code to suit browsers.

Let's us see an Example

Generally the css we use if of this form :

#example {
float : left;
width : 170px;
margin-left : 5px;
}

In this assume that this particular div is incompatible with Internet Explorer version x.

then we need to modify the above css code as

#example {
float : left;
width : 170px;
margin-left : 5px;
}
#example {
float : left;
width : 185px;
margin-left : 3px;
}

in this first css code is for all versions of Internet Explorer and the second css code is for other browsers like firefox , opera , dillo , sea monkey , etc

but it will be confusing for you to edit.. so now we are going to add different CSS rules to IE, we can use the child selector command which IE can't understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

After introducing Child selector command , the css code must look like this

#example {
float : left;
width : 170px;
margin-left : 5px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}

in this the green colored code is for IE versions and the red Colored code is for other browsers.

So with simple child selector command we can make our css code compatible for all browsers. Every time when I create a New template , I use to check whether it is compatible with other browsers or not. And I use to change the CSS code to suit that browser.

If you are unable to modify the CSS code then please mail me your template and explain the problem , I will rectify those errors and mail you back.

Read More!

[FREE&VIP] Revolution Lifestyle Blogger Template

We have two version of Revolution Lifestyle Blogger Template.They are the BLOG version (FREE) and the MAGAZINE version (VIP).

The first version is BLOG version. The Revolution Lifestyle BLOG Blogger Template is available for FREE. Don’t be fooled by other Revolution Lifestyle blogger template that are poorly converted to blogger.

Revolution Lifestyle BLOG Blogger Template

Click here to see the BLOG version live demo

The second version is MAGAZINE version. This the first REAL MAGAZINE blogger template in this world. The Revolution Lifestyle MAGAZINE Blogger Template is available for VIP Members.

Revolution Lifestyle MAGAZINE Blogger Template

Click here to see the MAGAZINE version live demo

Okay, it’s very easy to use this blogger template, so please read the instruction carefully if you don’t want to get any problems.

INSTALLATION INSTRUCTION

1. Download and extract the zip file.
2. Login to your Blogger Dashboard
3. Go to Layout > Edit HTML
4. Upload XML Template file (DO NOT copy and paste the code directly to template editor box)
5. PLEASE DO NOT PREVIEW YOUR BLOG. Go to Layout > Page Element. WHY?
6. Edit “Top Menu” widget. Add at least one link, for example you can make a link to your blog homepage with “Home” anchor text
7. Edit “Banner Ads” widget. You can add this code (for example):

   <a href="http://banners.moreniche.com/go.php?id=4226&w=116531&s=38" target="_blank"><br /><img border="0" width="468" alt="MoreNiche Affiliate Program" src="http://banners.moreniche.com/show.php?id=4226&w=116531&s=38&e=gif" height="60" /><br /></a>

8. Finish. Preview your blog to see the result.

UPLOAD HEADER IMAGE

Go to Layout > Page Element, edit Header widget (in the top left), then upload this image (for example),

(use right click and save this image to your local computer)

Don’t forget to choose “Instead of title and description“.

Create your own header image using this blank logo image. Edit this image using your image editor.

(use right click and save this image to your local computer)

FEEDBURNER NEWSLETTER WIDGET

Go to Layout > Page Element, add a HTML/Javascript widget to SIDEBARTOP section. Add this code,

<div class="newsletter"><br /><h2>eNews & Updates</h2><br /><p>Sign up to receive breaking news <br/> as well as receive other site updates!</p><br /><form id="subscribe" action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br /><input id="subbox" onfocus="if (this.value == 'Enter your email address...') {this.value = '';}" value="Enter your email address..." name="email" onblur="if (this.value == '') {this.value = 'Enter your email address...';}" type="text"><br /><input value="http://feeds.feedburner.com/~e?ffid=YOURFEEDBURNERID" name="url" type="hidden"><br /><input value="eNews Subscribe" name="title" type="hidden"><br /><input id="subbutton" value="GO" type="submit"><br /></form><br /></div>

Change YOURFEEDBURNERID with your own Feedburner ID.

FEATURED VIDEO WIDGET

Go to Layout > Page Element, add a HTML/Javascript widget to SIDEBARTOP section. Add this code,

<object width="300" height="250"><br /><param value="http://www.youtube.com/v/jGJ7ZXbTNN4&hl=en&fs=1" name="movie"><br /><param value="true" name="allowFullScreen"><br /><embed width="300" src="http://www.youtube.com/v/jGJ7ZXbTNN4&hl=en&fs=1" allowfullscreen="true" height="250" type="application/x-shockwave-flash"></embed><br /><br /></object>

Change the Youtube Video URL with your own Youtube video.

RECENT POSTS WIDGET

Go to Layout > Page Element, add a Feed widget to SIDEBARTOP section. Add Feed URL,

http://YOURBLOGNAME.blogspot.com/feeds/posts/default

Change YOURBLOGNAME with your own blog name, and change the Feed Title to “Recent Posts”.

DOWNLOAD

By downloading and using this template, you agree to the following terms:

• You may NOT resell this theme
• A link back to Revolution Two, Magznetwork must be retained in the footer (either modified or unmodified)
• You may use this theme for personal or commercial projects
• You may modify, translate.

Revolution Lifestyle BLOG Blogger Template (10.1 KiB, 52 hits)

Signup / Login to Magznetwork VIP to download the MAGAZINE version. Read More!

Whitehouse.gov Redesign: The Change Has Come

Whitehouse.gov Redesign: The Change Has Come

The US government is a brand; the world’s oldest brand (not to be confused with its oldest profession) and one often overlooked in favor of the obvious companies and celebrities. The United States of America is arguably a brand in dire need of refreshing. While this is certainly a larger task than simply restyling a logo or adding a smattering of Web 2.0 cliches to its Web and print material, a significant step has been taken in the full overhaul of the White House website.

Millions across the world focused on the United States’ inauguration of Barack Obama, waiting for the change they were promised in the election campaign. While only time will tell if that happens, a dramatic change can be seen on the new White House website.

In this installment, we’ll take a tour of the updated Whitehouse website, as well as quickly compare it to the old website under the George W. Bush administration. The many changes within the government are reflected in the website’s new direction: the design, the content and the technology.

Visual Design and Typography

First a quick glance at history: the White House website under the George W. Bush administration had a single-colored background, with a very subdued color scheme. White, light gray and navy blue were the only colors found outside of the iconic presidential seal. The logo was very prominent in the upper left, with the navigation taking up a full third of the page. As shown here, there were minor CSS alignment issues throughout the website.

Now back to the present, for the “reboot”: shortly after Barack Obama’s inauguration to the US presidency, a new website was posted. The White House logo was heavily reduced in prominence, taking a visual backseat to the navigation and content header.

The navigation got a sorely needed menu update, freeing up an extra third of screen space compared to its predecessor. jQuery is used extensively throughout the website: on the menu, in images (with thickbox) and for the carousel effect.

Subtle gradients and whitewashed effects are design concepts retained from the original website, although the blue gets a much larger range and deeper tone. Red comes into play with the roll-overs, and a tiny flag icon is included, interestingly, in the prominent spot under the logo and to the left of the navigation: a sly allusion to the “flag pin” controversy during the campaign? Perhaps.

The newsletter sign-up box gets prominent placement and is well offset by the contrasting color. At the time of this screenshot, it matched the President’s skin tone rather well. One wonders if that is a coincidence.

The design adds a number of classic elements: the stars, architectural details in the main background, the grayscale presidential seal in the horizontal rule before the footer.

Sidebars on the website show desaturated illustrations that follow the color scheme of the rest of the website. Titles and buttons maintain the brown tone, with subtle gradient effects.

Typography

Lucida Sans is used for body text and Georgia for headings. These older fonts carry on the slight classical/retro slant of the website. In a nod to sans-serif font readability on the Web, Arial is used for main text. While the font used in the image headers is not listed, it is a heavy serif font, styled like flyers of old, from the tiny pronouns and articles to the fully capitalized nouns.

Website Structure

Structurally, the website shows a clean hierarchical importance from top to bottom and left to right. The content header carousel effect gives lush visual prominence to current topics, with the left side containing the carousel controls and headline text. This allows users with low resolutions or alternate browser set-ups, such as screen readers, to see the content of the headline before the photo comes into play.

At an 800×600 resolution, the screen shows only the blue content header, with the background and white content box cut off. At that resolution, the website does scroll horizontally, but the headline becomes the focus, and the link to the featured content is visible without having to vertically scroll.

Directly beneath, we have a three-column set-up: the blog, a search box and the “Agenda” section, as well as a content pull-out (most likely a placeholder for future expansion).

Usability and Accessibility

The website takes a few detours from the usual standards of usability. On the main page, the search box is almost lost in the middle of the secondary content; it has little to no visual impact, with the word “Search,” the outline of the input area and the tiny magnifier all in a light gray. The upper right has an email/newsletter sign-up function that is well placed and well set off from the blue content header, but this takes the place of the conventional spot for the search box.

The content of the website scales decently when text size is changed: the navigation menu tab is a static image; however, the content in the roll-over and the duplicated navigation in the footer do scale. Considering the reach (the demographics, if you will) of the website, a more screen reader-friendly version would be a good step to becoming more accessible, because the header navigation is unreadable and the footer navigation requires the entire page to be read before being able to navigate away.

The website’s images are well thought out and optimized, and while they are not a big burden on dial-up users, a text-only version of the website would solve a number of accessibility issues in one go.

Change We Can Validate?

Perhaps not. As of this writing, there are 41 errors and 1840 warnings for CSS 2.1.

However, from a visual standpoint, there is veritable change in the content that is being delivered, in the use of technology to share that content and in the styling of that content. The United States government is taking a step to refresh its brand and its image to the world and to add transparency to its workings; the President’s website reboot shows a new, well-designed direction.

About the Author

Katie Kelly is a front-end Web developer by day and video game fanatic by night. With over 15 years of experience, she enjoys the hybrid mix of clean code, user-friendly content, and customer-driven e-commerce. When not fighting the dreaded “scope creep” monster, she remembers to update her website with helpful tips about wrangling with the design side of ASP.NET: mediapyre.

(al)

Read More!