cssvault - inspiring creativity

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 {  }

Share

This entry was posted on Monday, April 21st, 2008 at 12:32 pm and is filed under CSS, Code, Editor, Software, Tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.