An Overview of Elements.
Elements is a CSS Framework that was developed by Ben Henschel. It lets you write CSS easier, faster, more efficient, and allows you to organize all of your project files. There are many files and folders that make up Elements, lets take a closer look at theses. Select a Folder or File for more information on it.
elements_v2
This is the main project folder that houses all of the folders and files for your project.
Top
clientFiles
When you are working with a client you are bound to get some files from them. It might be a contract, scope of work, timelines, or just some notes. All of those files can go in here.
Top
concepts
Every project starts with a concept (or many many concepts).
Top
copy
Either you or your client is going to write the copy for the site. Which ever is the case these documents can be stored here.
Top
css
This is where all of the CSS goes.
Top
externalLinks.css
This file will probably be the most useful. It is a great list that gives your external links little external link icons. I took it one step further and gave links to email, PDFs, and word documents etc. little icons too. This is very important from a usablity standpoint. I can't tell you how many times I have clicked on a contact me link thinking it would take me to a page only to find Outlook opens up (which I don't use). PDFs are the same way, I click on a link thinking it will take me to a page only to find out that it's a PDF (a very BIG one) which basically crashes my computer. Now your users will have a heads up, they will now know what they are clicking on. Think you are going to have to give each one of your external links a class? Think again, this file uses CSS to automagicly find your links that have http://, or mailto: infront of them, or find links that have .pdf or .doc at the end of them. Yeah I know it's cool.
Top
global.css
This is your main CSS file, it's where your CSS goes. It has a set of predefined classes as well as your basic structure to get you started.
Top
lightbox.css
The CSS for lightbox is in this file, you shouldn't edit this file.
Top
reset.css
Does pretty much what you would expect it to, resets everything. This mass reset sets margin, padding, border, outline, and many other things to zero. This way Firefox, IE and all the other browsers will be some what on the same page. I would just like to thank Eric for this great reset.
Top
images
A folder for all of your images...cause what's a site with out images?
Top
elementsImages
This folder has all of the icons used for your sweet external links.
Top
lightbox
Here is all of the images for the lightbox.
Top
nav
I also threw in a folder for your nav images, because for some reason I like to put them in their own folder. Why? I don't really know.
Top
inc
Place for you PHP includes or PHP scripts.
Top
js
For all of your javascript needs. Plus this is where the JS for lightbox is kept.
Top
rawPNG
Pure raw power! I use PNGs for my sites which is awesome except the files are big. Luckily PNGs can be compressed with out any quality loss. However when they are compressed you lose all of the layers and your ablity to edit the file. So save your uncompressed PNGs in this folder and then save your compressed ones in the images folder.
Top
index.html
All of the head information and a basic foundation to get you started. Has your usual elements, header, main content, footer all coded in.
Top
