Modifiers
Learn about modifiers, and how to best use them in the Base System
1.0 Modifiers
Modifiers are utility classes designed for quickly applying typography styles, such as text weight, underlining, and more. These classes can be applied directly to elements or used as combo-classes to enhance any typography. Modifiers offer a flexible way to fine-tune text styling within your designs.
2.0 Typography Weight Classes
The Base System includes typogrpahy sizes for desktop, as well as their responsive sizing for mobile. You can adjust these properties to suit your own requirements
| Class Name | Text Weight |
|---|---|
Text Weight Black | Black |
Text Weight Extra Bold | Extra Bold |
Text Weight Bold | Bold |
Text Weight Semibold | Semibold |
Text Weight Medium | Medium |
Text Weight Regular | Regular |
Text Weight Light | Light |
3.0 Typography Styles
Typography Weight includes predefined styles such as medium, bold, and other variations, allowing you to control the visual impact of your text. These weights are designed for both desktop and mobile, ensuring consistency across devices. You can adjust these settings to match the specific tone and hierarchy required for your project.
| Class Name | Text Style |
|---|---|
Text Underline | Underline |
Text Strike |
|
Text Italic | Italic |
3.0 General Usage
3.1 Element Type
Use the default html styles if they make sense for SEO purposes. Otherwise, use heading classes when the typography style doesn't match the default HTML tag. This means that heading classes and HMTL tags should match each other
Has semantic
<section>tag applied to aid web crawlers and improve accessibility and SEO.Prevents accidental nesting of sections within each other
Provides a clear and distinct visual icon within navigator panel
Provides a clear and distinct heirachy within the webpage
3.2 Class Naming
By default the base system includes a number of common sections that should be used when possible. For example, if most of your sections need 72px top and bottom padding, you should apply these styles to your 'Section Regular' class, since this is the class you will most commonly use through thhe project.
If your layout has unique requirements, like different spacing, colors or positioning, you can easily create a custom class. For example, if you are building an FAQ section with unique spacing requirements, just create the class 'Section FAQ'
Last updated
