A light-weight framework for structured HTML/CSS development

View the Project on GitHub jakobloekke/tdcss.js

Super simple styleguide tool

Live example

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.

tdcss.js in action

What's the benefit over other styleguide tools?

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=""></script>
<script type="text/javascript" src="tdcss/tdcss.js"></script>
<script type="text/javascript">

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>
    <!-- : Notice box -->
    <div class="box-notice">
        <p>This is a notice box.</p>
    <!-- : Warning box -->
    <div class="box-warning">
        <p>This is a warning box.</p>
    <!-- : Alert box -->
    <div class="box-alert">
        <p>This is an alert box.</p>

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



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