Building style guides with tdcss.js_Sass and Compass Designer's Cookbook-QQ阅读男生武侠网

上QQ阅读APP看书，第一时间看更新

Building style guides with tdcss.js

In TDD, tests are written to test functional blocks of code and match the specification. After this, you write the code that makes test pass.

When applying test-driven CSS, the style guide is your test. After making changes in your Sass code, all the user interface elements in your style guide should still look as required.

Jakob Løkke Madsen (@jakobloekke) promotes test-driven development for CSS code. Madsen wrote the tdcss.js framework, which is a super simple style guide tool. The tdcss.js framework only depends on jQuery, and it is especially well-suited for adopting a test-driven approach to CSS styling. You can also use the tdcss.js framework to build a regular online style guide.

Getting ready

Download the tdcss.js file at https://github.com/jakobloekke/tdcss.js/archive/master.zip. Unzip this file in your working directory, which will create a folder called tdcss.js-master. Rename the tdcss.js-master folder to match the directory structure used in this recipe. You can use Ruby Sass on the command line to compile your Sass templates into CSS code. The Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, explains how to install Ruby Sass.

How to do it...

Perform the following steps to build a styleguide with tdcss.js:

Create the following folder and file structure after downloading and unzipping the tdcss.js files:

Edit your sass/components/_header.scss file to style some headers:

// CSS RESET
body, html {
  margin: 0;
  padding: 0;
}

@mixin header-styles($background-color) {
  background-color: $background-color;
  border: 3px solid darken($background-color, 20%);
  color: $header-default-font-color;
}

$header-margin: 10px !default;
$header-childs-padding: 10px !default;
$header-default-color: lightyellow !default;
$header-default-font-color: black !default;

$warning-color: red;

.header {
  margin: $header-margin;
  * {
    padding: $header-childs-padding;
  }
}

.header-default {
  @include header-styles($header-default-color);
}

.header-warning {
  @include header-styles($warning-color);
}

The sass/main.scss file should contain only the following line of code:
```
@import 'components/header';
```
Use the following command to compile your Sass code:
```
 sass sass/main.scss css/main.css
```

Edit the HTML5 file called styleguide.html and make it look as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Building styleguides with tdcss.js</title>
  <meta name="description" content="Building styleguides with tdcss.js">
  <meta name="author" content="Bass Jobsen">

  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <!-- TDCSS -->
  <link rel="stylesheet" href="tdcss.js-v.0.6/src/tdcss.css" type="text/css" media="screen">
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="tdcss.js-v.0.6/src/tdcss.js"></script>        
  <script type="text/javascript">
    $(function(){
        $("#tdcss").tdcss();
  })
  </script>
</head>

<body>
    
<div id="tdcss">

<!-- # Header styles -->
<!-- & Collection of headers. -->
    
<!-- : Default header -->
<header class="header header-default">
    <h1>Write and debug Sass in brower</h1>
</header>
    
<!-- : Warning header -->
<header class="header header-warning">
    <h1>Write and debug Sass in brower</h1>
</header>
</div>
    
</body>
</html>

Now, you can load the styleguide.html file in your browser.
Finally, you will find a style guide similar to the one shown in the following screenshot:

How it works...

Style guides built with the tdcss.js framework are not generated automatically without some special comments in the HTML code of the styleguide.html file.

The styleguide.html file contains styled user interface elements. You can group and describe these elements with HTML comments. All the user interface elements should be wrapped inside the <div id="tdcss"></div> tags.

The following HTML comments can then be used to build your style guide:

To create a section, use the following comment style:
Descriptive texts can be added everywhere in your document with the following style:
Finally, the HTML code of your elements should be preceded by the following:

The tdcss.js framework builds the style guide using these HTML comments.

There's more…

Some other tools to generate style guides use special comments inside the Sass and compiled SCSS code. In the Building style guides with Kalei Styleguide recipe of this chapter, you can read how to generate a style guide by adding special comments formatted in Markdown inside your Sass code. The recipe uses the same Sass code as the one used here, except for the additional comments required for the Kalei Styleguide tool.

StyleDocco is another tool used to generate style guides. Also, the StyleDocco tool requires some special comments inside your Sass templates.