Tracdelight Stylesheet guide
Containers

Using: .container makes the container size responsive, yet fixed.

This container's width is fixed

Using: .container-fluid makes the container size responsive and flexible.

This container expands to fit its parent's width

Columns

The grid layout is divided into 12. Classes defining columns start with col, optionally append the device the class should apply to: mobile or desktop, and finally a size from 1 to 12. The grid is mobile-first, meaning .col-mobile-XX will apply to desktop too, unless overriden by .col-mobile-XX. E.g. .col-mobile-6 creates a column taking half the width of the container and applies both for mobile and desktop. for mobile and desktop. creates a column taking half the width of the container and applies both for mobile and desktop. creates a column taking half the width of the container and applies both for mobile and desktop. creates a column taking half the width of the container and applies both for mobile and desktop for mobile and desktop. creates a column taking half the width of the container and applies both for mobile and desktop. creates a column taking half the width of the container and applies both for mobile and desktop. creates a column taking half the width of the container and applies both for mobile and desktop

Add a column taking all width in every case: .col-mobile-12

This always takes the full width

Add a column taking full width in mobile, half in desktop: .col-mobile-12.col-desktop-6

In desktop this takes half, in mobile it takes all of the space

In desktop this takes half, in mobile it takes all of the space

You can nest columns

In desktop this takes half, in mobile it takes all of the space

In desktop this takes half, in mobile it takes all of the space

Divide the columns to add up to 12

.col-mobile-6-12

.col-mobile-6-6

.col-mobile-6-6

.col-mobile-6-4

.col-mobile-6-4

.col-mobile-6-4

.col-mobile-6-3

.col-mobile-6-3

.col-mobile-6-3

.col-mobile-6-3

.col-mobile-6-2

.col-mobile-6-2

.col-mobile-6-2

.col-mobile-6-2

.col-mobile-6-2

.col-mobile-6-2

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

.col-mobile-6-1

To make the images responsive just add the .img-responsive. This will scale the image to its container's width. To center the image in its container just add .u-centerBlock.

Add an standard image.

Add an image inside a container using .img-responsive and .u-centerBlock. (Note that the grey border/background is only for demo purposes)

You can a border using .img--bordered.

Another way to add an image is setting the background of a block element (e.g. div). Use the .img-background-retina(@file-1x, @file-2x, @width-1x, @height-1x) mixin to show higher resolution images for Retina displays and the .imageBackground(@sizing: contain) mixin:

In LESS:

#mySpecialImage {
  .imageBackgroundRetina("/images/bowtie.jpg", "/images/bowtie2x.jpg", 450, 338);
  .imageBackground;
}

In CSS (include .img-background class):

#mySpecialImage {
  background-image: url("/images/bowtie.jpg");
}

This is an h1 heading - I am Small
<div class="h1"> This is an h1 heading<span class="small"> - I am Small</span><div>
This is an h2 heading - I am Small
<div class="h2"> This is an h2 heading<span class="small"> - I am Small</span><div>
This is an h3 heading - I am Small
<div class="h3"> This is an h3 heading<span class="small"> - I am Small</span><div>
This is an h4 heading - I am Small
<div class="h4"> This is an h4 heading<span class="small"> - I am Small</span><div>
This is an h5 heading - I am Small
<div class="h5"> This is an h5 heading<span class="small"> - I am Small</span><div>
This is an h6 heading - I am Small
<div class="h6"> This is an h6 heading<span class="small"> - I am Small</span><div>
The quick brown fox jumps over the lazy dog .u-textLeft
The quick brown fox jumps over the lazy dog .u-textRight
The quick brown fox jumps over the lazy dog .u-textCenter
The quick brown fox jumps over the lazy dog .u-textJustify
This is a really long text that I hope should take more than 200px to print out.
.u-ellipsis
The quick brown fox jumps over the lazy dog .u-textLowercase
The quick brown fox jumps over the lazy dog .u-textUppercase
The quick brown fox jumps over the lazy dog .u-textCapitalize
The quick brown fox jumps over the lazy dog .u-textFaded
The quick brown fox jumps over the lazy dog .u-textDanger
The quick brown fox jumps over the lazy dog .u-textSuccess

Sample code:

