Reorganized some notes
This commit is contained in:
parent
0b4734927a
commit
0f1efefc1d
25 changed files with 35 additions and 66 deletions
96
website-code/Bulma and SASS typography control.md
Normal file
96
website-code/Bulma and SASS typography control.md
Normal file
|
|
@ -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
|
||||
|
||||
|
||||
115
website-code/Bulma frontend components.md
Normal file
115
website-code/Bulma frontend components.md
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
Bulma is a modern CSS framework based on Flexbox.
|
||||
https://bulma.io/
|
||||
https://github.com/jgthms/bulma
|
||||
|
||||
# Common frontend components
|
||||
|
||||
**Layout:**
|
||||
|
||||
- **Container** – Centers and constrains content width.
|
||||
- **Section** – Large spacing block for grouping content.
|
||||
- **Hero** – Full-width banner for headers or landing pages.
|
||||
- **Footer** – Page footer area.
|
||||
- **Columns** – Responsive grid system using Flexbox.
|
||||
- **Tile** – Complex layouts for cards and media objects.
|
||||
|
||||
|
||||
**Navigation:**
|
||||
|
||||
- **Navbar** – Responsive navigation bar with branding and links.
|
||||
- **Tabs** – Horizontal tab navigation.
|
||||
- **Breadcrumb** – Hierarchical navigation trail.
|
||||
- **Pagination** – Page navigation controls.
|
||||
|
||||
|
||||
**Forms:**
|
||||
|
||||
- **Input** – Text fields, email, password, etc.
|
||||
- **Textarea** – Multi-line text input.
|
||||
- **Select** – Dropdown menus.
|
||||
- **Checkbox & Radio** – Form controls.
|
||||
- **File Upload** – Styled file input.
|
||||
- **Buttons** – Primary, link, outlined, etc.
|
||||
- **Field & Control** – Form grouping and alignment.
|
||||
|
||||
|
||||
**Content:**
|
||||
|
||||
- **Typography** – Titles, subtitles, headings, text helpers.
|
||||
- **Image** – Responsive image container.
|
||||
- **Icon** – Font Awesome or custom icons.
|
||||
- **Media Object** – Layout for image + text.
|
||||
- **Notification** – Alert messages.
|
||||
- **Tag** – Small label elements.
|
||||
- **Progress Bar** – Loading indicators.
|
||||
|
||||
|
||||
**Cards & Panels:**
|
||||
|
||||
- **Card** – Content container with header, body, footer.
|
||||
- **Panel** – Sidebar-like component for menus or lists.
|
||||
- **Box** – Simple bordered container.
|
||||
|
||||
|
||||
**Modals & Interactives:**
|
||||
|
||||
- **Modal** – Popup dialog.
|
||||
- **Dropdown** – Interactive menu.
|
||||
- **Message** – Dismissible alert box.
|
||||
- **Tooltip** – Hover info (requires JS).
|
||||
|
||||
|
||||
**Helpers & Utilities:**
|
||||
|
||||
- **Spacing Helpers** – Margin/padding classes.
|
||||
- **Color Helpers** – Text and background colors.
|
||||
- **Visibility Helpers** – Show/hide on breakpoints.
|
||||
- **Flexbox Helpers** – Alignment and distribution.
|
||||
|
||||
## Component Reference Table
|
||||
|
||||
| **Component** | **Description** | **Bulma Classes** | **Sass Customization Tips** |
|
||||
| ---------------------- | ------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------- |
|
||||
| <br>**Layout** | | | |
|
||||
| Container | Centers content and sets max width | `.container` | `$container-max-width` |
|
||||
| Section | Large spacing block for grouping content | `.section` | `$section-padding` |
|
||||
| Hero | Full-width banner for headers or landing pages | `.hero`, `.hero-body` | `$hero-body-padding`, `$hero-background-color` |
|
||||
| Footer | Page footer area | `.footer` | `$footer-background-color`, `$footer-padding` |
|
||||
| Columns | Responsive grid system using Flexbox | `.columns`, `.column` | `$column-gap`, `$column-padding` |
|
||||
| Tile | Complex layouts for cards and media objects | `.tile` | `$tile-spacing` |
|
||||
| <br>**Navigation** | | | |
|
||||
| Navbar | Responsive navigation bar with branding and links | `.navbar`, `.navbar-item` | `$navbar-background-color`, `$navbar-height` |
|
||||
| Tabs | Horizontal tab navigation | `.tabs`, `.is-active` | `$tabs-border-color`, `$tabs-link-color` |
|
||||
| Breadcrumb | Hierarchical navigation trail | `.breadcrumb` | `$breadcrumb-item-color`, `$breadcrumb-separator-color` |
|
||||
| Pagination | Page navigation controls | `.pagination`, `.pagination-link` | `$pagination-color`, `$pagination-hover-color` |
|
||||
| <br>**Forms** | | | |
|
||||
| Input | Text fields, email, password, etc. | `.input` | `$input-background-color`, `$input-border-color` |
|
||||
| Textarea | Multi-line text input | `.textarea` | `$textarea-background-color` |
|
||||
| Select | Dropdown menus | `.select` | `$select-background-color` |
|
||||
| Checkbox & Radio | Form controls | `.checkbox`, `.radio` | `$control-margin` |
|
||||
| File Upload | Styled file input | `.file` | `$file-cta-background-color`, `$file-name-color` |
|
||||
| Buttons | Primary, link, outlined, etc. | `.button`, `.is-primary`, `.is-link` | `$button-background-color`, `$button-border-radius` |
|
||||
| Field & Control | Form grouping and alignment | `.field`, `.control` | `$field-margin`, `$control-padding` |
|
||||
| <br>**Content** | | | |
|
||||
| Typography | Titles, subtitles, headings, text helpers | `.title`, `.subtitle`, `.has-text-*` | `$title-color`, `$subtitle-color` |
|
||||
| Image | Responsive image container | `.image` | `$image-radius` |
|
||||
| Icon | Font Awesome or custom icons | `.icon` | `$icon-size` |
|
||||
| Media Object | Layout for image + text | `.media`, `.media-left`, `.media-content` | `$media-spacing` |
|
||||
| Notification | Alert messages | `.notification` | `$notification-background-color` |
|
||||
| Tag | Small label elements | `.tag` | `$tag-background-color`, `$tag-radius` |
|
||||
| Progress Bar | Loading indicators | `.progress` | `$progress-bar-background-color` |
|
||||
| <br>**Cards & Panels** | | | |
|
||||
| Card | Content container with header, body, footer | `.card`, `.card-header`, `.card-footer` | `$card-radius`, `$card-shadow` |
|
||||
| Panel | Sidebar-like component for menus or lists | `.panel`, `.panel-block` | `$panel-background-color`, `$panel-border-color` |
|
||||
| Box | Simple bordered container | `.box` | `$box-radius`, `$box-shadow` |
|
||||
| Interactive | | | |
|
||||
| Modal | Popup dialog | `.modal`, `.modal-content` | `$modal-background-color`, `$modal-radius` |
|
||||
| Dropdown | Interactive menu | `.dropdown`, `.dropdown-menu` | `$dropdown-background-color`, `$dropdown-radius` |
|
||||
| Message | Dismissible alert box | `.message`, `.message-header` | `$message-background-color`, `$message-radius` |
|
||||
| Tooltip | Hover info (requires JS) | `.has-tooltip` | `$tooltip-background-color`, `$tooltip-radius` |
|
||||
| <br>**Helpers** | | | |
|
||||
| Spacing Helpers | Margin/padding classes | `.m-*`, `.p-*` | `$spacing-scale` |
|
||||
| Color Helpers | Text and background colors | `.has-text-*`, `.has-background-*` | `$colors` map |
|
||||
| Visibility | Show/hide on breakpoints | `.is-hidden-*`, `.is-flex-*` | `$breakpoints` map |
|
||||
| Flexbox Helpers | Alignment and distribution | `.is-flex`, `.is-justify-*`, `.is-align-*` | `$flexbox-helpers` |
|
||||
|
||||
237
website-code/Working a Hugo website.md
Normal file
237
website-code/Working a Hugo website.md
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
# Working a Hugo website
|
||||
|
||||
## The Rendering Pipeline
|
||||
|
||||
- Global settings are defined in `hugo.toml`, like theme, params, baseURL, and build/minify behavior.
|
||||
- `baseof.html`[^2] provides the core HTML structure shared by *all* pages, including:
|
||||
- HTML boilerplate
|
||||
- Site-wide metadata (charset, viewport)
|
||||
- Title generation
|
||||
- CSS and navigation bar
|
||||
- A placeholder block `{{ block "main" . }}{{ end }}` for page-specific content
|
||||
- Footer
|
||||
- `index.html` is the homepage template - It extends the base template and fills in the main block with homepage-specific content organized in partials.
|
||||
|
||||
**Processing**
|
||||
1. Hugo renders `layouts/index.html` , which starts with `{{ define "main" }}` to define a main block to replace the one in `baseof.html`.
|
||||
2. Hugo renders the base template
|
||||
3. `index.html` pulls in partials from `layouts/partials/…`.
|
||||
4. Partials pull data from `data/homepage.yaml` (and `.Site.Params` in `hugo.toml`).
|
||||
5. HTML files use compiled CSS from `assets/custom.scss`[^1].
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
## To add a section
|
||||
|
||||
To add (or remove) a section, modify the following files:
|
||||
|
||||
1. Add the content data for the new section in `data/homepage.yaml`
|
||||
2. Create `layouts/partials/newSection.html`
|
||||
3. Update `layouts/index.html` to call the new partial at the place you want it to show
|
||||
|
||||
|
||||
---
|
||||
|
||||
## File-by-file: roles and interplay
|
||||
|
||||
### 1) `assets/custom.scss` (your SCSS entry point)
|
||||
|
||||
- **What it is:** An SCSS source file that Hugo compiles into CSS using **Hugo Pipes** with **Dart Sass** (you’re on Hugo Extended via v0.154.2, so that’s supported).
|
||||
- **What it does:**
|
||||
- Imports **Bulma v1** (either via `@use`/`@forward` if you vendored it under `assets/`, or a pre-bundled CSS file if you prefer).
|
||||
- Sets Bulma variables (colors, spacing, breakpoints) **before** importing Bulma to override defaults.
|
||||
- Adds your theme overrides for Fresh components/sections and custom utilities.
|
||||
- **How it’s wired in:**\ A head partial (commonly something like `layouts/partials/head.html`) will contain Hugo Pipes calls:
|
||||
|
||||
{{ $styles := resources.Get "custom.scss" | toCSS (dict "targetPath" "assets/custom.css") | minify | fingerprint }}
|
||||
|
||||
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
|
||||
|
||||
This line is what **connects your SCSS to the HTML**. If you don’t see it yet, add it to your head partial.
|
||||
|
||||
> **Override rules:** If the theme also ships a `assets/custom.scss`, your project-level `assets/custom.scss` **overrides the theme’s** because of Hugo’s lookup order.
|
||||
|
||||
---
|
||||
|
||||
### 2) `layouts/index.html` (homepage template)
|
||||
|
||||
- **What it is:** The template used for the site’s root (`/`). Hugo’s template lookup will use this file if present in your project (it **overrides the theme’s** `index.html`).
|
||||
- **What it does:**
|
||||
- Defines the **page structure** of your homepage.
|
||||
- **Includes partials** that render each section (hero, features, testimonials, CTAs).
|
||||
- Passes data to partials—commonly **from** `.Site.Data.homepage` (i.e., `data/homepage.yaml`) or `.Site.Params`.
|
||||
- **Typical pattern:**
|
||||
|
||||
{{ define "main" }}
|
||||
|
||||
{{ partial "hero.html" (dict "ctx" . "data" .Site.Data.homepage.hero) }}
|
||||
|
||||
{{ partial "features.html" (dict "ctx" . "data" .Site.Data.homepage.features) }}
|
||||
|
||||
{{ partial "cta.html" (dict "ctx" . "data" .Site.Data.homepage.cta) }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
This shows how the template **connects to your data file**.
|
||||
|
||||
---
|
||||
|
||||
### 3) `layouts/partials/` (reusable sections & head)
|
||||
|
||||
- **What it is:** A folder of small templates used by pages (and other partials).
|
||||
- **What it does:**
|
||||
- Renders **modular sections** like `hero.html`, `navbar.html`, `footer.html`, `features.html`, `pricing.html`, etc.
|
||||
- Contains **`head.html`** or similar where you wire in **`assets/custom.scss`** via Hugo Pipes (see above).
|
||||
- Optionally injects JavaScript assets (minified/fingerprinted in a similar way).
|
||||
- **How it connects:**\ Partials receive a context. If you pass a dict with `"data"`, the partial can render purely from that structure:
|
||||
|
||||
{{ $d := .data }}
|
||||
|
||||
<section class="section hero is-primary">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1 class="title">{{ $d.title }}</h1>
|
||||
|
||||
<p class="subtitle">{{ $d.subtitle }}</p>
|
||||
|
||||
{{ with $d.buttons }}
|
||||
|
||||
<div class="buttons">
|
||||
|
||||
{{ range . }}
|
||||
|
||||
<a class="button is-{{ .color }}" href="{{ .url }}">{{ .label }}</a>
|
||||
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
This keeps your **content in `data/homepage.yaml`** and your **structure in partials**.
|
||||
|
||||
> **Override rules:** Project partials in `layouts/partials/` override theme partials of the same path/name. This is how you customize Fresh without forking the theme.
|
||||
|
||||
---
|
||||
|
||||
### 4) `data/homepage.yaml` (structured content for the homepage)
|
||||
|
||||
- **What it is:** A data file (YAML) containing **content & per-section settings** for the homepage: texts, images, lists, buttons, visibility flags.
|
||||
- **What it does:**
|
||||
- Decouples content from templates: editors can update text without touching HTML/SCSS.
|
||||
- Supplies data to partials via `.Site.Data.homepage` or by passing nested keys.
|
||||
- **Typical shape (example):**
|
||||
|
||||
hero:
|
||||
|
||||
title: "Build fast with Fresh + Bulma v1"
|
||||
|
||||
subtitle: "A clean landing page powered by Hugo"
|
||||
|
||||
buttons:
|
||||
|
||||
- label: "Get Started"
|
||||
|
||||
url: "/docs"
|
||||
|
||||
color: "primary"
|
||||
|
||||
- label: "GitHub"
|
||||
|
||||
url: "https://github.com/…"
|
||||
|
||||
color: "light"
|
||||
|
||||
|
||||
|
||||
features:
|
||||
|
||||
items:
|
||||
|
||||
- icon: "rocket"
|
||||
|
||||
title: "Speedy"
|
||||
|
||||
text: "Hugo builds are blazing fast."
|
||||
|
||||
- icon: "feather"
|
||||
|
||||
title: "Lightweight"
|
||||
|
||||
text: "No heavy JS framework required."
|
||||
|
||||
- **How it connects:**\ A partial will read it like `.Site.Data.homepage.hero.title` (or via the `"data"` key passed from the index template).
|
||||
|
||||
> **Override rules:** Your project’s `data/` completely defines the data used. If the theme ships default YAML in its `data/`, **your project’s files win**.
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Common customization patterns
|
||||
|
||||
- **Change copy or lists** → edit `data/homepage.yaml`.
|
||||
- **Change section structure or classes** → edit the corresponding `layouts/partials/*.html`.
|
||||
- **Add a new section** →
|
||||
1. create a new partial `layouts/partials/your-section.html`,
|
||||
2. add data under `data/homepage.yaml` (e.g., `yourSection:`),
|
||||
3. include the partial from `layouts/index.html`: {{ partial "your-section.html" (dict "ctx" . "data" .Site.Data.homepage.yourSection) }}
|
||||
- **Adjust colors/spacing/fonts** → edit `assets/custom.scss` (set Bulma variables before importing Bulma; add your custom rules after).
|
||||
- **Add/optimize assets** → wire them in the head/footer partials with Hugo Pipes (minify, fingerprint).
|
||||
|
||||
---
|
||||
|
||||
## Notes for Bulma v1 + Dart Sass + Fresh
|
||||
|
||||
- **Variable overrides:**\ With Dart Sass, prefer `@use`/`@forward`:
|
||||
|
||||
// assets/custom.scss
|
||||
|
||||
@use "bulma/sass" with (
|
||||
|
||||
$primary: #4e7cf3,
|
||||
|
||||
$family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif,
|
||||
|
||||
$body-background-color: #fff
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
// Your component overrides after Bulma is loaded
|
||||
|
||||
.navbar.is-transparent { background-color: transparent; }
|
||||
|
||||
Ensure Bulma’s source is available under `assets/` (e.g., `assets/bulma/…`) or adjust the import path accordingly.
|
||||
|
||||
- **Lookup order helps you customize safely:**\ Put overrides in your project (`layouts`, `assets`, `data`). You avoid forking the theme and keep upgrades simpler.
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Quick sanity checklist
|
||||
|
||||
- **Head partial includes your SCSS:** Confirm a link tag is generated via `resources.Get "custom.scss" | toCSS …`.
|
||||
- **Homepage uses your `index.html`:** Run `hugo server` and check logs for which template is used; or temporarily change a heading to confirm it’s picked.
|
||||
- **Partials receive data:** Log output with `{{ printf "%#v" .data }}` inside a partial (temporarily) to confirm data structure.
|
||||
- **Data keys match partial expectations:** If a partial expects `.data.items`, ensure `data/homepage.yaml` has `items:` under the right section.
|
||||
- **Minify/fingerprint on production:** Useful for caching; keep `minify = true` and use `fingerprint`.
|
||||
|
||||
---
|
||||
|
||||
If you share a snippet of your current `layouts/index.html`, one sample partial, and the top of `assets/custom.scss`, I can review the wiring and suggest the cleanest way to structure imports for Bulma v1 and your Fresh overrides.
|
||||
|
||||
[^1]: via Hugo Pipes / Dart Sass
|
||||
|
||||
[^2]: In `/layouts/_default/baseof.html`
|
||||
Loading…
Add table
Add a link
Reference in a new issue