If you’re like me, like more of a developer than a designer, then you’re used to the process of starting a new project and don’t know what to do with your CSS. You know that your design will likely change as the project progresses, but you want to have a good looking design from the start. So you spent some time writing some CSS that works in Firefox and Safari, oh wait, don’t forget IE, right, right. Then you write some HTML that you think you’ll use, and work on getting all the whitespace to look right. Good! Finished! Now, three days later, the requirements for your project have changed and you find yourself redesigning the layout again. Now, even if you’re a rockstar designer who already has all this CSS stuff figured out, or if you’re not worried about how your layout will change over time because you’re working from a PSD template or something, that doesn’t mean that there aren’t any. that needs to be studied here. Blueprints can still give you some tools so you can spend your time innovating, not replicating.<\/p>\n\n\n\n
Blueprint Source File<\/p>\n\n\n\n
reset.css<\/p>\n\n\n\n
This file sets reasonable defaults in all browsers. I’m sure we’re all familiar with starting a new project, going to our main CSS file and adding some default styles to the body selector, like ‘margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; ‘ or something along those lines. This is what reset.css does, and more. This resets the default styles for spacing, tables, fonts, etc. So you can work from a clean slate.<\/p>\n\n\n\n
typography.css<\/p>\n\n\n\n
This file sets up some nice default typography. I won’t go into all the styles but I will say that this is my favorite part of the Blueprint because, to me, nothing is more disappointing than trying to lay a page and seeing some black Times New Roman text jammed into the top left corner of the page. Ugh. Typography.css Blueprint makes me never see it again. Typography.css also manages some really nice styles around font size, line height, standard table styles, etc.<\/p>\n\n\n\n
grid.css<\/p>\n\n\n\n
This file handles the layout portion of the blueprint grid. We’ll take a look at the classes it uses in a bit. One important thing to note with the grid, it defaults to a width of 950px, with 24 columns each having a width of 30px and a margin of 10px between the columns. This may sound narrow, but if this isn’t the layout you want, you can always use the Blueprint Grid CSS Generator to generate a custom grid layout. If this last paragraph really confused you, read on as we’ll be building the layout using a grid a bit. If you are not familiar with CSS grid layout and want a background, Raj’s<\/p>\n\n\n\n
ie.css<\/p>\n\n\n\n
Blueprint supports IE, so of course it needs it’s own custom stylesheet to take care of the little details that make IE so special \ud83d\ude42 The nice thing is that Blueprint takes care of this for you, so all its core styles will work in all major browsers (I think it does). even supports IE 5).<\/p>\n\n\n\n
print.css<\/p>\n\n\n\n
This file sets some default print styles, so the printed version of your site looks better than usual. The print.css file also has an option where you can fill in your domain name so that relative links are shown in brackets behind the text links in the printed version of your page. Without filling in this section, only the remote link will print correctly. Look at the bottom of the print.css src file, linked above.<\/p>\n\n\n\n
forms.css<\/p>\n\n\n\n
This file provides a nice looking standard form as well as classes for error notifications or even flash notifications if you’re using something like Rails. Since this is the only section I won’t go into in more detail, here are some of the default form styles to use:<\/p>\n\n\n\n
Does this mean I have to include six different stylesheets?<\/p>\n\n\n\n
No. Blueprint comes with three compressed stylesheets for your HTML pages, screen.css which contains 1-3#  from above, print.css, and ie.css. The reason I outlined the different parts of the framework above is because the framework is modular, each part working independently of the other. The nice thing about this is that if you decide that one aspect of the Blueprint, such as the grid layout, doesn’t suit your project, but you still want the benefits of reset.css and typography.css, you don’t need to use a grid but the other styles will still work. .<\/p>\n\n\n\n
Conclusion<\/p>\n\n\n\n
The best thing about Blueprint is that it is CSS only. It’s all CSS. So if you are interested in Blueprint, check the source and if you have knowledge of CSS you should be able to understand how it all works. Blueprint is also not a very large codebase, probably having less CSS than most of us are used to on a typical project.<\/p>\n\n\n\n
The need for digital IT is needed in daily activities, Bead IT Consultant is the right choice as your partner, visit our website by clicking this link:\u00a0www.beadgroup.com<\/a><\/p>\n\r\n