Rebuilding the tabularis.dev website

Context

Tabularis is an open source SQL client. Its website, tabularis.dev, had been built quickly by developers whose expertise is databases and desktop software, not front-end. It did its job and had helped the project reach a growing community.

But the project kept growing: more features, more plugins, more documentation and more new visitors. The site had more to say than its original structure could hold. The goal of the rebuild was not to fix something broken, but to give the site room to grow with the project.

Approach

• Page-by-page review of the site: what each page was trying to say, and where a new visitor was likely to get lost or leave
• Study of developer tool sites (Stripe, Vercel, Linear) for their simple navigation and visual consistency, without copying their style
• Prototyping in Figma, tested directly with the real content, page after page
• Questioning every section before keeping it: does it help the reader decide, or is it there because it was easy to add?
• A unified visual identity: two fonts with clear roles (Urbanist for the interface and reading, JetBrains Mono for code and data), one palette, the same spacing and components on every page, and a logo available in color, white and black
• Rebuilding the code architecture alongside the design

Technical decisions

A new design on top of the old code would only have moved the problem. All the site’s styles lived in a single globals.css file of about 13,000 lines: there was no way to know whether a rule was still used, and changing a class could affect other pages. The 65 components were also grouped in a single folder, with no organization by feature.

Styles were moved to CSS Modules, page by page during the redesign and component by component for shared pieces: each component now has its own style file next to it. Components follow the same logic, with shared layout and UI components on one side, and one folder per part of the site on the other (home, blog, wiki, download). The global stylesheet now only holds shared variables and basic layout classes.

Two parts took longer than the rest. The download page, the simplest-looking one, where every extra click or unclear option can make a visitor leave. And the content pages (blog, solutions), written in Markdown: every type of content (heading levels, code blocks, videos, images) had to be designed and tested to work in any combination.

Results

• Global stylesheet reduced from 13,000 to about 300 lines
• 25% less code: from 28,533 to 21,453 lines, across almost twice as many files (from 145 to 288), each with a clear role
• Homepage refocused on the 4 features that matter most for a first visit, instead of 14 cards of equal weight
• Simpler plugin bounty board header: six database logos and two buttons, instead of a map of thirteen targets with four status colors and three buttons
• The full story of the rebuild is published on the Tabularis blog