# 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