CSS Frameworks

Real-world applications are rarely programmed from scratch. Instead developers use general libraries and frameworks so they can follow standard patterns, re-use common components and develop their application quickly.

Similarly, you don't need to design a website from scratch with CSS, since there when are many patterns and components shared by websites. CSS frameworks provide a collection of CSS classes to make it easier to apply a structure and appearance to a web page.

Big CSS Frameworks

Big CSS frameworks are packed with all sorts of components, features and tricks. While I don't think a beginner should start with them, you should be familiar with them in case you want to use them later. These are the two most popular CSS frameworks:

• Bootstrap
• Foundation

Lightweight Frameworks

When you're starting web development, a large framework can sometimes get in your way. I think it makes sense for beginners to use a lightweight framework instead. Here are two popular ones:

• Skeleton
• Pure

Let's use Skeleton for our website. Skeleton provides a grid and basic styles to get the design of your website started. Like the other frameworks, it provides basic responsive capability so your site can look good on a screen of any size. It's all contained in one 400-line CSS file that you can read through.

Adding Skeleton

Follow these steps to add Skeleton CSS to your static website project:

1. Go ahead and download Skeleton from their site, or simply save the file from Github.
   
2. Save the file on your store website folder.
3. Include the CSS ile in your store page, right above the line that includes your own CSS file.
4. Save your HTML and reload your page in the browser to see your new look!

Using Skeleton

Float and Layout, discussed how to change the look of a bulleted list. Let's go ahead and use Skeleton to add a list to the side of our website. We'll use Skeleton's grid structure to split our site into two columns. This is a simple step with just a couple lines of HTML, but we'll break it down so you see what's going on.