Reorganized some notes

2026-06-03 14:25:30 +02:00 · 2026-06-03 14:25:30 +02:00 · 0f1efefc1d
commit 0f1efefc1d
parent 0b4734927a
25 changed files with 35 additions and 66 deletions
--- a/website-code/Bulma
+++ b/website-code/Bulma
@ -0,0 +1,96 @@
+# 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
+
+