HKPS Style Guide
Every component defined in hkps.css and hkps.js, rendered with sample content: layout first, then styling, then interactive elements.
See also: Activity exemplars, complete activities built from these components.
Column grid (float-based)
.hk-container › .hk-row › .col-1….col-12 (full width until 720px) and .col-N-sm (fixed at all sizes). The class attribute must start with col.
Text block
.text-block — one column, two columns from 768px.
Left column
Learners build understanding by connecting new information to what they already know. Explicit modelling makes expert thinking visible.
Right column
Regular retrieval practice strengthens memory. Short, low-stakes quizzes help both learners and teachers see where gaps remain.
Even row (flex)
.hk-roweven › [class^="col"] — equal-width items: 3 per row, 4 from 540px, 5 from 960px.
Row 2 (flex, wrapping)
.hk-row2 › .col — 2rem gap; widths are set per item (inline flex used here for the demo).
.hk-row2..hk-row2.Colour palette — Cyan, Purple & Amber
Brand tokens on :root. Navy takes white text; every other colour takes Ink text, because white text on them fails WCAG AA contrast.
--hk-bg-warm--hk-white--hk-cyan--hk-cyan-bright--hk-purple--hk-amber--hk-navy--hk-inkProcess
Use case: Demonstrate the process, timeline (note: colour does not matter)
.flow-row › .panel.panel-foundations|current|advanced with h3.title-found|current|adv, separated by .arrow. Stacks and hides arrows below 900px.
Foundations
- Core concepts and vocabulary
- Key prior knowledge
- Basic classroom routines
Current Practice
- What learners do now
- Typical lesson structure
- Assessment in use
Advanced Application — a longer title that wraps
- Transfer to new contexts
- Learner-led inquiry
- Reflection and extension
Quadrant 2×2 grid
Use case: Same as above but in different arrangement
.quad-grid › .quad-item.quad-item--navy|cyan|bright|purple|amber with h3.quad-title--*. Single column below 900px.
Knowledge
- Facts and definitions
- Key terminology
Skills
- Procedures
- Problem solving
Dispositions
- Curiosity
- Persistence
Understanding — titles may wrap onto two lines if needed
- Big ideas
- Connections across topics
Content boxes
Different styles for various content needs.
.hk-box (purple accent), .hk-box2 (plain), .hk-box3 (navy top border) and .hk-box4 (image with text).
Top border (navy)
.hk-box4 › .hk-box4__media (image, 25% width) + .hk-box4__text (the rest). Add .hk-box4--right to put the image on the right.
Image with text (.hk-box4)
Explantion and examples
Image on the right (.hk-box4--right)
Use this version to alternate the layout down a page.
Fixed table
table.hk-fixed — fixed layout, navy header with an amber rule, navy-tint row headings (th scope="row"), cyan-tint striped rows, long words wrap. An optional visible caption shows as a small navy title.
| Stage | Focus | Evidence |
|---|---|---|
| Foundations | Core vocabulary | Exit tickets |
| Current | Guided practice | Observation notes |
| Advanced | Independent application | Averyveryverylongunbrokenwordthatwrapsinsidethecell |
Callout boxes
Each type has its own class and an inner .*-content wrapper (e.g. .summary-box › .summary-box-content). A leading <strong> is the title. Older names still work: .classroom shows as Teaching ideas, .learning-outcome.soft as Summary and .teaching-insight.soft as Note.
In pairs, discuss: how do you currently find out what students already know? See prompts.
By the end of this unit, you will be able to:
- describe the four PDAR steps;
- decide who does each step in a Primary 1 activity.
In this unit you have:
- seen PDAR in a Primary 1 classroom;
- checked the pitch of ten tasks.
Ideas for teaching activities.
Knowledge checkpoint to check understanding of the concept/unit.
Important information to remember/highlight.
or reflection
Quote
figure.hk-quote › blockquote + figcaption (with an optional cite for the source). Add .soft for the purple-tinted version. The quote mark and dash are decorative and hidden from screen readers.
The most important single factor influencing learning is what the learner already knows. Ascertain this and teach him accordingly.
hkps.js on the page.
Accordion
.hk-accordion › h3.hk-accordion__heading › button.hk-accordion__trigger + .hk-accordion__panel. Add data-hk-single to keep only one panel open at a time.
- Enter / Space open or close a section
- ↓ / ↑ move between headers; Home / End go to the first or last header
Formative assessment is ongoing checking for understanding during learning, so teaching can be adjusted in the moment.
Several times per lesson — at the start, after new input, and before learners work independently.
- Mini whiteboards
- Hinge questions
- Exit tickets
See the question bank tabs below. Links inside panels are only in the tab order when the panel is open.
Tabs
Foundations questions
Can you define the key term in your own words? Which example best fits the definition?
Current practice questions
What step comes next, and why? Where did this worked example go wrong?
Advanced questions
How would you apply this idea to an unfamiliar context? What evidence would change your mind?
Click to reveal (feedback)
button.hk-btn[data-hk-toggle] with aria-controls pointing at a .hk-feedback box. While the box is closed, it is hidden from screen readers and its contents can't be reached with the keyboard.
Question: Why is retrieval practice effective?
.hk-prompt — a plain box with a thin border, for prompt + hint activities.
Prompt
What will you cut or shorten to fit a single period?
Protect the Review step. It is where children say what they found.
Expandable area (show more)
.hk-expand holds a short summary that is always visible and a .hk-expand__more region. A button.hk-link-btn[data-hk-toggle] shows or hides the region.
Helpers
.visually-hidden hides text on screen but screen readers still read it (used in the "Show more" button and the table caption). .hidden-sm hides content below 720px.
Resize the window below 720px — the line below disappears:
.hidden-sm: I'm only visible at 720px and wider.