A light-weight framework for structured HTML/CSS development
TDCSS helps you write and document solid, maintainable and modular CSS.
It's especially well suited to adopt a test-driven approach to CSS styling - but of course you may just as well use it to build a regular online styleguide.
Put this in the head of an empty .html-file:
<!-- Your own CSS -->
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen">
<!-- TDCSS -->
<link rel="stylesheet" href="tdcss/tdcss.css" type="text/css" media="screen">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="tdcss/tdcss.js"></script>
<script type="text/javascript">
$(function(){
$("#tdcss").tdcss();
})
</script>
The markup:
<div id="tdcss">
<!-- # Box styles -->
<!-- & Box styles is a collection of generic boxes. -->
<!-- : Basic box -->
<div class="box">
<p>This is a basic box.</p>
</div>
<!-- : Notice box -->
<div class="box-notice">
<p>This is a notice box.</p>
</div>
<!-- : Warning box -->
<div class="box-warning">
<p>This is a warning box.</p>
</div>
<!-- : Alert box -->
<div class="box-alert">
<p>This is an alert box.</p>
</div>
<!-- # Typography -->
<!-- : H1 -->
<h1>This is an H1 header.</h1>
<!-- : H2 -->
<h2>This is an H2 header</h2>
<!-- : H3 -->
<h3>This is an H3 header</h3>
<!-- # Custom height -->
<!-- : Some element that needs a lot of space; 700px -->
<h3>This is a test.</h3>
</div>
An html comment with prefix ":" means the start of a fragment:
<!-- : -->
<p>This is a <strong>fragment</strong></p>
The (optional) first text after the prefix becomes the title of the fragment:
<!-- : Element title -->
Fix the height of the fragment container by appending a CSS height value after a semicolon. This is useful for position:absolute type layouts that don't by themselfes expand their container:
<!-- : Element title; 400px -->
You can make section dividers by inserting a section comment:
<!-- # Section name -->
You may also place description blocks anywhere in your markup:
<!-- & Descriptive text -->