Introduction

TDCMCSS is a lightweight, responsive, and modern CSS framework. It is designed to be easy to use and customize, with a focus on typography, usability, and overall aesthetics.

Link to google documentation: TDCMCSS.io Guide Doc

browser Support

Colors

Grids

Basic 12 Grid

<div class="grid__row">
  <div class="col-1">1/12</div>
  <div class="col-2">2/12</div>
  ...
</div>

Basic 10 Grid

<div class="grid__row cols-10">
  <div class="col-1">1/10</div>
  <div class="col-2">2/10</div>
  ...
</div>

Offset

<div class="grid__row">
  <div class="col-6 col-offset-3">6/12</div>
</div>

No Gutters

<div class="grid__row g-0">
  <div class="col-4">4/12</div>
  <div class="col-4">4/12</div>
  ...
</div>

You can use class .g-(0, 4, 8, 12, 16, 20, 24, 28, 32) to change grid__row spacing.

Equal

<div class="grid__row">
  <div class="col">1/7</div>
  <div class="col">1/7</div>
  ...
</div>

Nested

<div class="grid__row">
  <div class="col-9">
    <div class="grid__row">
      <div class="col-6">1/2*9/12</div>
      <div class="col-6">1/2*9/12</div>
    </div>
  </div>
  <div class="col-3">3/12</div>
</div>

Media ( Bootstrap )

The media component is very important, but there is no room for improvement, we can use the media of Bootstrap. In addition, We added a media__avatar class, we can use it as needed.

Media heading LEFT

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media">
  <div class="media__left">
    <a href="#" class="media__avatar">
      <img class="media__object" alt="" src="...">
    </a>
  </div>
  <div class="media__body">
    <h4 class="media__heading">Media heading</h4>
    <p>...</p>
  </div>
</div>

Media heading RIGHT

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading NESTED

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading CHILD

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Typography

Headings

<h1>h1 Example Heading <small>subtitle</small></h1>
<h2>h2 Example Heading <small>subtitle</small></h2>
<h3>h3 Example Heading <small>subtitle</small></h3>
<h4>h4 Example Heading <small>subtitle</small></h4>
<h5>h5 Example Heading <small>subtitle</small></h5>
<h6>h6 Example Heading <small>subtitle</small></h6>

Buttons

Colors Options

<button class="btn default">default</button>
<button class="btn primary">primary</button>
...
<button class="btn btn_link">link</button>

Colors Outline Options

<button class="btn btn_outline default">default</button>
<button class="btn btn_outline primary">primary</button>
...

Pill Button

<button class="btn btn_pill default">default</button>
<button class="btn btn_pill btn_outline primary">primary</button>
...

Button Group

<div class="btns">
  <button class="btn default">default</button>
  <button class="btn default">default</button>
  <button class="btn default">default</button>
</div>
...

Button Group Vertical

<div class="btns btns_vertical">
  <button class="btn default">default</button>
  <button class="btn default">default</button>
  <button class="btn default">default</button>
</div>
...

Button Group Outline

<div class="btns">
  <button class="btn btn_outline default">default</button>
  <button class="btn btn_outline default">default</button>
  <button class="btn btn_outline default">default</button>
</div>
...

Button Group Outline Vertical

<div class="btns btns_vertical">
  <button class="btn btn_outline default">default</button>
  <button class="btn btn_outline default">default</button>
  <button class="btn btn_outline default">default</button>
</div>
...

Forms

Basic Elements

<div class="form__horizontal">
  <div class="form__group">
    <label for="" class="form__label col-2">Normal Input</label>
    <div class="col-10">
      <input class="form__control" type="text" />
    </div>
  </div>
  ...
</div>

Checkbox & Radio

The structures of checkbox/radio in TDCMCSS allow you customize its styles.

<div class="checkbox">
  <input type="checkbox" id="checkbox1" value="">
  <label for="checkbox1">Option one ...</label>
</div>
<div class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" checked="">
  <label for="optionsRadios1">Option one ...</label>
</div>

<div class="checkbox__inline">
  <input type="checkbox" id="checkbox1" value="">
  <label for="checkbox1">Option one ...</label>
</div>
<div class="radio__inline">
  <input type="radio" name="optionsRadios" id="optionsRadios1" checked="">
  <label for="optionsRadios1">Option one ...</label>
</div>

Form Inline

Tables

Basic

<table class="table table_hover">
...
</table>

Bordered

<table class="table table_bordered">
...
</table>

Rounded

<table class="table table_bordered table_rounded">
...
</table>

Striped

<table class="table table_bordered table_rounded table_striped table_hover">
...
</table>

Boxes

Single box

<div class="box">box</div>

Box Group

<div class="boxes">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

<div class="boxes transparent">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>
<div class="boxes inverted">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

Colorful

<div class="boxes border-primary">
  <div class="box border-primary">box</div>
  <div class="box border-primary">box</div>
  <div class="box border-primary">box</div>
</div>
...

<div class="boxes bg-primary text-white">
  <div class="box bg-primary">box</div>
  <div class="box bg-primary">box</div>
  <div class="box bg-primary">box</div>
</div>

Styles

<div class="boxes default">
  <div class="box box_header">box</div>
  <div class="box box_body">box</div>
  <div class="box box_footer">box</div>
</div>
<div class="boxes secondary">
  <div class="box box_header">box</div>
  <div class="box box_body">box</div>
  <div class="box box_footer">box</div>
</div>

Nested boxes

<div class="boxes default">
  <div class="box">
    <div class="boxes default">
      <div class="box">box nested</div>
    </div>
  </div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

Warning box

<p class="warning-box warning-box_text-red-darker">
  <span>    
    <code></code>
  </span>
</p>

Utilities