cssvault - inspiring creativity

Firebug is the definitive Swiss army knife of any web developer. This screen cast by CSS Tricks serves as an introduction to using Firebug. Check it out!

CSS Globe has come up with a list of Do’s and Dont’s of CSS. This series’ part 1 covers the Do’s and Dont’s of CSS Selection, summed up as:

Summary

Do

• When choosing use class names, use class names that describe content’s meaning or purpose, not it’s appearance.
• Use few class names and use them on various elements.
• Use type selectors to (re)set default styling. If you wish, use proper reset techniques (mentioned above).
• Use multiple class names on single element to optimize your css.
• Use combined selectors and precisely target your element

Don’t

• Don’t use descriptive class names like "red", "blueDot" etc.
• Don’t use complicated class names or id’s like "sideIntroSecondaryContentTop". Use descendant selectors instead.
• Don’t use universal selector for resetting entire document.
• Don’t use browser dependent selectors.
• Don’t add unnecessary class names.

Check out the full article.

Tired of writing boring XHTML and CSS code at the beginning of every slicing project? The XHTML / CSS Markup Generator is a web based tool that allows users to enter very intuitive, shortened syntax in order to generate corresponding XHTML and CSS markup, speeding up your work.

Sample input looks something like this:

#root
 #top
  #logo
   a[href="/"]=Markup Generator
  form#search
   fieldset
    label[for="query"]=Enter keyword:
    input[type="text" name="term"]#query
    button[type="submit"]=Find
 #header
  h1=Markup Generator
  h2=Nifty tool for XHTML/CSS coders
 #content
  #primary
   #about
  #secondary
   #contact.box
   #notify.box
   #bookmarks.box
 #footer
  p=Copyright (c) 2008 xMS.pl

This will result in the following XHTML and CSS code:

(XHTML):

<div id="root">
    <div id="top">
        <div id="logo">
            <a href="/">Markup Generator</a>
        </div>
        <form id="search" method="post" action="./">
            <fieldset>
                <label for="query">Enter keyword:</label>
                <input id="query" type="text" name="term" />
                <button type="submit">Find</button>
            </fieldset>
        </form>
    </div>
    <div id="header">
        <h1>Markup Generator</h1>
        <h2>Nifty tool for XHTML/CSS coders</h2>
    </div>
    <div id="content">
        <div id="primary">
            <div id="about"></div>
        </div>
        <div id="secondary">
            <div id="contact" class="box"></div>
            <div id="notify" class="box"></div>
            <div id="bookmarks" class="box"></div>
        </div>
    </div>
    <div id="footer">
        <p>Copyright (c) 2008 xMS.pl</p>
    </div>
</div>

(CSS):

#root {  }
 #top {  }
  #logo {  }
   #logo a {  }
  #search {  }
   #search fieldset {  }
    #search fieldset label {  }
    #query {  }
    #search fieldset button {  }
 #header {  }
  #header h1 {  }
  #header h2 {  }
 #content {  }
  #primary {  }
   #about {  }
  #secondary {  }
   #contact {  }
   #notify {  }
   #bookmarks {  }
 #footer {  }
  #footer p {  }

Probably one of the toughest hills to climb for every CSS beginner is positioning, and this article introduces positioning in 10 very easy to understand slides, with an accompanying screen shot of each technique. Check it out at http://www.barelyfitz.com/screencast/html-training/css/positioning/

I have always been a huge fan of the minimalistic sign-up form. You know, the ones where all it takes to create an account is to provide 3 items: username, e-mail address, and password. Including the password confirmation box and that makes four. So, I was ecstatic when Luke Wroblewski’s article came out. Here he was telling us that there is actually a better approach which allows its visitors to plunge into the service without being stopped by a sign up and a login screen.

I tested one of the featured sites myself, Geni and behold, I never even saw a registration screen. I was converted from visitor to user in a snap.

Other featured sites included Jumpcut, TripIt, and Fidelity’s myPlan.

Now that is what you call thinking out of the box!

CSS Type Set is an online application created to assist beginner CSS developers with the task of font styling. It features an AJAX-powered interface that automagically updates the preview pane in real time. The resulting CSS syntax can then be copied and pasted into a CSS file. Give it a try!

GlassBox is a JavaScript library that allows you to add Windows Vista-like transparent effects on your website. It runs on top of the the Prototype and Script.aculo.us library and comes complete with an API documentation and tons of examples. It is released under the MIT license.