4.2 KiB
4.2 KiB
Typography with Bulma and SASS
https://bulma.io/documentation/ https://github.com/jgthms/bulma https://www.w3schools.com/sass/sass_intro.asp
Bulma provides several options for configuring typography, both through utility classes and Sass variables for customization. Most of the time, you apply Bulma classes directly in your HTML, because Bulma is a CSS framework that defines classes to be used in HTML.
Example:
<p class="has-text-weight-bold has-text-centered">
Bold and centered text
</p>
You would use the CSS Selectors (in your CSS files) if you want to customize the Bulma classes, for example:
# Override existing Bulma style
.has-text-weight-bold {
color: #ff0000; /* Custom override */
}
# Adding custom styles to elements that already use Bulma classes
.title.has-text-centered {
text-transform: uppercase;
}
# Creating custom components to extend Bulma
.custom-card .title {
font-family: 'Lora', serif;
}
1. Bulma Typography Classes
Bulma includes these predefined classes for text styling:
| Description | CSS Selector | HTML Usage |
|---|---|---|
| Title | .title |
<h1 class="title">Heading</h1> |
| Subtitle | .subtitle |
<h2 class="subtitle">Subheading</h2> |
| Title size modifiers | .title.is-1 to .title.is-6 |
<h1 class="title is-1">Heading</h1> |
| Subtitle size modifiers | .subtitle.is-1 to .subtitle.is-6 |
<h2 class="subtitle is-3">Subheading</h2> |
| Alignment left | .has-text-left |
<p class="has-text-left">Text</p> |
| Alignment center | .has-text-centered |
<p class="has-text-centered">Text</p> |
| Alignment right | .has-text-right |
<p class="has-text-right">Text</p> |
| Color primary | .has-text-primary |
<p class="has-text-primary">Text</p> |
| Color danger | .has-text-danger |
<p class="has-text-danger">Text</p> |
| Weight light | .has-text-weight-light |
<p class="has-text-weight-light">Text</p> |
| Weight normal | .has-text-weight-normal |
<p class="has-text-weight-normal">Text</p> |
| Weight bold | .has-text-weight-bold |
<p class="has-text-weight-bold">Text</p> |
| Uppercase text | .is-uppercase |
<p class="is-uppercase">Text</p> |
| Lowercase text | .is-lowercase |
<p class="is-lowercase">Text</p> |
| Capitalized text | .is-capitalized |
<p class="is-capitalized">Text</p> |
| Text size modifiers | .is-size-1 to .is-size-7 |
<p class="is-size-3">Text</p> |
| Responsive text size | .is-size-4-mobile etc. |
<p class="is-size-4-mobile">Text</p> |
2. Sass typography variables
You can customize typography globally using Bulma’s Sass variables. This happens in your custom .scss file. Example:
$family-primary: 'Roboto', sans-serif;
$body-size: 16px;
$weight-bold: 700;
@import "bulma";
Font Family
$family-primary– Main font$family-secondary– Alternative font$family-code– Monospace font
Font Sizes
$size-1to$size-7– Heading sizes$body-size– Base font size
Font Weights
$weight-light$weight-normal$weight-semibold$weight-bold
Line Height
$body-line-height
Text Colors
$text– Default text color$text-strong– Strong text color$link– Link color