96 lines
4.2 KiB
Markdown
96 lines
4.2 KiB
Markdown
# 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:
|
||
```html
|
||
<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:
|
||
```css
|
||
|
||
# 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:
|
||
```scss
|
||
$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-1` to `$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
|
||
|
||
|