40 Comments
- armbar, on 10/12/2007, -2/+19This is far from being an actual, full-fledged style guide how-to. A page showing what styles look like is not the same thing.
A style guide defines how, where and how often elements can be used, and which color scheme will be used, and how typography will influence the page. - kodek, on 10/12/2007, -3/+17Great advice from someone who's using one of the default wordpress themes.
- porkstacker, on 10/12/2007, -0/+8For those who like to peruse through seemingly endless lists of links for excellent CSS related resources, feel free to spend some time at Vitaly Friedman's excellent compilation of web design links:
http://www.alvit.de/handbook/
May as well be the online book of design inspiration. - porkstacker, on 10/12/2007, -0/+8Further required reading:
http://www.cssmastery.com - a must-have book
http://www.cameronmoll.com
http://www.zeldman.com - Zeldman is THE man
http://www.mikeindustries.com
http://www.456bereastreet.com
http://www.molly.com
http://www.csszengarden.com (be sure to peruse through all stylesheets)
http://www.dustindiaz.com - just because he is a friend of mine. - maximinus, on 10/12/2007, -0/+7Burry, which is like bury, but with more "argh!" for when you're hiding the bounty you've pludered whilst pirating?
- BluParadox, on 10/12/2007, -3/+9Great advice for anyone who works on a lot of sites. Documentation quickly becomes absolutely vital.
- porkstacker, on 10/12/2007, -3/+8Not until you learn the correct spelling of the word "bury." I actually am going to digg you UP!!!! Muaahahhahahah!!!
- Switch22, on 10/12/2007, -4/+9This is not a very good guide, but it will probably make frontpage anyway.
- sgtpinky, on 10/12/2007, -1/+5Pludered? Oh, the irony kills me... *giggle*
- porkstacker, on 10/12/2007, -0/+4Arrrgh, I meant "inherited". I misspelled it. I apologise.
- dotdan, on 10/12/2007, -2/+6It's an example.
- Mike.ohara, on 10/12/2007, -0/+4*sigh* by Frontend the article means the visual display of the site in question. they dont mean the program being used to code the site.
- jpyun, on 10/12/2007, -1/+5Rather than a guide it's more of a "this is what you should do, figure out yourself how to do it" thing. And it's already front page now. -_-
- ZephyrWest, on 10/12/2007, -0/+3Excellent tip. I'll have to keep this in mind. I find myself losing track of this kind of stuff all the time.
- cyberfelon, on 10/12/2007, -2/+5Why create a strongtext class when there is a strong tag? Classes should be a last resort.
- porkstacker, on 10/12/2007, -1/+4Inhereted classes, my friend... inhereted classes. It is the way of the walk.
- cyberfelon, on 10/12/2007, -0/+2Exactly right. I'm currently creating a style guide at work, and I can tell you that it's all too easy to contract divitis and have a style sheet with dozens of different classes. By properly utilizing plenty of standard tags with inherited classes, the number of classes required can drop significantly.
- dotdan, on 10/12/2007, -2/+4This seems pretty pointless. Unless you're making some massive over-the-top ridiculously large project, you should be able to figure out what a class/id will look like just by skimming the contents.
.strongtext {
color: #500;
font: bold 10pt Verdana,Arial,sans-serif;
letter-spacing: 10px;
}
It isn't that cryptic.. - dxterra, on 10/12/2007, -3/+5I don't think it is a guide at all. Looks to me to be just an HTML page with examples of different elements.
No mention of context or form.
I'm with armbar on this one not being an actual style guide. - porkstacker, on 10/12/2007, -0/+2Last design "tipset" of the evening (and then I am off to bed -- no, really -- I promise):
Code your content first. Don't stylise anything. Make it appear as plain text, with paragraphs enclosed in "p", "h1 - h6", "ul", "ol", "li", etc. (all within the > and < tags-digg won't parse these properly). After you have all of your seemingly static content in place, THEN it is time to start gradually stylising the individual selectors, with an external stylesheet (inline stylesheets only complicate things).
"p:firstletter" can be fun to play around with, if you understand the right way to include IE6 hacks for predictable cross-browser results. "xxxx a:hover" are fun to dick around with too.
Once you are done piddling around with the basics, then experiment with inherited classes, and observe. Seriously, tinkering with this stuff is the fun part!
OK, I am done. - oerdec, on 10/12/2007, -0/+2I know it´s no style guide but I dugg it because I´m often working in a similar way. I start with a XHTML document containing all necessary or important elements. After that I add my CSS. I´m a developer and no designer -- so I have enough time to test and complete my style definitions during the development phase.
That works on small projects... - Mike89, on 10/12/2007, -0/+2ketsugi:
well his name is "diggthisdown" so I dont see what else he'd do ;) - imack, on 10/12/2007, -0/+2My first thought was that this was gonna be another lame noob css blog-post, and even though it's not really a "How to..." it's a good idea for bigger projects. Yes, I can read css just fine, but not everyone involved can, so a visual overview is a good idea!
- Okkido, on 10/12/2007, -0/+2It's pretty stupid to name the class after how it's suppose to look. A few years later when ten different people have been involved and changed around the strongtext will be italic, the .red will be green, the .green will be blue and so on.
(I know dotdan, just an example, this is just an reminder for other people) - monkeyforest, on 10/12/2007, -0/+2This looks like a really useful and comprehensive resource. Thanks for the link.
- SteaminTmann, on 10/12/2007, -1/+2I find that my css becomes more complex than it would make sense to do that (i.e. a class of heading within a div with a particular id) at that point it seems like a waste of time. The best method is probably to use class and ID names which properly describe the elements you are working with.
- porkstacker, on 10/12/2007, -0/+1Although it is rough around the edges, it does serve as a primer for those wishing to learn the proper approach to stylising their tableless HTML 4.01 - XHTML 1.0/1.1 loose/strict markup in a very logical fashion.
Oh, and I agree that the author of the guide ought to proofread (and then edit) and add some much needed punctuation throughout. - smithco, on 10/12/2007, -0/+1He has the right word. Here's the relevant entry from the OED:
burry, a.2
Characterized by a burr or uvular trill.
1866 Chamb. Jrnl. 793 Their language was..so extra burry as to be nearly unintelligible. - oslointhesummer, on 10/12/2007, -1/+2The title is misleading, but I'll digg it just for the fact that I hadn't thought of doing that.
- SteaminTmann, on 10/12/2007, -0/+1"Code your content first"
Alot of the time, this isnt feasable, at least in the company I do web dev for. It could take *weeks* to get content after a site's homepage, and ancillary pages are templated and ready to go. - porkstacker, on 10/12/2007, -0/+1"Alot of the time, this isnt feasable, at least in the company I do web dev for. It could take *weeks* to get content after a site's homepage, and ancillary pages are templated and ready to go."
That's what "greeking" is for: http://www.granneman.com/webdev/coding/greeking/ - leoken, on 10/12/2007, -0/+1excellent
- shyamsundar, on 10/12/2007, -1/+1A great timesaver. And why din't I think of this before ??
- shain4, on 10/12/2007, -0/+0This feature comes as default in CSS TopStyle Coder.
- ketsugi, on 10/12/2007, -2/+1Block this guy; he's been posting exactly the same thing on various other pages.
- porkstacker, on 10/12/2007, -2/+1Let me guess... you know nothing about the virtues of promoting the adoption of accessible and/or standards-based web design for the "new millennia"??? Come on now, the submitter thought it might be a good idea to spread the word on how to go about weaning oneself off of cookie-cutter run-of-the-mill wordpress CSS templates that everyone else is (ab)using, and instead try their own hand at implementing an inherited class or two.
- dolemite5005, on 10/12/2007, -3/+2How does horrible ***** like this make the front page?
- asics, on 10/12/2007, -1/+0It can save a lot of time.
http://www.asicsshoes.us/ - inactive, on 10/12/2007, -12/+3Great advide for Dreamweaver Warriors.
HTML Frontends are lame.


What is Digg?
Browsing Digg on your phone just got easier with our enhancements to the