Blueprint CSS is a framework designed to make web page layout easy–even for CSS newbies. Its strength is providing tools to build CSS columns that make the much frowned-upon practice of layouts with HTML tables unnecessary.
Create a basic layout
Before you start creating your first basic page layout with Blueprint, bear this fact in mind: Blueprint’s default number of columns per page is 24. All your column definitions should add to that number.
The layout we’ll use has a header and footer that spans the width of your page, but that you can configure to fit your needs.
Here’s the layout for our example:
Enter this markup in that document:
<html>
<head>
<link rel="stylesheet" href="../../blueprint/screen.css"
type="text/css" media="screen, projection" />
</head>
<body>
<div class="container">
<h1>put header here</h1>
<hr />
<div class="span-6">
Column1
<p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
</div>
<div class="span-12">
Column 2
<p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
</div>
<div class="span-6 last">
Column3
<p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
</div>
<hr />
<div>
Footer
</div>
</div><!-- main container class -->
</body>
</html>
Walk through the code
We link to the Blueprint CSS files in the page’s
. The key parts of the body start with the first div, which uses the “container” class. That div encloses the remaining divs in the page. We layout all our columns in the form of div elements inside that main div.The markup between that first div and the second is where your page header goes. Place the first column of the body in the second div element. This element is where you start defining column widths by using classnames in this form: “span-[n]“, where n is the number of Blueprint-defined columns you want the column to span.
Do the Span Math
Our layout diagram tells us that the first column is 6 Blueprint-columns wide, so our div’s class name will be “span-6″. Our second column is 12 Blueprint-columns wide, so the div for that column uses the class “span-12.”
Blueprint needs to know which column is our last. We give it that info by indicating, in our layout’s last column, the “last” classname as follows:
If you haven’t displayed your page in a browser yet, do so now and see how you like Blueprint’s style.
Example two: reconfiguring the columns
<body onload="inish();"> <div class="container"> <h1>put header here</h1> <hr /> <div class="span-6"> Column1 <p>ENTER A FEW <P> PARAGRAPHS OF SAMPLE TEXT HERE.</P> </div> <div class="span-6"> Column 2 </div> <div class="span-6"> Column 2 </div> <div class="span-6 last"> Column3 </div> <hr /> <div> Footer </div> </div><!-- main container class --> </body> </html>
Nested Columns
The div for the header is a no-brainer:
Column two needs to take up the remainder of the 24 columns, so its class is 24 minus 10: “span-14,” and tack on the “last” class because column two is last in its row. Columns 2.1 and 2.2 fit inside column two, so their column widths need to span only to column two’s width: 14. Their classes both contain “span-7,” with col2.2′s having the “last” added to it. The footer, which is the last div, spans 24 columns, so its class attribute is “span-24 last.” Our source also contains a JavaScript function, makeDummyText(), that creates some sample text for us. Using this utility not only saves you from entering filler text yourself, but also keeps your CSS markup nice and clear, so you can see your column structure clearly. The makeDummyText() function, as written, places all existing HTML markup first and adds the filler text after. If you want to place the filler text before the existing HTML, just switch this line: And replace it with the following: j.innerHTML = sSampleText + j.innerHTML; Boks: Visual Grid Editor for BlueprintThe markup, with a JavaScript tool to fill text
<html>
<head>
<link rel="stylesheet" href="../../blueprint/screen.css"
type="text/css" media="screen, projection" />
<script type="text/javascript">
//<![CDATA[
function makeDummyText (){
//put dummy paragraphs in each div of the document
var divs = document.getElementsByTagName("div");
var s = "";
var j;
var sSampleText = "<P>If you are just learning to \
pick out melodies and play them on a musical ";
sSampleText += "instrument, and *if those melodies are \
confined just to C major,* you will begin";
sSampleText += "playing melodies on the piano so \
quickly it will make your head spin. Do you know why? </P>";
sSampleText += sSampleText + sSampleText;
for (var i=0; i< divs.length; i++) {
//s += divs[i].innerHTML ;
j = divs[i];
j.innerHTML = j.innerHTML + sSampleText;
}
}//makedummytext
function inish() {
makeDummyText();
}//inish
//]]>
</script>
</head>
<body onload="inish();">
<div class="container">
<div class="span-24 last">
<p>Header</p>
</div>
<div class="span-10 showgrid">
<p>Col 1</p>
</div>
<div class="span-14 last showgrid">
<p>Col 2</p><!-- nested columns here -->
<div class="span-7 showgrid">
<p>Col 2.1</p>
</div>
<div class="span-7 last showgrid">
<p>Col 2.2</p>
</div>
<p>Auto-filled text will come here</p>
</div>
<div class="span-24 last">
<p>Footer</p>
</div>
</div>
</body>
</html>
References
Resources
How To Create Your Own Dual Monitor Setup
Recently I wrote a post for The Web Squeeze about my essential ‘Tools of The Trade’. One of my biggest recommendations in that article was for web designers to get an extra monitor and hook it up to their computers. The TWS editors have now very kindly asked me to come back and give you a more in depth look into the world of dual-screen setups, and how you can create your own!
Although still quite a rarity outside large corporate companies and graphic design studios, dual monitor set-ups have actually been around for quite some time. Support for up to three monitors has been standard in Apple machines since 1987 with the launch of the Macintosh II, but wasn’t made a default feature of Microsoft’s flagship operating system until Windows98.
As technology advances the prices of standard monitors have inevitably dropped, making adding a second monitor to your computer a more attractive prospect than ever before.
Benefits of A Dual Monitor Setup
If you’re still unsure as to why you would need a second monitor in your life, here are some great reasons for taking the leap:
- Have your reference material for writing an article or email open on one monitor, whilst doing your writing on the other. (I’m doing this right now)
- Have your financial information open on one monitor whilst creating a spreadsheet on the other.
- Have photoshop open on one monitor, and your reference material on the other.
- Have your main photoshop area open on one monitor, and all your layers and tools windows on the other
- Have two different sets of code open side by side to compare and contrast
- Run your text editor one monitor and easily access your FTP application on the other
- Do your daily work on one monitor, and have a live twitter or RSS stream running on the other
- Keep HighRise or BaseCamp open on your spare monitor to remind you of your to-do list for the day.
- If you’re feeling lazy, have a film playing on your spare monitor while you do your work on your primary one.
- Keep your IM’s, Email, and all other things on the spare monitor and out of the way of your main work space.
Essentially, the main benefit of having more screen space is to stop having to switch between windows constantly. For Windows users this means fewer clicks on the task bar, and for Mac users it means fewer trips to Expose.
Examples of Multiple Monitor Workstations
Chris Spooner
Elliot Jay Stocks
Wolfgang Bartelme
Chris Coyier
Me
Creating Your Own Dual Monitor Setup (Mac)
As mentioned previously, Macs have had support for additional monitors built in for some time now and as a result, setting it up couldn’t be easier!
Step One
First of all, you need to identify what sort of Mac you have. If you got your Mac before October 2008, then the chances are that it has a Mini-DVI port. If you got your Mac after October 2008, then it’s most likely to have a Mini-Display port.
The one not labeled in the above photograph is the Mini-DVI port
Step Two
Next, you need to identify what sort of ports your new monitor has, the two most common options are VGA, and DVI, with DVI being the newer/better one. It may also be useful to know that universal colour is white for DVI, and blue for VGA. This means that typically both plugs and sockets on monitors and cables will be these colours. Here’s what they look like:
Step Three
And now what we need is an adaptor to link the two types of inputs/outputs together! Luckily, Apple have already thought of this, and carry a whole range of said adaptors. UK link – US link
Old and new adaptor. From the left…
Mini DisplayPort to VGA Adapter /New
Apple Mini DVI to VGA Adapter /Old
Mini DisplayPort to DVI Adapter /New
Apple Mini-DVI to DVI Adapter /Old
Step Four
Once you’ve got all your cables and adaptors connected, don’t be surprised if everything just starts working all by itself right away! Macs have a tendency to do that. However if it doesn’t all start working by itself straight away, then we need to open up the system preferences panel, and click on “displays”.
Now you should have 1 preferences window pop up on each of your monitors, each one controlling the brightness and resolution of the monitor which it’s displayed on. On your primary monitor (the one that’s built into the Mac) you should see three tabs: Display, Arrangement, and Color. We want to take a look at the ‘Arrangement’ tab.
This is where you tell your Mac how your monitors are set up on your desk. Personally I have my spare monitor mounted on the wall above my laptop, so I dragged the extra display in the menu above the primary one. Once you have your monitors lined up in the right place on screen, you want to UN-check the box at the bottom that says “mirror displays”.
Step Five
Then, finally, move your mouse off the edge of the screen in the direction of your new monitor, and it should pop up on the new screen! Job done!
Closing notes:
On all Macs since early 2006, “spanning mode” is built in by default. Spanning mode means that your desktop spans across the two monitors, as opposed to “mirror” mode, where both monitors display the exact same thing (for presentations where the laptop faces you, and the screen faces the audience).
On older consumer model Macs (aka iBooks) spanning mode is disabled, but it IS built into the operating system. In order to use an additional monitor on an iBook you need to download a very small app called Span Doctor, which should enable everything that you need.
Creating Your Own Dual Monitor Setup (PC)
Ok, so you skipped the Mac section and came straight down here to the PC section eh? First of all, you should get a Mac – but you didn’t really come here to listen to me tell you that, did you?
As you would expect, setting up dual monitors for the PC is infinitely more complicated and involves many more variables, so pay close attention as we go along!
Let’s get started
Step One
The first thing that you need to understand is that whether or not you can run an additional screen depends on your graphics card. Your graphics card is what drives the video-output of your computer, and its power is directly related to how many monitors you can have. A more powerful graphics card can drive more pixels!
The simple way to tell if you can support multiple monitors is to check the back of you machine for VGA or DVI ports (pictured below). If you have 1 of each or 2 of either, then congratulations! You can skip down to Step 5, because your computer (probably a relatively new one) supports multiple monitors. It may also be useful to know that universal colour is white for DVI, and blue for VGA. This means that typically both plugs and sockets on monitors and cables will be these colours. Here’s what they look like:
Step Two
If you’ve only got 1 port, then we need to find out if your existing card is powerful enough to run 2 monitors with a splitter cable, so let’s find out what sort of graphics card you have. Follow these instructions:
- Click “Start.”
- On the “Start” menu, click “Run.”
- In the “Open” box, type “dxdiag” (without the quotation marks) , and then click “OK.”
- The DirectX Diagnostic Tool opens. Click the “Display” tab.
- On the “Display” tab, information about your graphics card is shown in the “Device” section. You can see the name of your card, as well as how much video memory it has.
Now that you know what graphics card you have, it’s time to get Googling. I can’t offer much support or advice here, as all graphics cards are different, but if you can’t find anything online then give the manufacturer a call and find out from someone directly if your card can run two monitors with a splitter cable.
If it can – fantastic, go and get yourself a splitter cable (pictured below) and skip down to Step 5, if not, keep reading!
Step Three
Unfortunately, I had hoped that you wouldn’t have had to keep reading this far. There’s good new and there’s bad news. The bad news is that it’s going to cost you a little more to get your PC to work with two monitors. The good news is that the parts you need to buy will improve your whole computer.
So, your graphics card can’t handle two monitors – so now we need to get you a new one! You can google something called a “Matrox DualHead2Go” which is an external graphics card that’s pretty much plug and play, but the price really doesn’t make it an attractive option compared to the alternative. Of course if you have a laptop, then this is your only option, so skip down to Step 5! If you have a desktop, then keep reading.
Step Four
The best thing to do here is jump on eBay, because they have a lot of decent chips at decent prices. Now I should stress at this point that installing a new graphics card in your computer is EASY. I’m not one of those people that builds computers from scratch on the weekend, so if I can do it, then you can too.
Take the case off your computer and have a look inside. Incidentally, this is a great time to clean out the inevitably large quantity of dust that you’ll find inside. Dust makes your computer overheat, and overheating makes your computer run slower. So try so remove as much dust as possible with a vacuum cleaner (make sure it has a plastic tip, not metal).
It’s important to note here that you shouldn’t go touching stuff inside the PC, you only need your eyes for this step. What you want to do is establish what sort of expansion ports are available on your motherboard. There are two different types of ports that will take a new graphics card, but for the sake of not turning this article into a novel, we’ll just stick to the newer and more common one, which is the PCI Express 2.0 slot. (also known as a PCI-E slot)
On ebay, you want to look for a PCI Express graphics card, one that has 2 monitor sockets (preferably DVI). It should look something like this:
Note that the metal panel with the plugs hangs out the back of the computer, so keeping this orientation in mind, see if you have a port inside your computer which is the shape of that chip. If you do – then buy the graphics card, and put it in! Unless you suddenly want to do a whole lot of gaming, it doesn’t really matter what graphics card you get, as long as it has 2 outputs. Look for NVidia and ATI as notable brands, and look to spend around £35 ($60).
Here’s short instructional video on how to do the installation, where you’ll see both the graphics card and the slot on the computer, and how they work together.
httpv://www.youtube.com/watch?v=5ILrq7lMe-0
Step Five
Now that you know you’ve got a working graphics card, you just need to hook up the monitors to it. You might need some DVI to VGA adaptors for this if the types of plugs are different (remember DVI are usually white, VGA are usually blue), but assuming that you get those off ebay too then you should be good to go.
Step Six
Now right-click on your Windows desktop and click on ‘properties’ then ‘settings’. You should be able to see and adjust both of your monitors from here, as well as setting the position (where the monitors are located on your desk). Click on the second monitor and then check the box that says “Extend my Windows desktop onto this monitor.”
Once that’s done, move the mouse off the edge of your primary monitor and it should pop up on the new one!
Further Reading
How to Connect Multiple Monitors to Your Mac
Nice little tutorial that further outlines how to connect another monitor to your Mac
How to Set Up Multiple Monitors On a PC
Another tutorial for setting up multiple monitors on your PC
The Workstations of Popular Websites
Fantastic collection of multiple-monitor-workstations in use by web designers
Multiple Monitor Productivity: Fact or Fiction?
An article examining and debating the affects of multiple monitors on productivity
Multi-Display Payback Calculator
Neat little calculator to figure out how long it will take for your new monitor to pay for itself!
Stop Image Hotlinking with .htaccess
Firstly, what exactly is image hotlinking? Well, say you are browsing the web and come across an image that you particularly like the look of. You then decide that you would quite like this image on your site. Instead of saving the image and uploading it to your own server, you place a link to their image on their site. For example,
<img src="/wp-content/uploads/2009/03/strawberry.jpg" />
If you decided to place The Web Squeeze’s Strawberry on your site, not only would it be a blatant image theft, but you would also be stealing their bandwidth as when their browser requests the image file, it is not from your server, it is from The Web Squeeze’s.
This is why image hotlinking is becoming a major issue for website owners today. People finding images on Google simply place a link to that image on their website, costing you bandwidth, and in the long run, money!
So what can we do to stop this? Well if you came across a site using your image, then you could rename your image, causing them to have a broken link or an alternate image displayed on their site for example. However, there are several obvious drawbacks to this method, you would have to trawl through your server logs looking for hotlinking sites, then you would have to go to the effort of renaming your image, updating all your webpages, uploading a new image … not a good use of your time.
Luckily there is an extremely efficient and easy way to prevent against hotlinking, using the Apache configuration file, .htaccess. Using your .htaccess file allows you to control things such as:
- What sites to block/allow
- Whether to allow/deny blank referrers
- Display custom images to hotlinking sites
- What file extensions to protect against hotlinking
Step by Step Guide
Adding in comments
#Stop Image Hotlinking
Any good programmer will tell you that comments are essential, regardless of the language you are writing in. When you begin to have a few different rules in your .htaccess file, comments help avoid confusion by allowing you to clearly see what each bit of code does.
Turn on the Rewrite Engine
RewriteEngine on
The code in this tutorial uses the Apache module mod_rewrite, we therefore need to tell the server to interpret this as such. It is similar to writing PHP, if you do not include the PHP tags the server will not know what to do with your code, the same principal applies here. This only needs to be declared once in your .htaccess file.
Allowing your domain(s)
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain2.com [NC]
You now need to state which sites are allowed to access your files, and obviously your site will be first on the list. There is no limit to the amount of sites that you can allow access to your files, for each additional domain simply add another line of code to the .htaccess file and amend as necessary.
Allow blank referrers?
RewriteCond %{HTTP_REFERER} !^$
Some users browse the web using things such as firewall or proxys, and therefore do not supply any referrer information. It is up to you whether to decide to block blank referrers. If you wish to then just delete this line from your .htaccess file.
Allow search engines?
RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
RewriteCond %{HTTP_REFERER} !msn. [NC]
RewriteCond %{HTTP_REFERER} !yahoo. [NC]
Search engines such as Google can link to your images in their search results, often providing a useful sources of traffic. If you are a Photographer for example, then it might be a good idea to allow this as people can follow the image to see more of your work. However the choice is entirely your own, if you do not wish to allow this then simply delete these lines of code form your .htaccess file.
Allow an image to be hotlinked
RewriteCond %{REQUEST_URI} !^hotlinker.gif$
If you are planning on getting revenge on people hotlinking your images, then you will need to allow this image to be linked to. The above line of code makes sure that the image that you choose to display them actually gets displayed.
Display a custom image
RewriteRule .(jpe?g|png|gif)$ hotlinker.gif [NC,R,L]
The final piece of code. This tells the server that if a request is made for a .jpg, .jpeg, .png or .gif file that is not from one of the named exceptions, then they get displayed the hotlinker.gif image. If you wish to add more file extensions then you can just adapt the code for your use.
Let’s see an example of how this technique can be used. If someone decides to link to The Web Squeeze’s strawberry logo,
then in the .htaccess file you could have the alternate squashed strawberry show. Alternately, one of the advertising banners such as this could be shown, providing your site with some free exposure.
If you are feeling particularly lazy then all the .htaccess code for stopping image hotlinking is provided below.
#Stop Image Hotlinking
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain2.com [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
RewriteCond %{HTTP_REFERER} !msn. [NC]
RewriteCond %{HTTP_REFERER} !yahoo. [NC]
RewriteCond %{REQUEST_URI} !^hotlinker.gif$
RewriteRule .(jpe?g|png|gif)$ hotlinker.gif [NC,R,L]
Some Important Things
Before uploading your .htaccess file to your server make sure that there is not one there already! Applications such as WordPress use their own .htaccess file when installed, if this is the case then download the existing .htaccess file, add your extra code and then upload it back to the server.
In my opinion the most important thing to do when editing .htaccess file is to BACK UP. Make sure that you have a copy of the original .htaccess file in case everything goes ‘pear-shape’.
This method is not limited to just image files. You can add file extension such as .exe or .zip to protect against people stealing any other content off your site. Then you can either display them the alternate image, or have them download a .zip folder full of images promoting your site, the possibilities are endless.
Lastly, it is polite to ask your hosting provider if they allow .htaccess files to be used on their server, just in case they do not.
I hope this article has been helpful and has cleared up some of the confusion surrounding stopping image hotlinking with .htaccess.
