Hello all, I'm new to webdesign and find CSS to be quite difficult, especially with getting it to work across browsers. I came across YAML (http://www.yaml.de/en/) and it seems to do a pretty good job.. It would be great if I could take as much of the CSS out of webdesign as possible, although I have a feeling it's not that easy. Anyone have any other recommendations for good CSS frameworks? Simpler the better =)
Recommend one? No, but I can give you some to check out. I'm leaning toward blueprintcss. Mollio is kinda out of date. http://code.google.com/p/blueprintcss/ http://www.mollio.org/
Thank you for your replies, it's very funny that you should mention blueprint, it was recommended to me by a good web developer friend of mine a few months ago. I come from a desktop programming background so that one seems to hit closest to home with me. I currently use YAML and find that it's good, however overly-complex to the point that I'm afraid to tweak it. Do you both use blueprint? Any downsides you've come across? Do you have any public websites that use it that you can provide links for so I can check them out? Do you think this is the end-all CSS framework? From a desktop programming end, this is a very old-school, common and sure-fire layout that gets the job done with minimum hassle (mainly for fixed-width sites I would say).
I don't use any CSS framework, yet. Odd that you post this roughly the same time I was looking over blueprint and mollio. I was leaning toward testing blueprint css since it has a MIT license (and it was the only apparently current framework I found with a usable license). I kept up the research and located a few more on google code. http://code.google.com/p/css-boilerplate/ http://code.google.com/p/logicss/ http://code.google.com/p/cssbase/ I will scope these over the next couple of days and see which suits my current project best. I do believe these are easier to modify over YAML. Just as a side note, blueprint was used in a simple PHP framework I located. Guess that's at least one recommendation for it.
Hi shallowink, I just converted my website to use blueprint css, I think it's a fantastic framework. YAML I found was very convoluted and finicky. So far after an hour with blueprint I am thoroughly impressed. Let me know if you find anything comparable or if you had a chance to compare them.
The problem with Blueprint is that a lot of the style rules are repeated for absolutley no reason. Seriously, half the code in that thing shouldn't even be there to begin with. It's also dependent on the myth that 1em = 16px, which just simply doesn't hold water, especially on "large fonts" (120 .dpi on Windows, or 100 .dpi on Linux). Then toss in the fact that IE and Opera actually obey the system metric, and well I'm sure you can see where I'm going here...
Good CSS framework is an oxymoron. They lead to fat bloated sites with poorly thought out layouts shoehorning broken or bad CSS into doing what you want - at which point just write it properly in the first damned place. YAML, BluePrint, YUI - all total crap that has no place being used on a professional quality website. The closest thing I'd use to a CSS framework is this: * { margin:0; padding:0; } img { border:0; } body { font:normal 85%/140% arial,helvetica,sans-serif; } Code (markup): Much more than that is a waste of time, effort and bandwidth.... MAYBE replace the universal reset with targeted if you REALLY need to use INPUT[submit] or INPUT[button] - the only two elements that give headaches with the reset... at which point I just use INPUT[image]
Eh, I'd slap display: block; on the image rule just to be on the safe side, as well as put border: 0; and display: inline; on the FIELDSET element... Then again, I know how you feel about form controls...
Fieldset's are a pain in the ass cross browser - so don't use fieldsets. ... and since images in my code tend to be content, they end up inline more than they do block - and if they aren't inline, they're float (in which case they end up block ANYWAYS) In fact, I rarely if ever have need of images being display:block... the only time I can think of is centering really large images - which I don't do.
Well, you see, I care about this thing called ACCESSIBILITY, especially for people using assistive devices. I may kill the styling of form controls with CSS and have DIVs or SPANs present to fill in for them on the screen, but the underlying controls are there for those who need them.
Obviously you two are pretty good with CSS, I just started web development a few months ago and I'm absolutely lost when it comes to CSS. I can get things to behave with tables, but for the pure CSS approach I'm afraid at my stage it would bog me down to the point that I wouldn't be able to put up any websites at all. My first approach was using a free template from the open web designs website. After launching my website using that, I found it quite difficult to maintain considering I was new to CSS and there was obviously a lot of boilerplate code. I next switched to YAML which gave the developer a bit more control and allowed me to learn a little bit of CSS. Now that I have switched to Blueprint, I find that I at least know what's going on with my website and I'm a lot less hesitant to make changes. I'm not particularly too crazy about learning about cross-browser differences, at least I can put something up in Blueprint and if it needs to go further then I'd most likely get a CSS expert to go from there. But I don't think blueprint should be discounted completely. Although I have read that it is going in the wrong direction in terms of semantics.
Well chriskirk, let's use that golfcoursehunter as an example of problems with templates and things like blueprint. (I'm not trying to pick on you - I'm trying to illustrate a point) Appearance ============================ the layout is broken in large fonts/120dpi in all browsers that pay attention to system metrics (IE/Opera), column margins look uneven, and your space reserved for advertising looks too wide leaving a huge (ugly) white-space to it's right. Code ============================ Transitional doctype on a 'new' site, IE7 conditional for no good reason (that almost NEVER needs to be done, especially for such a simple layout), inlined presentation, pointless metadata, clearing DIV's, inline level element wrapping a block level one (that's invalid markup BTW) - and 27 validation errors. Yeah, you're going to 'have problems' working cross browser. "not particularly crazy" about learning differences in this case could stem from trying to work with invalid markup. The funny thing is, what's giving you (and most developers who work with templates) problems is overthinking your markup. I'd say about... 1.5k of that is just plain bloat that serves no purpose. You've got stuff nested that could be styled directly, you're using that stupid clearfix nonsense, the classnames cryptic at best, etc, etc, etc. It's not ALL bad though - you've got decent (but not perfect) use of your header tags, and the copy itself isn't riddled with bad markup - just the code AROUND the content text is where the issues lie. Seriously, the HTML for that page doesn't need to be more than this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="robots" content="index,follow" /> <meta content=" Golf courses, golf clubs, golf united states, golf vacations, golf resorts, golf forums " name="keywords" /> <meta content=" GolfCourseHunter.com is the place to find information on golf courses in the United States, Canada and world-wide " name="description" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title> Home - GolfCourseHunter.com </title> </head><body> <!-- empty spans below are image replacements, do not remove --> <div id="container"> <h1> Golf Course Hunter<br /> <em>Your #1 Golfing Resource</em> </h1> <ul id="topMenu"> <li class="skip"><a href="#navigation">Skip to Navigation</a></li> <li class="skip"><a href="#content">Skip to Content</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="siteMap.html">Site map</a></li> </ul> <div id="topAdvert"> <script type="text/javascript"><!-- google_ad_client = "pub-3057412834810692"; //468x60, created 11/6/07 google_ad_slot = "9323739972"; google_ad_width = 468; google_ad_height = 60; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> <!-- #topAdvert --></div> <ul id="mainMenu"> <li><a href="/">Home</a></li> <li><a href="golf-courses/regions.html">Golf Course Directory</a></li> <li><a href="/forum">Golf Course Hunter Forum</a></li> <li><a href="links.html">Links</a></li> </ul> <div id="contentWrapper"><div id="content"> <h2>Find the best golf courses in your area or around the world!</h2> <div class="wideSection"> <h3>Welcome to Golf Course Hunter!</h3> <p> Golf Course Hunter is a new web site launched for the golf community to help them with their golf game. We are constantly striving to deliver new content and new features to our valued visitors and members. </p> <div id="_ytplayer_vjVQa1PpcFNkinv_En548rgpTUtM_sgtc3u2uXr911A="> <a href='http://www.youtube.com/browse'> Watch the latest videos on YouTube.com </a> </div> <script type="text/javascript" src="http://www.youtube.com/cp/vjVQa1PpcFNkinv_En548rgpTUtM_sgtc3u2uXr911A=" ></script> <!-- .wideSection --></div> <div class="narrowSection"> <h3>Striving to be #1 for golf!</h3> <p> Please visit the Golf Courses section of this site for a fantastic new way to search for golf courses world-wide! If you have updated information on any of the courses listed or even if you know of a course that you feel should be listed but isn't, please send us an email at courses@golfcoursehunter.com </p> <!-- .narrowSection --></div> <div class="narrowSection"> <h3>Over 15,000 golf courses</h3> <p> We are pleased to announce that we have now surpassed the 15,000 mark for number of courses we are listing! </p> <!-- .narrowSection --></div> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> <!-- SiteSearch Google --> <form method="get" action="http://www.google.com/custom" id="sideGoogle"> <div> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google" /> </a><br/> <input type="hidden" name="domains" value="www.golfcoursehunter.com" /> <input type="text" id="q" size="26" maxlength="255" value="" /> <input type="submit" id="sa" value="Search" id="sbb" /> <label for="ss0"> <input type="radio" name="sitesearch" value="" checked="checked" id="ss0" /> Web </label> <label for="ss1"> <input type="radio" name="sitesearch" value="www.golfcoursehunter.com" id="ss1" /> Golf Course Hunter </label> <input type="hidden" name="client" value="pub-3057412834810692" /> <input type="hidden" name="forid" value="1" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="hidden" name="oe" value="ISO-8859-1" /> <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" /> <input type="hidden" name="hl" value="en" /> </div> </form> <!-- SiteSearch Google --> <div id="destinations"> <h2>Golf Course Destinations</h2> <ul> <li> <a href="golf-courses/regions/North+America/"> North America </a> <ul> <li> <a href="golf-courses/regions/North+America/United+States/"> <img src="/img/flags/USD.png" alt="US Flag" />United States </a> </li><li> <img src="/img/flags/CAD.png" alt="Canadian Flag" />Canada </li> </ul> </li> </ul> <!-- #destinations --></div> <!-- #sideBar" --></div> <div id="adBar"> <script type="text/javascript"><!-- google_ad_client = "pub-3057412834810692"; google_ad_slot = "8383168502"; google_ad_width = 120; google_ad_height = 600; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> <!-- #adBar --></div> <div id="footer"> Copyright © 2007 GolfCourseHunter.com | All Rights Reserved <!-- #footer --></div> <!-- #container --></div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript" ></script> <script type="text/javascript"> _uacct = "UA-410952-6"; urchinTracker(); </script> </body></html> Code (markup): Which is 1.5k smaller despite having comments on all the closings. Everything else on that page should be in the CSS - and remarkably simple CSS at that. #container gets the width, centering and background, the H1 gets flat formatted, #topMenu gets a negative margin to ride it up next to the H1 (avoiding the headaches of a float), likewise on the google ad (which I'd flush right because it looks stupid centered like that) #contentWrapper/#content/#sideBar/#adBar would be a standard 3 column negative margin float, much akin to my baseline template for that (which is pretty much what I dropped your page into) http://battletech.hopto.org/html_tutorials/baselines/threeColumnFixedMaxHeight/ Then it's just cleaning up the train-wreck that is the google search code, and making the header on that side ul/li nest an actual header. (which being it's not a subsection of #content's H2, that should also be an H2) Always start with your content and mark it up with as few tags as is reasonable while at the same time dividing it up logically - if you aren't applying more than one styling to a section, do NOT waste time nesting it four deep in DIV's for no good reason. Don't even really think about the page appearance while making the markup - that's what CSS is for... Which right there is the problem with CSS frameworks - it's working back assward as you are supposed to be applying CSS to your HTML, not the other way around.
deathshadow, thank you for your walkthrough. shallowink is correct in that site is still the old YAML version. I'm just finishing up the Blueprint version and it should be ready to go shortly. As I mentioned in my previous post, when I started web design/coding I used YAML and had no idea how to work with CSS, I basically had the html in vi in one window and an open firefox in another and started to make changes until I thought it was right. After switching to Blueprint I felt a bit more comfortable (and having gained some CSS/HTML experience) with trying to clean up the HTML markup. I cleared out most of those div and span tags and inlined CSS using the style attribute for slight modifications on the base typography.css file I have. I think it's looking much better and is definitely more manageable on my side. I followed through on some of your points and did some research on proper HTML markup (I think the term they use is semantic) and have tried to follow that approach. I'm basically only using h1,2,3,4,5,6,p for my main content and hr and divs sparingly only when needed. If you know any reference documents or books for writing proper HTML using the bare minimum of markup to be stylized with CSS like you say, then I would be quite appreciative. As far as your design in the link you provided, I have seen those as starting points, but I was scared off by it the first week of playing with HTML/CSS - hence the adventure, or maybe what you appear to be suggesting, a detour in my path to HTML/CSS expertise. I think I will stick to the Blueprint for now, publish it and try to get some comments on it until I become more experienced and comfortable with CSS from the ground-up. Thanks again for taking the time to help. Regards
Actually one question I forgot to ask: Are css and html file sizes so important anyway? Most people aren't on POTS modems anymore. My load times on my sites are affected more by data serialization from the database and things like AdSense and Google Maps taking a second or two to load. Does the extra markup necessarily cause IE or FF to render the pages much slower? I understand page load times are important to the end-user, but do these bloat issues also negatively affect such things as SEO as well?
I'm sure everyone else has an opinion on this, but here's a quick 2cents worth. First: bloat makes it harder to work with the page after the fact. Second, unnecessary markup has to be rendered. If you create a DIVitis mess, the browser will render each one of those. If you can accomplish the same layout with less markup, the better off you are. Far as bandwidth etc, I would say it isn't nearly as important as it once was but whereas before waiting 15s for a page to load was acceptable, surfers won't wait past 8s now. Proliferation of high speed access has decreased the patience level. Far as SEO, it could be a microscopic factor. Mainly from not having clearly defined markup. Using the incorrect tags( bold instead of H) would be a larger factor.
Went through your post again while having my markup next to it. Your points have helped, I switched over to XHTML-Strict and removed (I assume to be) superfluous meta tags: <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Pragma" content="no-cache" /> <meta name="Abstract" content="Golfcoursehunter.com" /> <meta name="Author" content="Golfcoursehunter.com" /> <meta name="generator" content="hand-written" /> I chose to keep the address ones in there as I think it helps with SEO. I didn't quite understand what you meant with the ul/li navigation in the header though, it's currently: <div id="nav_main"> <ul> <li><a href="../../../../../">Home</a></li> <li><a href="../../../../../golf-courses/regions"<a>Regions</a></li> <li><a href="/forum">Golf Course Hunter Forum</a></li> <li><a href="../../../../../links" wicket:id="links">Links</a></li> </ul> I don't know how that can be improved, or did I misinterpret your comment?
Actually, the google AdSense for Search doesn't even validate against XHTML/Strict. I'm not sure if I'm allowed to edit their markup I insert in my page.
Lose the DIV, it doesn't do anything (or at least shouldn't be). About five years ago they made a stink about it, and I was one of the people on the frontlines arguing that if their code didn't **** so bad, we wouldn't be editing it. One of my sites got de-ranked JUST because I recoded the search, despite keeping the appearance 100% identical to theirs. When I pointed this out, they pretty much had egg on their face. Which is why today - so long as you have all the correct inputs present, call their image (which can be annoying at times) file, they now say you are fine. So go ahead and edit away. So long as you are calling a image off their server and have all the correct inputs present (in terms of name/id's) you're fine. Look at my code sample above - that code there (which is all you need for the appearance you had) works fine - I use it on a great many sites and google hasn't complained once. Oops, correction - that version has one error. Delete the 'id="sbb"' part - THEN it validates XHTML strict.