iso27diy-corp/Website/Code/Bulma and SASS typography control.md

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-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