<table class='table'> // add variation classes (below)
  <thead>
    <tr>
      <th>My Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>My Value</td>
    </tr>
    <tr class='active'>
      <td>My Value</td>
    </tr>
  </tbody>
</table>
Country Continent icon
1. Germany Europe
2. Tunisia Africa
3.(active) France Europe
4. Spain Europe
5. Malta Europe

Add .table--condensed, .table--striped, .table--hover and .table--bordered for table variations:

Country Continent icon
1. Germany Europe
2. Tunisia Africa
3.(active) France Europe
4. Spain Europe
5. Malta Europe
Country Continent icon
1. Germany Europe
2. Tunisia Africa
3.(active) France Europe
4. Spain Europe
5. Malta Europe
Country Continent icon
1. Germany Europe
2. Tunisia Africa
3.(active) France Europe
4. Spain Europe
5. Malta Europe
Country Continent icon
1. Germany Europe
2. Tunisia Africa
3.(active) France Europe
4. Spain Europe
5. Malta Europe

Just add the .btn and any modifier (e.g. .btn--primary) class to any element to make it a button.

Code Disabled Hover Active
<button class="btn btn--primary">Click me!</button>
<button class="btn btn--secondary">Click me!</button>
<button class="btn btn--tertiary">Click me!</button>
<button class="btn btn--success">Click me!</button>
<button class="btn btn--error">Click me!</button>
<button class="btn btn--faded">Click me!</button>

Use .btn--block to make the button a block element:

Add icons in buttons:

Disable buttons using disabled attribute

Add a link to the button

I am a link

Make buttons thin by adding .btn--thin

add .form to a form element and choose whether it is .form--inline or .form--block.

<form class="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label><input id="exampleInputEmail1"
    type="email" placeholder="Email" class="form-control" />
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <div class="form-wrapper">
      <input id="exampleInputPassword1" type="password" placeholder="Password" class=
      "form-control" /><button class="btn btn--primary btn--thin"> Search</button>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label><input id="exampleInputFile" type=
    "file" />
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label><input type="checkbox" /><span>Check me out</span></label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" checked="checked" /><span>Check me
      in</span></label>
    </div>
  </div>
  <div class="form-group">
    <label>Best Language</label>
    <div class="radio">
      <label><input type="radio" name="language" value="java" checked=
      "checked" /><span>Java</span></label>
    </div>
    <div class="radio">
      <label><input type="radio" name="language" value=
      "morejava" /><span>Java</span></label>
    </div>
    <div class="radio">
      <label><input type="radio" name="language" value="seesharp" disabled=
      "disabled" /><span>C# (disabled)</span></label>
    </div>
  </div>
  <div class="form-group">
    <input type="number" name="points" min="0" max="100" step="10" value="30" class=
    "form-control" />
  </div>
  <div class="form-group">
    <input type="date" name="bday" placeholder="date" class="form-control" />
  </div>
  <div class="form-group">
    <input type="tel" name="phone" placeholder="tel" class="form-control" />
  </div>
  <div class="form-group">
    <input type="search" name="search" placeholder="search" class="form-control" />
  </div>
  <div class="form-group">
    <input type="color" name="color" placeholder="color" class="form-control" />
  </div>
  <div class="form-group">
    <input type="url" name="url" placeholder="url" class="form-control" />
    <p class="help-block">Please input your url.</p>
  </div>
  <div class="form-group">
    <input type="email" name="email" placeholder="email" class="form-control" />
  </div>
  <div class="form-group is-success">
    <input type="email" name="email" placeholder="email" class="form-control" />
  </div>
  <div class="form-group is-error">
    <input type="email" name="email" placeholder="email" class="form-control" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn--primary btn--thin">Submit</button>
  </div>
</form>

Example block-level help text here.

Please input your url.

Example block-level help text here.

Please input your url.

