Skip to content

chore: migrate templates from .tile shim to Bulma 1.x .columns#80

Merged
jmeridth merged 1 commit into
mainfrom
chore/migrate-tiles-to-columns
May 30, 2026
Merged

chore: migrate templates from .tile shim to Bulma 1.x .columns#80
jmeridth merged 1 commit into
mainfrom
chore/migrate-tiles-to-columns

Conversation

@jmeridth
Copy link
Copy Markdown
Member

Closes #66

What

Replace the deprecated `.tile` markup in `_layouts/default.html`, `_layouts/aggregate_default.html`, `_layouts/author_default.html`, and `_includes/authors.html` with Bulma 1.x `.columns` / `.column`. The outer `tile is-ancestor is-vertical` wrapper becomes a plain block container; the `tile is-parent` row becomes `

`; the 8/4 children become `
` and `
`; the `tile is-parent is-vertical sidebar` becomes a plain `
`; and the `tile is-child widget` widget wrappers become plain `
`. Delete the 46-line tile-system shim block from `assets/css/custom.css`.

Why

PR #65 vendored Bulma 1.0.4, which removed the `.tile` layout primitives entirely. To preserve the existing layouts without rewriting templates in that PR, a temporary CSS shim was added to `custom.css`. This PR completes the migration so templates use Bulma's actual grid, and the shim block is no longer needed in the repo.

Notes

  • The `.tile.is-ancestor.is-vertical` outer wrapper had a single purpose: vertically stacking the nav above the content row. `
    ` elements stack by default in normal flow, so the wrapper has been removed entirely rather than translated to `.columns.is-vertical` — that exists but adds complexity for no reason.
  • `.sidebar` and `.widget` are kept as plain div selectors so existing CSS hooks (e.g. `.sidebar { padding: 0 0.75rem 0.75rem 0.75rem !important; }` in custom.css) continue to apply unchanged.
  • Bulma's `.columns` collapses to a single column at mobile widths (< 769px) and goes side-by-side at tablet+, matching the tile system's responsive behavior exactly. No additional `is-mobile` / `is-desktop` modifiers needed.
  • `_layouts/aggregate_default.html` and `_layouts/author_default.html` still inline their own nav copy rather than using `_includes/nav.html`. This pre-existing duplication is unchanged.

Testing

Verified locally with cache wiped (`rm -rf _site .jekyll-cache`) and `bundle exec jekyll serve --livereload --future`:

  • Home page renders with sidebar (Recent Posts, Authors) on the right at desktop widths, stacked below at mobile widths.
  • Any author page (`/_chrismissal/`, `/_jimmybogard/`, etc.) renders with sidebar (Recent Author Posts, Recent Site Posts, Authors) on the right at desktop widths, stacked below at mobile widths.
  • Any aggregate post page renders with the same sidebar pattern.
  • Navbar (with theme toggle) still renders correctly across all three layouts.
  • Theme toggle still cycles light → dark → system with the right visual result on the new column layout.
  • Burger menu still toggles correctly at mobile widths.
  • `grep -rn '\btile\b' _layouts _includes assets/css` returns zero matches.

Closes #66

## What

Replace the deprecated `.tile` markup in _layouts/default.html, _layouts/aggregate_default.html, _layouts/author_default.html, and _includes/authors.html with Bulma 1.x `.columns` / `.column`. The outer `tile is-ancestor is-vertical` wrapper becomes a plain block container; the `tile is-parent` row becomes `<div class="columns">`; the 8/4 children become `<div class="column is-8 main">` and `<div class="column is-4">`; the `tile is-parent is-vertical sidebar` becomes a plain `<div class="sidebar">`; and the `tile is-child widget` widget wrappers become plain `<div class="widget">`. Delete the 46-line tile-system shim block from assets/css/custom.css.

## Why

PR #65 vendored Bulma 1.0.4, which removed the `.tile` layout primitives entirely. To preserve the existing layouts without rewriting templates in that PR, a temporary CSS shim was added to custom.css. This commit completes the migration so templates use Bulma's actual grid, and the shim block is no longer needed in the repo.

## Notes

- The `.tile.is-ancestor.is-vertical` outer wrapper had a single purpose: vertically stacking the nav above the content row. `<div>` elements stack by default in normal flow, so the wrapper has been removed entirely rather than translated to `.columns.is-vertical` — that exists but adds complexity for no reason.
- `.sidebar` and `.widget` are kept as plain div selectors so existing CSS hooks (e.g. `.sidebar { padding: 0 0.75rem 0.75rem 0.75rem !important; }` in custom.css) continue to apply unchanged.
- Bulma's `.columns` collapses to a single column at mobile widths (< 769px) and goes side-by-side at tablet+, matching the tile system's responsive behavior exactly. No additional `is-mobile` / `is-desktop` modifiers needed.
- _layouts/aggregate_default.html and _layouts/author_default.html still inline their own nav copy rather than using _includes/nav.html. This pre-existing duplication is unchanged.

Signed-off-by: jmeridth <jmeridth@gmail.com>
@jmeridth jmeridth self-assigned this May 30, 2026
@jmeridth jmeridth marked this pull request as ready for review May 30, 2026 05:23
@jmeridth jmeridth merged commit d00ab27 into main May 30, 2026
6 checks passed
@jmeridth jmeridth deleted the chore/migrate-tiles-to-columns branch May 30, 2026 05:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Migrate template layout from deprecated .tile to Bulma 1.x .columns

1 participant