If you are not familiar with CSS grid layouts and want some background, Raj's If this last paragraph completely confused you, please read on as we will build a layout using a grid in a bit. This may sound constrictive, but if this is not the layout you want, you can always use a Blueprint Grid CSS Generator to generate a custom grid layout. One important thing to note with the grid, by default it uses a width of 950px, with 24 columns each having a width of 30px and a 10px margin between columns. We will have a look at the classes that it uses in a bit. This file handles the grid layout portion of blueprint. The typography.css also sets up some really nice styles around font sizes, line-heights, default styling of tables, etc. Blueprint's typography.css keeps me from ever seeing that again. I won't explain all of the styles but I will say that this is my favourite parts of Blueprint because, to me, there is nothing more discouraging than trying to lay out a page and seeing some black Times New Roman text jammed up into the top left corner of a page. This file sets up some nice default typography. It resets default styles for spacing, tables, fonts, etc. I'm sure we are all familiar with starting a new project, going to our main CSS file and adding a few default styles to the body selector, such as 'margin: 0 padding:0 font-family: Helvetica, Arial, sans-serif ' or something along those lines. This file sets sensible defaults across all browsers. Let's take a look at how Blueprint achieves this: It does this by providing sensible defaults across all browsers, nice-looking default typography, a grid framework, nice-looking forms, and a print stylesheet built with printers in mind. Blueprint provides a solid foundation to build your project on top of. Spend your time innovating, not replicating.Īnd I think that this is exactly what Blueprint accomplishes. Blueprint can still provide you with some tools so you can. Now, even if you are a rockstar designer who already has all this CSS stuff figured out, or if you aren't worried about how your layout will change over time because you are working from a PSD template or something, that doesn't mean that there is nothing to learn here. Great! Finished! Now, three days later, the requirements for your project have changed and you find yourself redesigning the layout again. Then you write some HTML that you think you will use, and work at getting all of the spacing to look right. So you spend some time writing some CSS that works in Firefox and Safari, oh wait, don't forget IE, right, right. You know that your design will likely change as the project goes on, but you want to have a nice looking design from the beginning. If you are like me, as in more of a developer than a designer, then you are familiar with the process of starting a new project and not knowing what to do with your CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |