menu

Type

THE BUTTER

  • .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

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

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

Formatting

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.
.weight-light
Light
Defined by @font-weight-light, default 300
.weight-normal
Normal
Defined by @font-weight, default 400
.weight-medium
Medium
Defined by @font-weight-medium, default 500
.weight-bold
Bold
Defined by @font-weight-bold, default 700
.face-italic
Italic
.normalsize
Normal size
(default set by @font-size multiplier).
.large
Large
.larger
Larger
.small
Small
.smaller
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.cam,
.a.cam,
.cam
A camouflage link. Or a camouflage span.
A linked element that has normal color of text, to tone it down.
.sup
Element sup
.del
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.

.ltr
Font family set to default @fontface. Direction set to ltr
.rtl
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>

<div class="rtl spaced">
	هذا رقم الهاتف مع بعض الفراغات <div class="dinline ltr">00962 8838 2888</div>
</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;
*/
.ellipsis();

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

/* if @rem-enabled is set to true produces
font-size: 1.2rem;
else
font-size: 12px; */
#rem>.font-size(1.2);

/* 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; 
};