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:
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:
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:
- Go ahead and download Skeleton from their site, or simply save the file from Github.
- Save the file on your store website folder.
- Include the CSS ile in your store page, right above the line that includes your own CSS file.
- 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.
Before getting started with Skeleton, let's add the following HTML to our page:
<ul>
<li><a href="#">Animals</a></li>
<li><a href="#">Missile Launchers</a></li>
</ul>
This creates s simple list:
Right now the links don't point anywhere, but later these could point to categories of items for sale on your website.
Now let's get started adding the Skeleton CSS.
1- Add a div that wraps around the content on your site.
<body>
<div>
</div>
</body>
2 - Add the class "container" to your div. This will center all the content on the site, and it uses max-width so it looks good on both a mobile and large screen. Look at the Skeleton file to see what other CSS it uses for this.
<div class="container">
3 - Now let's split the page into 2 parts. In Skeleton a div with thew "row" class is used to hold columns. Add another div inside the above div, and give it the class "row".
<div class="container">
<div class="row">
</div>
</div>
4 - Add 2 more divs inside the row class. Put your whole page's content in the second div, and put the list form before in the first div.
<div class="container">
<div class="row">
<div>
<ul>
<li><a href="#">Animals</a></li>
<li><a href="#">Missile Launchers</a></li>
</ul>
</div>
<div>
</div>
</div>
</div>
5- Finally, give the second div the classes "nine columns" so it takes up nine columns of the grid. Give the first div the classes "three columns".
<div class="container">
<div class="row">
<div class="three columns">
<ul>
<li><a href="#">Animals</a></li>
<li><a href="#">Missile Launchers</a></li>
</ul>
</div>
<div class="nine columns">
</div>
</div>
</div>
Save your HTML and refresh your page in the browser. You now have a nice responsive site!
