Typography | Tsk Civil

Misc

Text truncate

Apply .text-truncate to any text element to crop your text with ellipse if it is larger than line width.

Praeterea iter est quasdam res quas ex communi.

<div class="text-truncate">Your long text</div>

Font Size

Apply .fs-{value} to any element, where {value} can be any of:

8 9 10 11 12 13 14 15 16 17 18 19
20 22 24 25 26 28
30 35 40 45 50
60 70 80 90;

font size 10px	`<p class="fs-10">`Font Size 10px`</p>`
Font Size 18px	`<p class="fs-18">`Font Size 18px`</p>`
Font Size 26px	`<p class="fs-26">`Font Size 26px`</p>`

Font weight

Apply .fw-{value} to any element, where {value} can be any of: 100, 200, 300, 400, 500, 600, 700, 800, 900

Font Weight 100	`<p class="lead fw-100">`Font Weight 100`</p>`
Font Weight 300	`<p class="lead fw-300">`Font Weight 300`</p>`
Font Weight 500	`<p class="lead fw-500">`Font Weight 500`</p>`
Font Weight 700	`<p class="lead fw-700">`Font Weight 700`</p>`
Font Weight 900	`<p class="lead fw-900">`Font Weight 900`</p>`

Line height

Apply .lh-{size} to any element, where {size} can be any of:

0, 1, 2, 3, 4, 5
15, 25, 35, 45
11, 12, 13, 14, 15, 16, 17, 18, 19
22, 24, 26, 28

To better understanding of values, take a look at class definition of some of them:

.lh-1 { line-height: 1; }
.lh-15 { line-height: 1.5; }
.lh-24 { line-height: 2.4; }

Line Height 1	`<p class="lh-1">`line height 1`</p>`
Line Height 1.8	`<p class="lh-1.8">`line height 1.8`</p>`
Line Height 2	`<p class="lh-2">`line height 2`</p>`
Line Height 2.5	`<p class="lh-2.5">`line height 2.5`</p>`