In this article we will talk about Blueprint, a CSS framework. Blueprint is a tool for web application developers that streamlines the creation of a page. It consists of a series of CSS codes having useful for the development of the page and may apply other types of models such as or letterpress printing.
The Blueprint has a variety of CSS style sheets with codes that can be used for styles to the pages of a fast way and also can solve many problems in the incompatibility of browsers.
Defining CSS frameworks
A framework only it is a collection of files with statements of styles defined with a standard that can be used in any kind of sites. It is useful for the development of web applications and also to solve any problems and common situations that occur when developing a web application.
BluePrint CSS framework is built on a strong foundation of CSS codes that help in the development and creation of web applications. We highlight the following features.
- The grid: Used to create any necessary structure for the page. It is a set of CSS classes to the positioning of any element in a width of 950px. It is divided into 24 columns.
- Typography: Pre-defined precisely for all the elements that will use text.
- Forms: With pre-defined codes to improve the user interfaces.
- Printing: With more precise CSS settings so that the pages are more readable at the time of printing on paper.
- IE: With pre-defined styles to solve some of the most common problems of IE.
Thus we have a base to easily start creating new complex web pages and compatibilities in different browsers. Plug-ins were created by third parties for icons, to make the page fit the browser width completing further BluePrint.
Before we continue, we need to download the BluePrint files, so we need to access the website available at Links section and perform the download zip.
After we complete the download, unzip and we know a little of what comes with this file package. Come on:
BluePrint folder: In that folder have the following files.
- IE.css: Contains codes defined for IE family, so you can address some incompatibility issues.
- Print.css: Contains styles for printing, making it easier for when a printout is made.
- Screen.css: Contains styles that apply to when the page is viewed.
BluePrint/src folder: Inside this folder we have the source files of the framework, but with the complete code with all comments and format to be read normally. If we want, it is interesting to take a read on them, because we may learn a lot especially how the classes are organized to be used when we build our web applications. Inside we have the following files.
- Reset.css: code file to reset the styles of all browsers and make them compatible.
- Typography, css: Contains the codes by default printing settings for web applications that help with some problems when working with texts.
- Grid.css: File base, the most important, which contains classes to generate the grids, paying off open it and pay attention to how the classes are created and which are offered.
- Forms.css: A file that has the classes responsible for the form elements.
- IE.css: Files with own style codes for Internet Explorer.
- Print.css: file containing the codes to be used when printing on paper.
Blueprint Plug-ins folder: Inside this folder you can find a number of very useful plug-ins with various features for BluePrint.
Lib folder: Folder with Ruby script files to work with BluePrint.
Templates folder: This folder has layouts of files that you may be using in graphic editors of your choice. These files are keyed to fit the spaces of columns defined by the grid (these files are available only for PhotoShop).
Test folder: Sample pages ready to test features and possibilities of the BluePrint. These examples are very interesting, since it is a very interesting way to see how to develop the structure of BluePrint pages.
To begin, the first thing we have to do is reference the BluePrint files required. We do this using the tag, determining the way in which the stylesheets are.
We will import these files into the tag:
Listing 1. Required Files BluePrint
<html> <head> <title>Estrutura BluePrint.</title> <link rel="stylesheet" href="blueprint/screen.css"> <link rel="stylesheet" href="blueprint/print.css"> <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css"><![endif]--> </head>
We note that the link that carries the IE.css file is within a policy to be executed only in versions of Internet Explorer.
Blueprint main container
Similar to other CSS frameworks such as 960 grid, Skeleton, the BluePrint also works on a main container. Let's see a quick example of a BluePrint container.
Listing 2. Main Container
<div class=”container”> Files placed on the site. </div>
To create the main container just create a div and use the container class, within that div container can create several other divs with other classes.
We can say that the most important part of this CSS framework is the grid. Using this grid can position elements on the page so precise and simple. BluePrint proposes a principal container 24 and a column width 950px, where each column has 30px width with a space between them 10px.
We have 24 columns to create our layout, the more we can unite the columns for larger spaces. Assuming we have only three columns, simply divide the 24 columns of three, so would give us three shares with eight columns each of these parts.
For we use the existing columns, we have the CSS classes that will span-1 to span-24. To determine how much of columns you want to use just use "span- and the number of columns you want to." Here are some examples.
span-1 (30px) span-2 (70px) span-3 (110px) span-4 (150px) span-5 (190px) span-6 (230px) span-7 (270px) span-8 (310px) … span-23 (910px) span-24 (950px)
To develop our layouts, we can determine the primary container and inside containers amusement span-x. We can generate alignments and to be creating more complexions layouts.
We can not forget that our main container has 24 columns, so each section of the layout can not exceed 24 columns. That is, to create the various parts of our layout, adding them they can not have more than 24 columns wide. For example, our structure divided into four parts so that each part has 6 columns having, as adding 6+6+6+6, have a total of 24 columns. Of course we can choose a size for each part, and need not be equal parts. We have so 4+10+4+6. What matters is not passing 24 column.
Let's now create an example structure where we have the following: a header, a left part, body, right side and footer.
Listing 3. Creating example structure
html> <head> <title> BluePrint structure.</title> <link rel="stylesheet" href="blueprint/screen.css"> <link rel="stylesheet" href="blueprint/print.css"> <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css"><![endif]--> </head> <body> <div class="container"> <div class="span-24 last"> <h1> Testing Blueprint </h1> </div> <div class="span-4 last"> <p> Left Side.</p> </div> <div class="span-10"> <p> Body...</p> </div> <div class="span-6 last"> Right side. </div> <div class="span-24 last"> <br> Footer... </div> </div> </body> </html>
As can be seen along with some classes is used the last class to determine the margin there will be zero. Notes on the above code:
- <Head>: added the CSS files required the BluePrint.
- <Body>: We create the main container, and within this main container put a header "Testing BluePrint" then put a left side, a body, a right side and end footer
We can see that only with this code we have and notice the divisions between spaces, but we must insert a content and see how it will look.
We note that so it's easier to define the partition we did in the previous code.
So we end this article made the show one more in the order of many CSS frameworks. We can see that all offer a wide range of styling options and tools that facilitate the development of websites. Now just test these frameworks and identify the one that fits our project in question.
I hope that the content provided here has been to the liking of all readers, I put myself available to answer questions and suggestions, tips for even new articles.
A hug to everyone.