Getting Started with Honeycomb
Honeycomb is the SchoolStatus design system, built with ❤️ by the SchoolStatus design team.
It exists in Figma and as a packaged library, providing a set of design components and patterns to build cohesive, accessible, responsive experiences.
What is Honeycomb?
Our design system helps you build interfaces faster and in an accessible way.
The design team creates design files with these components and you can reference their HTML code here or via Figma Code Connect when you implement them. You can use the HTML as is, update your own composable HTML view files, or update your JavaScript framework’s component files.
Important note
Updates to Honeycomb will only affect the CSS and presentation, so you never have to update the HTML after the first time.
Each web component has also been thought through to be as minimal and as standards-compliant as possible, styled entirely with modern CSS and using browser-native elements. Use them along with the layout framework to greatly reduce the time to build your interfaces and pull in automatic accessibility handling.
If you’re ready, take a look at a simple component to get a better idea or find out how to install Honeycomb to get it into your project.
Where to find Honeycomb
Our design system has two parts: a Figma component library and an npm package that implements those components as HTML/CSS web components. This website documents the package and how to use these components in your app.
The design team currently has 33 components designed and implemented. You can use them today in your app.
Read the installation instructions for more information on how to build Honeycomb or incorporate it into your project.
You can also test drive the latest version with a live HTML editor at our Honeycomb Playground.
More technical information
Honeycomb is built on top of Tailwind and distributed as a compiled CSS file (and a few other assets, like web fonts). The ./honeycomb.config.js is our Tailwind configuration and theme file, components are styled in Sass, and we use PostCSS and a number of plugins to actually build the final CSS.
Supported components are entirely HTML and documented here and in Figma’s Dev Mode; simply include the CSS file of your choice and update your views to use our documented HTML. You don’t need to know CSS, Sass, or even have Tailwind included in your project.
No Javascript
Currently Honeycomb is not a JavaScript-based component library like those built on React or Svelte. In fact no JavaScript is required for any of Honeycomb’s UI components or interactions—it is entirely CSS-based.
Modals use the browser-native <dialog> element, for instance, for built-in interactions and accessibility. Form inputs use actual <input> elements, buttons are <buttons>, and we use the latest supported CSS features, like container queries and :has selectors among many others, to do advanced things without the need for JavaScript.
A React version is in the works as a number of SchoolStatus products use React, but at it’s core Honeycomb will always support native HTML and web components.
Documentation website
This website is built by hand using the Hugo static site generator and a number of hand rolled templates and shortcodes.