<div class="col-mobile-4 form form--block">
  <ul class="list">
    <li class="list-header"><span>Your lists</span><a class="item-info">Clear
    all</a></li>
    <li class="list-subheader">Gender</li>
    <li class="list-item">Favourites
      <div class="item-info">
        146
      </div>
    </li>
    <li class="list-header">Create a list</li>
    <li class="list-item form-group">
      <div class="checkbox active">
        <label><input type="checkbox" checked=
        "checked" /><span>Favourites</span></label>
      </div>
    </li>
    <li class="list-item form-group">
      <div class="radio">
        <label><input type="radio" name="choice" value="undefined" checked=
        "checked" /><span>1st Choice</span></label>
      </div>
    </li>
    <li class="list-item form-group">
      <div class="form-wrapper">
        <input id="listName" type="text" placeholder="List Name" class=
        "form-control" />
      </div>
    </li>
    <li class="form-group">
      <ul class="list dual">
        <li class="list-item">
          <div class="list-item-wrapper">
            <div class="description">
              <label>Min. price</label>
            </div><label><input type="text" name="minprice" placeholder="1" class=
            "form-control" /></label>
            <div class="suffix">
              <label>€</label>
            </div>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-wrapper">
            <div class="description">
              <label>Max. price</label>
            </div><label><input type="text" name="maxprice" placeholder="25000" class=
            "form-control" /></label>
            <div class="suffix">
              <label>€</label>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>
  • Your listsClear all
  • Gender
  • Favourites
    146
  • Couchdecken
    146
  • Moon + Cosmos
    146
  • Create a list
  • Your listsClear all
  • Gender
  • Favourites
    146
  • Couchdecken
    146
  • Moon + Cosmos
    146
  • Create a list
  • Your listsClear all
  • Gender
  • Choice
  • PriceClear
<div class="filter-container">
  <span>Filter:</span>
  <div class="filter">
    <ul class="list">
      <li class="list-item">Art Deco</li>
      <li class="list-item list-item--removable">
        <span>Search: Whatever?</span>
        <div class="fa fa-close"></div>
      </li>
    </ul>
  </div><a href="#" class="filter-remove">Remove all</a>
</div>
Filter:
  • Art Deco
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
  • Search: Whatever?
Remove all
<div class="tab-list tab-list--block">
  <ul class="list">
    <li class="list-item">
      <a>First</a>
    </li>
    <li class="list-item is-active">
      <a>Second</a>
    </li>
  </ul>
</div>
<div class="tab-list tab-list--inline">
  <ul class="list">
    <li class="list-item">
      <a>First</a>
    </li>
    <li class="list-item is-active">
      <a>Second</a>
    </li>
  </ul>
</div>
<div class="pagination">
  <ul class="list">
    <li class="list-item">
      <a class="list-item-link td-icon td-icon--arrow-left"></a>
    </li>
    <li class="list-item">1</li>
    <li class="list-item active">3</li>
    <li class="list-item">
      <a href="#" class="list-item-link">4</a>
    </li>
    <li class="list-item overflow">
      <label for="overflow-state-checkbox" class="list-item-link overflow-label"></label>
      <input id="overflow-state-checkbox" type="checkbox" class="overflow-state"/>
      <div class="list-wrapper">
        <ul class="list">
          <li class="list-item">
            <a href="#" class="list-item-link">6</a>
          </li>
          <li class="list-item">7</li>
        </ul>
      </div>
    </li>
    <li class="list-item">8</li>
    <li class="list-item">
      <a class="list-item-link td-icon td-icon--arrow-right"></a>
    </li>
  </ul>
</div>
<button data-balloon="Hover default" class="btn btn--primary btn--thin btn--block">Default</button>
<button data-balloon-col="gray" data-balloon="Hover bottom" data-balloon-pos="down" class="btn btn--primary btn--thin btn--block">Bottom</button>
<button data-balloon-col="gray" data-balloon="Hover left" data-balloon-pos="left" class="btn btn--primary btn--thin btn--block">Left</button>
<button data-balloon-col="gray" data-balloon="Hover right" data-balloon-pos="right" class="btn btn--primary btn--thin btn--block">Right</button>
<button data-balloon-col="gray" data-balloon="Hover top" data-balloon-pos="up" class="btn btn--primary btn--thin btn--block">Top</button>
<button data-balloon-col="red" data-balloon="Red Tooltip" data-balloon-pos="right" class="btn btn--primary btn--thin btn--block">Error</button>
<button data-balloon-col="green" data-balloon="Green Tooltip" data-balloon-pos="right" class="btn btn--primary btn--thin btn--block">Success</button>
<button data-balloon-col="gray" data-balloon="Active tooltip" data-balloon-pos="right" class="btn btn--primary btn--thin btn--block is-hover">Success</button>

To use modals, just add the markup as shown below and add the .modal--visible modifier to the .modal element.

<div id="modal1" class="modal">
  <div class="modal-backdrop"></div>
  <div class="modal-wrapper">
    <div class="modal-content">
      <div class="modal-header">
        <div class="h3">
          A Sample Modal
        </div>
        <div class="modal-close-button">
          <a class="td-icon td-icon--cross"></a>
        </div>
      </div>
      <div class="modal-body">
        <p>Lorem Ipsum is simply dummy text.</p>
      </div>
      <div class="modal-footer">
        <div class="modal-footer-wrapper">
          <button id="cancelButton" class="btn btn--secondary btn--thin">Cancel</button><button class=
          "btn btn--success btn--thin">Execute</button>
        </div>
      </div>
    </div>
  </div>
</div>

Add the .code class to either an inline element (and add .code--inline):

<span class="code code--inline">insert html here</span>

Or as a block element

<div class="code"><pre>insert html here</pre></div>

  • Display
  • .u-centerBlock
  • .u-dispBlock
  • .u-dispInlBlock
  • .u-dispTable
  • .u-dispTableCell
  • .u-dispTableRow
  • .u-dispFlex
  • .u-hidden
    sets display to hidden
  • .u-hiddenMobile
    sets display to hidden for mobile
  • .u-hiddenDesktop
    sets display to hidden for Desktop
  • Positioning
  • .u-tableCenter
  • .u-flexCenter
  • .u-centerBlock
  • .u-margAuto
  • .u-posAbs
  • .u-posRel
  • .u-pullLeft
  • .u-pullRight
  • Dimensions
  • .u-fullHeight
  • .u-fullWidth
  • .u-fullVh
    sets height to 100% viewport height
  • Miscellaneous
  • .clearfix
  • .u-flexCol
  • .u-cursorPointer
<div class="container-fluid">
  <div class="row">
    <div style="margin-bottom: 1em;" class="navbar">
      <div class="navbar-container">
        <div class="navbar-item">
          <div style="background-image: url('/images/logo/text-and-slogan.svg'); width: 9em; height: 3em;" class="img-background"></div>
        </div>
        <div class="navbar-item"><span>For Advertisers</span></div>
        <div class="navbar-fillSpace"></div>
        <div class="navbar-item form form--inline">
          <div class="form-group">
            <input type="email" placeholder="Username" class="form-control"/>
          </div>
          <div class="form-group">
            <input type="password" placeholder="Password" class="form-control"/>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn--primary btn--thin">Login</button>
          </div>
        </div>
      </div>
    </div>
    <div class="navbar navbar--mobile">
      <div class="navbar-container">
        <div class="navbar-item logo">
          <div style="background-image: url('/images/logo/text-and-slogan.svg'); width: 9em; height: 3em;" class="img-background"></div>
        </div>
        <div class="navbar-fillSpace"></div>
        <input id="toggleNavbarCheckbox" type="checkbox" class="navbar-toggle-checkbox"/>
        <label for="toggleNavbarCheckbox" class="navbar-toggle-checkbox-label td-icon">
          <div class="navbar-toggle-checkbox-label-dressing"></div>
          <div class="navbar-toggle-checkbox-label-dressing"></div>
          <div class="navbar-toggle-checkbox-label-dressing"></div>
        </label>
        <div class="navbar-expand">
          <div class="navbar-item"><a>This is a link</a></div>
          <div class="navbar-item"><a>This is a another link</a></div>
          <div class="navbar-item form form--block">
            <div class="form-group">
              <input type="email" placeholder="Username" class="form-control"/>
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control"/>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn--primary btn--thin">Login</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 1em;" class="navbar navbar--inverted">
      <div class="navbar-container">
        ...
      </div>
    </div>
    <div style="margin-bottom: 1em; background: rgba(0,0,0,.75)" class="navbar navbar--transparent">
      <div class="navbar-container">
        ...
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="navbar navbar--inverted">
      <div class="navbar-container-fluid">
        ...
      </div>
    </div>
  </div>
</div>