How to Customize Blueprint CSS Without Compressing

Blueprint CSS is an adopted standard for Web designers to create HTML-rich layouts for blogs, ecommerce and content sites. You can customize and store the files on your Web server without compressing the file on your site. The files are free to download, and then you must link the CSS file to your Web pages in the head section of the HTML.

Instructions

1. Open a Web browser and download the Blueprint CSS files to your computer. After they download, right-click the CSS file you want to use with your site and select "Open With." Select your preferred CSS editor.

2. Add your code customization changes in the file. For instance, if you want to customize the body class for your Web page's background, the following code changes the body class and changes the background color to red:

   body {
   background-color: red;
   }

3. Click the "Save" button in your editor. After the Blueprint CSS files are saved, you must link the files to your HTML page content.

4. Right-click the HTML page you want to use with the CSS files. Click "Open With" and select your preferred HTML editor.

5. Add the following code in the head section of the file:

   <link rel="stylesheet" type="text/css" href="blueprint.css" />

6. Save the HTML file and open it in your browser to test for the CSS changes.

References

• Github: Blueprint CSS Framework Tutorial

Resources

• Blueprint CSS