Premium Content - Free Preview
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:
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.
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!
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.