Blueprintcss using 950px container width. Divide by 24 column by default…
Let’s try step by step:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>Wysmedia - Blueprintcss tutorial </title> <link rel="stylesheet" href="./blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="./blueprint/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="./blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> <!-- Import fancy-type plugin for the sample page. --> <link rel="stylesheet" href="./blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> </head> <body> <div class="container showgrid"> </div> </body> </html> |
When you type <div class=”container showgrid”>, it will display grid that help you to design the page, just like rules in the adobe photoshop. You can turn it off by delete showgrid
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class='span-4'> <h2>Left Side </h2> <div class="box small" style='background-color:#ffccaa'> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta sollicitudin enim. Nulla vestibulum nunc sed metus. Fusce ac velit. Praesent eget mi a sapien imperdiet condimentum. </div> </div> <div class='span-14'> <h2>Middle </h2> <div class="box small" style='background-color:#aaccff'> Integer eu lacus ut enim accumsan lobortis. Aliquam lacinia cursus diam. Morbi velit. In non ante. Maecenas congue. Proin erat erat, accumsan quis, suscipit ac, malesuada quis, diam. Donec a arcu in nulla bibendum consectetuer. Suspendisse convallis sem eget diam. Vivamus libero erat, semper a, convallis vel, accumsan a, nisi. Cras pharetra. Donec interdum, urna ac sodales consequat, ligula metus dignissim nibh, nec tempor libero leo id mi. Maecenas commodo consectetuer nulla. Vivamus posuere nunc vel arcu. Vivamus eleifend accumsan mi. Quisque rutrum, lacus dignissim tincidunt sagittis, dolor augue convallis urna, tincidunt lobortis lorem lorem id urna. Integer libero arcu, blandit a, venenatis sed, ornare nec, dolor. Curabitur et libero a tellus pretium mattis. </div> </div> <div class='span-6 last'> <h2>Right Side </h2> <p>Donec pretium elementum arcu. Quisque euismod orci. Nunc augue enim, tristique vel, vulputate et, laoreet non, ligula. Curabitur tristique tempus quam. Fusce vel lacus nec dui faucibus dignissim. Pellentesque lorem augue, rutrum pharetra, dignissim vel, venenatis sit amet, diam. Phasellus mattis, tellus sit amet molestie pharetra, dolor ligula ultrices risus, vel tristique quam eros vitae elit. Cras enim. Mauris rutrum libero. Nunc lobortis molestie erat.</p> </div> <hr/> |
You will see the page divide by 3 column and each column has different size. the first one is 4 block, then 16 block and then the last one has 6 block. Notice the last block, I use last. I use it to make sure that it is the last block and the next block will be on the next row.