Jump to content

Year

Day

24 Ways to impress your friends

15 12/2006 A Message To You, Rudy - CSS Production Notes

by Andy Clarke

When more than one designer or developer work together on coding an XHTML/CSS template, there are several ways to make collaboration effective. Some prefer to comment their code, leaving a trail of bread-crumbs for their co-workers to follow. Others use accompanying files that contain their working notes or communicate via Basecamp.

For this year’s 24ways I wanted to share a technique that I has been effective at Stuff and Nonsense; one that unfortunately did not make it into the final draft of Transcending CSS. This technique, CSS production notes, places your page production notes in one convenient place within an XHTML document and uses nothing more than meaningful markup and CSS.

Let’s start with the basics; a conversation between a group of people. In the absence of notes or conversation elements in XHTML you need to make an XHTML compound that will effectively add meaning to the conversation between designers and developers. As each person speaks, you have two elements right there to describe what has been said and who has spoken: <blockquote> and its cite attribute.

  1. <blockquote cite="andy">
  2. <p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
  3. </blockquote>
  4. Source: /code/css-production-notes/1.txt

With more than one person speaking, you need to establish a temporal order for the conversation. Once again, the element to do just that is already there in XHTML; the humble ordered list.

  1. <ol id="notes">
  2. <li>
  3. <blockquote cite="andy">
  4. <p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
  5. </blockquote>
  6. </li>
  7. <li>
  8. <blockquote cite="dan">
  9. <p>Those bits are simple and bulletproof.</p>
  10. </blockquote>
  11. </li>
  12. </ol>
  13. Source: /code/css-production-notes/2.txt

Adding a new note is as simple as adding a new item to list, and if you prefer to add more information to each note, such as the date or time that the note was written, go right ahead. Place your note list at the bottom of the source order of your document, right before the closing <body> tag. One advantage of this approach over using conventional comments in your code is that all the notes are unobtrusive and are grouped together in one place, rather than being spread throughout your document.

Basic CSS styling

For the first stage you are going to add some basic styling to the notes area, starting with the ordered list. For this design I am basing the look and feel on an instant messenger window.

Stage 1

  1. ol#notes {
  2. width : 300px;
  3. height : 320px;
  4. padding : .5em 0;
  5. background : url(im.png) repeat;
  6. border : 1px solid #333;
  7. border-bottom-width : 2px;
  8. -moz-border-radius : 6px; /* Will not validate */
  9. color : #000;
  10. overflow : auto;
  11. }
  12.  
  13. ol#notes li {
  14. margin : .5em;
  15. padding : 10px 0 5px;
  16. background-color : #fff;
  17. border : 1px solid #666;
  18. -moz-border-radius : 6px; /* Will not validate */
  19. }
  20.  
  21. ol#notes blockquote {
  22. margin : 0;
  23. padding : 0;
  24. }
  25.  
  26. ol#notes p {
  27. margin : 0 20px .75em;
  28. padding : 0;
  29. }
  30.  
  31. ol#notes p.date {
  32. font-size : 92%;
  33. color : #666;
  34. text-transform : uppercase;
  35. }
  36. Source: /code/css-production-notes/3.txt

Take a gander at the first example.

You could stop right there, but without seeing who has left the note, there is little context. So next, extract the name of the commenter from the <blockquote>’s cite attribute and display it before each note by using generated content.

  1. ol#notes blockquote:before {
  2. content : " "attr(cite)" said: ";
  3. margin-left : 20px;
  4. font-weight : bold;
  5. }
  6. Source: /code/css-production-notes/4.txt

Fun with more detailed styling

Now, with all of the information and basic styling in place, it’s time to have some fun with some more detailed styling to spruce up your notes. Let’s start by adding an icon for each person, once again based on their cite. First, all of the first paragraphs of a <blockquote>’s that includes a cite attribute are given common styles.

  1. ol#notes blockquote[cite] p:first-child {
  2. min-height : 34px;
  3. padding-left : 40px;
  4. }
  5. Source: /code/css-production-notes/5.txt

Followed by an individual background-image.

  1. ol#notes blockquote[cite="Andy"] p:first-child {
  2. background : url(malarkey.png) no-repeat 5px 5px;
  3. }
  4. Source: /code/css-production-notes/6.txt

If you prefer a little more interactivity, add a :hover state to each <blockquote> and perhaps highlight the most recent comment.

  1. ol#notes blockquote:hover {
  2. background-color : #faf8eb;
  3. border-top : 1px solid #fff;
  4. border-bottom : 1px solid #333;
  5. }
  6.  
  7. ol#notes li:last-child blockquote {
  8. background-color : #f1efe2;
  9. }
  10. Source: /code/css-production-notes/7.txt

Stage 2

You could also adjust the style for each comment based on the department that the person works in, for example:

  1. <li>
  2. <blockquote cite="andy" class="designer">
  3. <p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
  4. </blockquote>
  5. </li>
  6. <li>
  7. <blockquote cite="dan">
  8. <p>Those bits are simple and bulletproof.</p>
  9. </blockquote>
  10. </li>
  11.  
  12. ol#notes blockquote.designer { border-color : #600; }
  13.  
  14. Source: /code/css-production-notes/8.txt

Take a look at the results of the second stage.

Show and hide the notes using CSS positioning

With your notes now dressed in their finest, it is time to tuck them away above the top of your working XHTML/CSS prototype so that you can reveal them when you need them, no JavaScript required. Start by moving the ordered list of notes off the top of the viewport leaving only a few pixels in view. It is also a good idea to make them semi-transparent by using the opacity property for browsers that have implemented it.

  1. ol#notes {
  2. position : absolute;
  3. opacity : .25;
  4. z-index : 2000;
  5. top : -305px;
  6. left : 20px;
  7. }
  8. Source: /code/css-production-notes/9.txt

Your last step is to add :hover and :focus dynamic pseudo-classes to reposition the list at the top of the viewport and restore full opacity to display them in their full glory when needed.

  1. ol#notes:hover, ol#notes:focus {
  2. top : 0;
  3. opacity : 1;
  4. }
  5. Source: /code/css-production-notes/10.txt

Stage 3

Now it’s time to sit back, pour yourself a long drink and bask in the glory of the final result. Your notes are all stored in one handy place at the bottom of your document rather than being spread around your code. When your templates are complete, simply dive straight to the bottom and pull out the notes.

A Message To You, Rudy

Thank-you to everybody for making this a really great year for web standards. Have a wonderful holiday season.

Buy Andy Clarke’s book Transcending CSS from Amazon.com

Like what you read?

Comments

Impress us

Be friendly / use Textile

About the author

Andy Clarke

Andy Clarke has been called a lot of things since he started working on the web ten years ago. His ego likes words like "ambassador for CSS", "industry prophet" and "inspiring", but actually he is most proud that Jeffrey Zeldman once called him a "(triple talented) bastard".

Andy took ten months of his life to write the best-selling Transcending CSS: The Fine Art of Web Design, but his passion is amazing web design. He loves designing for the web, writing about design, and teaching it at workshops and conferences all over the world.

Now he is pulling all of those passions together to create For A Beautiful Web, a unique series of creative web design master classes for web designers and developers that cover topics including visual design and best-practice use of technologies such as CSS, mark-up and Microformats.

Photo: Patrick H. Lauke

More information

In association with:

Perch - a really little cms