Typography
The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Type | Class Format | Description |
|---|---|---|
| Font Family | .al-ff-{fontname} | Apply custom font-family |
| Font Size | .al-fs-{value} | Font-size in rem |
| Writing Mode | .al-text-vertical-{mode} | Writing mode control |
| Text Orientation | .al-text-orientation-upright | Text upright orientation |
| Text Overflow Horizontal | .al-text-overflow-hidden | Horizontal text overflow |
| Text Overflow Vertical | .al-text-overflow-hidden-vertical / .al-text-overflow-hidden-vertical-{value} | Vertcial text overflow |
| Bootstrap Colors | .text-{color} | Bootstrap native colors |
| Both-Mode Text Colors | .al-text-{color}-both | Color stable across light/dark modes |
Sass Reference
assets/scss/_typography.scss
Copy
Class Usage Reference
| Class | Output |
|---|---|
| .al-ff-roboto | font-family: Roboto |
| .al-ff-cairo | font-family: Cairo |
| .al-fs-16 | font-size: 1rem |
| .al-fs-18 | font-size: 1.125rem |
| .al-text-vertical-rl | writing-mode: vertical-rl |
| .al-text-orientation-upright | text-orientation: upright |
| .al-text-overflow-hidden | text-overflow: ellipsis, white-space: nowrap, overflow: hidden; |
| .al-text-overflow-hidden-vertical | -webkit-line-clamp: 1, -webkit-box-orient: vertical; |
| .al-text-overflow-hidden-vertical-2 | -webkit-line-clamp: 2; |
| .text-primary | Bootstrap color |
| .al-text-primary-both | color: $primary-dark |
| .al-text-white-both | color: #fff |
| .al-text-black-both | color: #000 |
Examples
Font Family
Roboto Font
Jura Font
Reem kufi fun Font (for arabic) | خط ريم كوفي فن
Cairo Font (for Arabic) | خط القاهرة (لللغة العربية)
Copy
Roboto Font
Jura Font
Reem kufi fun Font
Cairo Font (for Arabic) | خط القاهرة (لللغة العربية)
Font Size
Font Size 0.563rem (.al-fs-9)
Font Size 0.625rem (.al-fs-10)
Font Size 0.688rem (.al-fs-11)
Font Size 0.75rem (.al-fs-12)
Font Size 0.813rem (.al-fs-13)
Font Size 0.875rem (.al-fs-15)
Font Size 0.938rem (.al-fs-15)
Font Size 1.0rem (.al-fs-16)
Font Size 1.063rem (.al-fs-17)
Font Size 1.125rem (.al-fs-18)
Copy
Font Size 0.563rem (.al-fs-9)
Font Size 0.625rem (.al-fs-10)
Font Size 0.688rem (.al-fs-11)
Font Size 0.75rem (.al-fs-12)
Font Size 0.813rem (.al-fs-13)
Font Size 0.875rem (.al-fs-15)
Font Size 0.938rem (.al-fs-15)
Font Size 1.0rem (.al-fs-16)
Font Size 1.063rem (.al-fs-17)
Font Size 1.125rem (.al-fs-18)
Writing Mode: Vertical RL, Sideways LR
Vertical RL
Sideways LR
Copy
Vertical RL
Sideways LR
Text Orientation: Upright
Upright
Copy
Upright
Text Overflow
Horizontal
Horizontal - Text Overflow
Vertical (upto 5 lines)
Single Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Two Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Three Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Four Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Five Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Copy
Horizontal - Text Overflow
// VerticalSingle Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Two Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Three Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Four Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Five Line text overflow - The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system. The Typography Utilities extend Bootstrap with custom font family, font size, writing modes, and text orientation classes. Built using Sass variables, these utilities provide full control over text appearance while following your project's design system.
Both-Mode Text Colors
Primary Dark Text (Both Mode)
Primary Dark Text (Both Mode)
Primary Dark Text (Both Mode)
Copy
Primary Dark Text (Both Mode)
Primary Dark Text (Both Mode)
Primary Dark Text (Both Mode)
Developer Notes
-
Font families are applied via .al-ff-{fontname}
-
Font sizes fully controlled from $sizes Sass map
-
Writing modes follow CSS logical writing-mode property
-
Both-mode text color utilities ensure consistent appearance across light/dark modes.
-
Fully extendable and scalable system for multilingual and RTL support
-
Global default applied for Arabic using html[lang="ar"] body { font-family: 'Cairo' }