Actually, "Presheet" is just a single .css-file containing presets, as the name PREsheet says. To be more precise, first several standard browser settings are reset and then new basic styles are allocated. Furthermore there are lots of predefined classes and IDs that will help you in your task of creating a new webdesign. I assume that you'll never again have to struggle with complex div-boxes and floating, as there are simple but powerful classes implemented that will work out properly for you. The Presheet file might be small and simple, but it implements a very nice and handy system. I am not sure how far webdevelopers do like the "system", but I am sure that it is an effective way to create xhtml strict websites in no time in a very comfortable way. And with xhtml strict I really do mean xhtml strict!
The so called "system" - what does it look like?
To make it clear let's just start with a simple example:
If you "execute" this code, the result might look the following:
You see, generating a div-box layout with two columns is extremely easy. Now I am going to explain to you how it actually works:
First of all we're styling the div-tag with the class "box", which means that the div is meant to be displayed as a block-element with height and width, and actually a width of 100% (as all elements featuring "display: block" do). This class is not really necessary, since divs in general are displayed as blocks within Presheet, but I suggest always to use the class "box" at least as a keyword. The next class is "float_left" which will put the div on the left side. Then, with the class "twocolumns" we are assigning a width of 50% to those div-tags. And at last, just to mark the difference, I put a "bg_blue" or "bg_green" which will style the specific element with the specific color. To terminate the floating, I put div-tags with the class "clear" at the end (never forget!). Easy, isn't it?!
Why does Presheet not use the so called "clearfix"?
In fact, the clearfix-method is implemented and ready to use. But I suggest you better use the clear-class. It might be more annoying to create an additional div-box to clear the floats, and it might not be the nicest way, but: It will work. And as I experienced, the clearfix-method often does not really seem to work out for the people.
First step: Installation
Before you can start you first have to download a version of Presheet. To do so, choose one release at the following address: http://www.bumuckl.com/my-projects/webapplications/presheet-css-library - unpack the compressed file and copy the previous extracted file "presheet.css" to a directory of your choice. There, we're going to build a new project based on the presheet.css
Now that you are inside your desired directory, create a new empty HTML-file, call it whatever you want to, but I think "index.html" is a good name, and create a new file called "style.css". Open up the new "index.html" with an editor application (on Windows, I recommend Notepadd++) and paste the following code:
Save the file and open it up inside a webbrowser. You will see a plain white site.
Second step: Usage
Now it's time to make use of the Presheet CSS library. We're now going to create a "twocolumns div layout", first a layout with a predefined width from presheet and then another layout with different widths using selfmade stuff stored in your "style.css". Edit your "index.html" so thath it looks like the following:
Save the file and refresh your webbrowser. You will see something similar to this, but centered within your browserwindow:
So what did we actually do? It is pretty easy. We just created a div-container with the ID "centered" which is already defined in Presheet and generates a div-container of 1024px width that is centered. Inside this div-container, we created the twocolumns div-boxes with the help of predefined Presheet-classes and cleared the float at last, similar to the example at the beginning. To round everything up we'll now make use of a custom stylesheet that will inherit from presheet and show you the way of intelligent styling.
Third step: Custom Styling
Of course you could just edit the presheet.css file, but that is actually not the way it ismeant to be done. You can do it a more comfortable way by just using the style.css file we created recently. So, just open up the file "style.css" and add the following:
Save the file and open up "index.html" one more time. Edit the file, so that it looks like this:
Also save the file and refresh the page in your browser. You should see a result similar to this:
That's it! You see, it is very easy. You can extend the style.css in every possible way. For example you can create new classes for controlling margin and padding, or you can just redefine the classes used in presheet.css and overwrite their values. But I suggest to always add custom classes to your tags that contain your custom styling. And now it's up to you! Have fun!