Compact without a link
Markdown checklist before releasing minor UI changes.
Design System · Activity
Activity Cards
All card types and a live grid for selecting layouts on the homepage
Layout and content page: the same classes and scripts are used here as in the section on the homepage. Change the font and theme in the panel on the right; narrow the window, and the grid will recalculate. The text in the card headers is just placeholder text; you can remove it when previewing.
How to Use
First, select a type (stack, horizontal, compact, decor), then data-mp-cells (1–4) and
the order li in the list. Cards with data-mp-extra do not affect the height of the list until the “Show All” button is clicked.
For more details, see docs/mini-projects-cards.md.
Card Types
On the left is an example of a text card; on the right is the type name and an explanation of the classes.
mp-card--stack + mp-card--link
Stack with a link
A small script: drafts generated from keywords, without external APIs.
Stack with a link. Full-width preview, text at the bottom. For an external link:
mp-card--link and mp-card__ext in the title (as in the "Experience" block).
mp-card--stack without a link
Stack without a link
A collection of databases and a rollup for a weekly overview, for personal use only.
Stack without a link. Same view. Wrapper div or article, without
mp-card--link.
mp-card--horizontal + mp-card--link
Horizontal with a link
Local timer with short sounds and a feature to block unnecessary tabs.
Horizontal with a link. Thumbnail on the left, text on the right. On a narrow screen, the card stacks vertically.
mp-card--horizontal No link
Horizontal without a link
Static website with a schedule and an application form on a separate service.
Horizontal without a link. Same layout; the card does not link to an external URL.
mp-card--compact + mp-card--link
Compact with a link
Prefixes, numbering, and a dry run before writing files to disk.
Compact with a link. Text only, no mp-card__media. In the grid, often with
data-mp-cells="1".
mp-card--compact no link
Compact without a link. A short note or checklist without an external link.
mp-card--decor
Decorative cell. A placeholder in the grid, with no project or link. Inside
span.mp-card__decor-pattern.
Width in Cells
Attribute data-mp-cells sets li.mini-projects-grid__item specifies the desired width from 1 to 4 cells.
The script will not allow the card to be wider than the current row.
For responsive width, use data-mp-cells-sm (for 4 cells per row, ≥ 880 px) and
data-mp-cells-xs (for 2 cells, ≥ 520 px). The script selects the value based on the current number of cells in a row.
| The | When to use | Example |
|---|---|---|
data-mp-cells |
Wide screen (6 cells, ≥ 1180 px) | data-mp-cells="3" |
data-mp-cells-sm |
Medium screen (4 cells, ≥ 880 px) | data-mp-cells-sm="2" |
data-mp-cells-xs |
Narrow screen (2 cells, ≥ 520 px) | data-mp-cells-xs="1" |
Example: data-mp-cells="3" data-mp-cells-sm="2" — A card takes up 3 cells on a wide screen, 2 on a medium screen, and 1 on a narrow screen.
≥ 1180 px — 6 cells
3
3
2
2
2
1
2
3
4
2
≥ 880 px — 4 cells
3
1
2
2
1
2
2
4
≥ 520 px — 2 cells
1
1
2
2
1
1
data-mp-cells. The card occupies that many cells in a row. On a narrow screen, there are fewer cells—cards with a width greater than the number of cells are carried over to the next row. As data-mp-cells-sm / data-mp-cells-xs the card changes its width when the view is narrowed.
| List width | Cells per row |
|---|---|
| ≥ 1180px | 6 |
| ≥ 880px | 4 |
| ≥ 520px | 2 |
| already | 1 (entire row) |
A pair on six cells 3 + 3 or a trio 2 + 2 + 2 usually looks neater than a random set.
Decor (mp-card--decor) fills in the gaps in the grid.
Live masonry grid
A demo of the “Activity” block from the homepage: here, all card types are in a single live grid. Each card’s caption shows the type of
layout and data-mp-cells. Change the window width and font in the theme panel, watch how the grid
rearranges itself, and apply the best layout to the homepage.
-
[2] stack · link
A base pair in a row of six cells.
-
[2] stack
Stack without an external link.
-
[2] horizontal
Horizontal, two cells wide, without a link.
-
[2] compact
A two-cell text card.
-
[1] compact · link
A narrow column with a link.
-
[1] compact
Compact, one cell wide.
-
[3] stack · link
Half of a six-cell row. A longer description to check for line breaks and height after changing the font.
-
[3] horizontal · link
Wide horizontal: preview and text in a single column.
-
[3] horizontal
Three-cell Horizontal, without a link.
Fixed Height
Attribute data-mp-height="…" sets li.mini-projects-grid__item sets a fixed card height in pixels. Text is truncated with an ellipsis if it doesn’t fit.
-
[4→4→2] height=600 · stack · link
4 → 4 → 2. data-mp-cells-sm="4" data-mp-cells-xs="2". Height 600px.
-
[2] height=600 · stack · link
Two cells, height 600px.
-
[2] height=400 · stack · link
Two cells, 400px high.
-
[2] height=400 · stack · link
Two cells, 400px tall.
-
[2] height=400 · stack · link
Two cells, 400px tall.
-
[3→2→1] · compact · link
3 → 2 → 1. data-mp-cells-sm="2" data-mp-cells-xs="1". Auto-height.
-
[3→2→1] · compact · link
3 → 2 → 1. data-mp-cells-sm="2" data-mp-cells-xs="1".
-
[2] height=400 · stack-bottom · link
Text on top, image at the bottom. Height 400px.
