CSS Guru advice needed
Flub-Dub (236 points) | Fri, 2007-05-11 10:59Hi
I know my CSS dose, but never did the styling and the design for a huge site.
Take a look at http://www.beachcamera.com
The content and structure of my project is very similar to it.
E-store with tons of products, modules, fields, printer friendly, etc.
What Im trying to accomplish:
* a good and solid base for a CSS layout that can grow to sustain a huge site
* easy to understand and structured CSS, so that 4-5 people can work on it and dont mess it up too bad
* a simple, basic, clean and accessible layout that has all the features and that can serve as a starting base for a site that potentially needs heavy graphics
im impressed by the use of CSS in the following sites:
http://www.sainsburys.co.uk (very nice and clean, but a bit too small for my scope)
http://www.bhphotovideo.com (highly appreciated e-store)
Although I read a lot of articles on redundancy vs. dependency, david shea, alistapart and more,
I would be greatful if you could share some from your experience in a project closer to this huge estore type of site. A more hands on approach, do's and donts, whatever you feel like saying.
--------------------------------------------------
always outnumbered, never outgunned
http://www.behance.net/mimimi
I'm not quite sure what you want to know, perhaps some more direct questions would be a good way to get started at least. Anyway, I'll take a shot and try and give you some pointers. I'm assuming you want advice on how to start building a site using a CSS layout.
1. Think Like Lego
Once you've got your basic layout, whether it's on paper or in photoshop or wherever, the way to think about it is as if it were lego. Think of each part of the structure as a piece of lego, that fits together with each of the other pieces. Start at the top and work your way down.
2. Basic Shapes
Once you've figured out your blocks of lego, start building. Go through a few tutorials so you know how to make basic block shapes (squares and rectangles
) and how they are placed around a page. I learned almost everything from this site at BarelyFitz.com. It's a good starting point, but not fantastic.
3.Play Around
Once you've got the basic idea of how to build shapes and put them in your page, play around. I usually make a bunch of boxes of varying sizes with different background colours, and just play around and see what happens when I change the CSS values.
Change the HTML so box 1 is inside box 2, and then change the positioning from relative to absolute and see what happens.
Turn on a thick border, and see how the positioning changes when you turn it off. Change the border colours on each side and see where they join up in the corners.
Put some text in a box and then play with the margins and the padding and see what the difference is. See what happens when you put things inside and reduce the margins. Play with negative margins and padding as well.
Once you've played and played and played, you'll have an understanding of how moving basic blocks around and inside each other and such, you'll be a lot more comfortable with it and able to move on to more advanced things, like dealing with the ridiculous way internet explorer deals with CSS and styling list elements and such.
I'm not sure if that is what you want to know, and like I said, it'd be good if you could ask some more direct questions. I'm more than happy to answer them.
CSS seems like it's a hugely complex beast to master, and moving from tables based layout can be a bit daunting, but once you get the basics down, it all makes a lot more sense.
andrew harrison
http://andrew.harrison.org
:) thanx for the fast response, you're right, i probably should be more precise
i know CSS at medium level or so, i just never tackled a project this big.
i mostly did corporate presentation sites, while this is a huge ecommerce portal.
im interested in choices like:
- should i use different files for styles, like products.css, home.css or all in one file?
- do you recommend a certain methodology for naming the classes?
- what things could go wrong when having a page with tons of elements in it?
- what would be the best approach for this, the best foundation in order not to get myself lost between styles.
- im aiming to first create a simple css with basic layout but full functionality and only then build the design over that foundation, what are your thoughts on that?
all this questions are for the real life example of beachcamera.com
the site im gonna work on is very close to that, so you can be as specific as you can.
--------------------------------------------------
always outnumbered, never outgunned
--------------------------------------------------
always outnumbered, never outgunned
http://www.behance.net/mimimi
Basically, plan your hierarchy from largest display font down to smallest text font and you've got your fonts done.
Then, create a template design for pages and hopefully those are driven by a database of some sort which most likely will be driven by asp.net or php...
Then your site can grow as the product line grows.
Go here and then go to 'View this Page CSS': http://csszengarden.com/
Also, hopefully you're using the Firefox browser with the 'Web Developer' plug in downloaded. It lets you see Java, CSS and source code on any site you like. That's the best way to learn the nomenclature. #pageTitle and pageSubTitle are just two examples of text css nomenclature.
----
Natobasso
----
The Salon Design Tech