Designing Cal Bureau: The lessons I learned building a minimal printable asset engine
I recently launched Cal Bureau, a free directory for printable calendars, trackers, and planner pages. While the project sounds simple on the surface, the process of building a system to generate clean, scalable, and cross-region friendly printables taught me a lot about print-oriented web design.https://calbureau.com
Here are the key takeaways from building Cal Bureau in public.
Don't trust conversion libraries for typography
Originally, I tried using standard HTML-to-PDF server libraries. However, rendering custom fonts and precise vector borders often failed, resulting in misaligned layout boxes. Using headless Playwright to handle the rendering via Chromium's native print engine solved 99% of my layout headaches. If your browser renders it perfectly, your PDF will look exactly the same.
CSS Grid is a lifesaver for calendar layouts
Designing a calendar grid that dynamically stretches to fill both portrait and landscape orientation without breaking borders can be nightmare-inducing with tables or flexbox. CSS Grid makes this trivial:
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: auto repeat(5, 1fr);
}
This ensures that whether it is rendered on A4 or US Letter, the grid cells automatically scale to fill the page margins.
The focus is on the UX of downloading
Most printable directories force users through multi-step onboarding forms or ad-heavy click loops. With Cal Bureau, I wanted to prove that a side project can gain traction by offering direct utility. No emails, no logins, no dark patterns. You choose a layout, preview it, and hit download.
I would love to get your feedback on the current templates and the overall UI. What features or planner designs would make this a daily bookmark for you?