• .f1 to .f6
  • .weight-normal .weight-light .weight-bold
  • .face-italic
  • .normalsize
  • .striped
  • .large .larger
  • .small .smaller
  • .a .cam
  • .ltr .rtl

Headers are left alone. Instead, use .f1 to .f6 to add header styling. This breaks away syntax from styling, which is very handy for SEO purposes.

  • .f1: Header 1

  • .f2: Header 2

  • .f3: Header 3

  • .f4: Header 4

  • .f5: Header 5
  • .f6: Header 6

Make normal, or light by adding .weight-normal, and .weight-light


Font weights use @support statements to fall back to exact multiple of 100s, in case font-variation-settings is not supported, so variable fonts can be used.
Defined by @font-weight-light, default 300
Defined by @font-weight, default 400
Defined by @font-weight-medium, default 500
Defined by @font-weight-bold, default 700
Normal size
(default set by @font-size multiplier).
Even smaller

HTML elements

The p tag is by default .spaced (@space bottom margin), and the section tag is extra spaced (@extraspace bottom margin).

HTML font-size is set to @htmlFontBase (default 62.5%). When screen width is larger than md (default 720px), the html font is multiplied by @resFontFactor (default 1.2).

a, .a
A link.
A span that looks like a link.
A camouflage link. Or a camouflage span.
A linked element that has normal color of text, to tone it down.
Element sup
Element deleted

Ltr and Rtl

These two classes are used when mixed content is in the same page. Those definitions are not mirrored. Combine with .dinline to get inline results of mixed content. Use this when you have dual lingual interface, but single language data. Or when displaying formatted phone numbers in RTL interfaces.

Font family set to default @fontface. Direction set to ltr
Font family set to default @fontface-ar. Direction set to rtl
Example of mixed content.
<div class="spaced">
	Here is some English text. 
	<div class="dinline rtl">وبعض العربي</div>

<div class="rtl spaced">
	هذا رقم الهاتف مع بعض الفراغات <div class="dinline ltr">00962 8838 2888</div>
Here is some English text.
وبعض العربي
هذا رقم الهاتف مع بعض الفراغات
00962 8838 2888

Mix and match

<h1 class="weight-light f2 red">The fox jumped already</h1>
<h3 class="weight-normal larger blue">Over the rabbit</h3>
<h6 class="f2 weight-normal">The title is <span class="rtl f1">ما شاء الله</span></h6>
<div class="f3 green">The purple roses <span class="f5 light">Unleashed</span></div>

The fox jumped already

Over the rabbit

The title is ما شاء الله
The purple roses Unleashed

LESS functions

Use the following functions in LESS as mixins when needed.

/* this produces:
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

/* if @enable-res-fonts and @rem-enabled is set to true produces
font-size: 2rem * @resFontFactor; */

/* if @rem-enabled is set to true produces
font-size: 1.2rem;
font-size: 12px; */

/* add new multipliers to @custom-font-multiplier set, 
to have more multiplier font sizes using same formula,
produces class .mynewFont with 4.2 rem, or 42px; */
@custom-font-multiplier: {
	mynewFont: 4.2; 

/* this set is looped to create .weight-[key]: font-weight: [value] */
@font-weight-set: {
	light: 300;
	normal: 400;
	medium: 500;
	bold: 700;
	// e.g. adding this, produces .weight-mynewblack class
	mynewblack: 950;