Save Development Time with XHTML and CSS Markup Generator
Monday, April 21st, 2008
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 { }
