Stefan,
I almost forgot the key reason I have come to use this approach and that is because when in the past I had mocked designs up in html, I would always mock it up as the most streamlined html that I could produce but when I got to the CMS, I had to then take into account what the CMS was outputting. I would have a single div for my content but the CMS might nest several divs and spans that I may then have to account for (not always).
Navigation elements were the final straw. My mockup navigation would be nice and pretty:
<div id=""navigation>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/node/2" title="Program & Schedule" class="active-trail active">Program & Schedule</a>
<ul>
<li><a href="/content/call-submissions" title="Call for Submissions">Call for Submissions</a></li>
</ul>
</li>
<li><a href="/node/3" title="Sponsorship">Sponsorship</a></li>
<li><a href="/node/5" title="Registration">Registration</a></li>
<li><a href="/node/6" title="Location">Location</a></li>
</ul>
</div>
The CMS of course is set up for various states of active, following, open, closed, etc so it isn’t as straight forward:
<div id="navigation">
<div class="region region-navigation">
<div class="block block-system contextual-links-region block-menu" id="block-system-main-menu">
<div class="contextual-links-wrapper contextual-links-processed"><a href="#" class="contextual-links-trigger">Configure</a><ul class="contextual-links">
<li class="menu-list first"><a href="/admin/structure/menu/manage/main-menu/list?destination=node/2">List links</a></li>
<li class="menu-edit"><a href="/admin/structure/menu/manage/main-menu/edit?destination=node/2">Edit menu</a></li>
<li class="block-configure last"><a href="/admin/structure/block/manage/system/main-menu/configure?destination=node/2">Configure block</a></li>
</ul>
</div>
<div class="content">
<ul class="menu"><li class="first leaf"><a href="/">Home</a></li>
<li class="expanded active-trail"><a class="active-trail active" title="Program & Schedule" href="/node/2">Program & Schedule</a>
<ul class="menu">
<li class="first last leaf"><a title="Call for Submissions" href="/content/call-submissions">Call for Submissions</a></li>
</ul>
</li>
<li class="leaf"><a title="Sponsorship" href="/node/3">Sponsorship</a></li>
<li class="leaf"><a title="Registration" href="/node/5">Registration</a></li>
<li class="last leaf"><a title="Location" href="/node/6">Location</a></li>
</ul>
</div>
</div>
</div>
</div>
So faced with that, I find it easier to work entirely in Firebug with the real code and compose my CSS, which I then add to my CSS file and upload/refresh as I move along.
I’ll create some basic rules to begin with in CSS to sort of reset the navigation elements and then move forward to decorate them. Something like the following:
ul.menu a {
text-decoration:none;
}
ul li.leaf {
list-style-image: none;
list-style-type: none;
}
ul.menu li,
.item-list ul.menu li,
ul..menu li.leaf {
background: none repeat scroll 0 0 transparent;
border: medium none;
list-style-image: none;
list-style-type: none;
}
One last thing, I’ve been doing recently is, instead of making my own CSS reset code, I’ve been using Yahoo’s. I link in the following at the top of my base html template file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css" />
Anyway, for me it saves a lot of time so hopefully it will for you too.
Andrew