Super simple styleguide tool

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.

What's the benefit over other styleguide tools?

No server tech dependencies (no need for node.js, Ruby, PHP, etc.) - TDCSS is just a jQuery plugin that works on flat HTML files.
No markup bloat - TDCSS uses HTML comments for structuring.
Easy setup - Flat files make it super-easy to use TDCSS together with Livereload or similar browser refresh tools for an efficient workflow.

What's "test-driven CSS"?

How does it work?

Setting up:

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>

Usage

An html comment with prefix ":" means the start of a fragment:

<!-- : -->
<p>This is a <strong>fragment</strong></p>

A simple fragment

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