[WSG] How to create a mark-up guide?
And all that Malarkey
http://www.stuffandnonsense.co.uk/archives/css_markup_guides.html
has a recent post about how he creates sites with black and white drawings and
adds the div id's etc after the client has approved...
This made me think that I should go back to our re-designed web site and create
a similar sketch.
My first thought was add:
div {border:1px solid #000 !important; margin: 2px !important;}
to the style sheet to show the divs. Then I was wondering if there is a css2
method to show the id or class within the div?
Wouldn't that make it nice and easy to create the layout diagram for older
sites?
Any suggestions?
Ted
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] How to create a mark-up guide?
And all that Malarkey
http://www.stuffandnonsense.co.uk/archives/css_markup_guides.html
has a recent post about how he creates sites with black and white
drawings and adds the div id's etc after the client has approved...
This made me think that I should go back to our re-designed web site
and create a similar sketch.
My first thought was add:
div {border:1px solid #000 !important; margin: 2px !important;}
to the style sheet to show the divs. Then I was wondering if there is
a css2 method to show the id or class within the div?
div {
border:1px solid #000 !important;
margin:1.25em !important;
padding:0.25em !important;
}
div[class]:before {
content: class= attr(class);
color:#900;
font-weight:bold;
}
div[id]:after {
content: id= attr(id);
color:#090;
font-weight:bold;
}
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] How to create a mark-up guide?
Ted Drake wrote:
And all that Malarkey http://www.stuffandnonsense.co.uk/archives/css_markup_guides.html
[...]
I was wondering if there is a css2 method to show the id or class within the div?
Only made a start, but something like:
/* general styling for all of the :before bits */
:before { display: block; color: red; font-weight: bold; }
/* long list of all the ones you need (only catering for id...similar
for class,
and need to do separate rules for the case in which it's just id, just
class, or both
id and class */
div:before { content: 'div'; }
div[id]:before { content: 'div #'attr(id); }
h1:before { content: 'h1'; }
h1[id]:before { content: 'h1 #'attr(id); }
h2:before { content: 'h2'; }
h2[id]:before { content: 'h2 #'attr(id); }
h3:before { content: 'h3'; }
h3[id]:before { content: 'h3 #'attr(id); }
h4:before { content: 'h4'; }
h4[id]:before { content: 'h4 #'attr(id); }
h5:before { content: 'h5'; }
h5[id]:before { content: 'h5 #'attr(id); }
h6:before { content: 'h6'; }
h6[id]:before { content: 'h6 #'attr(id); }
p:before { content: 'p'; }
p[id]:before { content: 'p #'attr(id); }
ul:before { content: 'ul'; }
ul[id]:before { content: 'ul #'attr(id); }
dl:before { content: 'dl'; }
dl[id]:before { content: 'dl #'attr(id); }
dt:before { content: 'dt'; }
dt[id]:before { content: 'dt #'attr(id); }
dd:before { content: 'dd'; }
dd[id]:before { content: 'dd #'attr(id); }
form:before { content: 'form'; }
form[id]:before { content: 'form #'attr(id); }
label:before { content: 'label'; }
label[id]:before { content: 'label #'attr(id); }
--
Patrick H. Lauke
_
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [Norton AntiSpam] Re: [WSG] How to create a mark-up guide?
Patrick H. Lauke wrote:
/* long list of all the ones you need (only catering for id...similar
for class,
and need to do separate rules for the case in which it's just id, just
class, or both
id and class */
And to elaborate, as an example:
div:before { content: 'div'; }
div[id]:before { content: 'div #'attr(id); }
div[class]:before { content: 'div class='attr(class); }
div[id][class]:before { content: 'div #'attr(id)' class='attr(class); }
--
Patrick H. Lauke
_
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] How to create a mark-up guide?
This is great Patrick.
I'm going to save it as a layout.css and use it for all sorts of stuff.
You are the bomb!
Ted
-Original Message-
From: Patrick H. Lauke [mailto:[EMAIL PROTECTED]
Sent: Friday, January 07, 2005 11:15 AM
To: wsg@webstandardsgroup.org
Subject: Re: [Norton AntiSpam] Re: [WSG] How to create a mark-up guide?
Patrick H. Lauke wrote:
/* long list of all the ones you need (only catering for id...similar
for class,
and need to do separate rules for the case in which it's just id, just
class, or both
id and class */
And to elaborate, as an example:
div:before { content: 'div'; }
div[id]:before { content: 'div #'attr(id); }
div[class]:before { content: 'div class='attr(class); }
div[id][class]:before { content: 'div #'attr(id)' class='attr(class); }
--
Patrick H. Lauke
_
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] How to create a mark-up guide?
Ted Drake wrote: This is great Patrick. I'm going to save it as a layout.css and use it for all sorts of stuff. You are the bomb! We aim to please ;-) May have to expand on it a bit more and make it into a proper experiment on my site, I think. Watch this space... -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
