My Design System

Why I Created a Design System

I was using Material UI for a project, and the bundle size, combined with the css-in-js approach to styling, resulted in an application that was difficult to render on the server and that had a pretty poor initial load time. I wanted to create a design system that was similar to Material UI / Flutter but that emphasized semantic HTML and a small bundle size.

Also, when creating a Rich Text Editor with Lexical, I found that it was best to not use highly abstracted components, so I tried to create a library of simple components that can be easily rendered on the server and that doesn't use too much CSS and JavaScript.

In summary, the goal of the design system is to create a look that is comparable to other popular design libraries used today while minimizing load time, bundle size, and complexity.

Assumptions

NOTE: This design system uses CSS and JavaScript that are tied together - i.e., some classes are required for components' JavaScript to work correctly. The design system bundles and transpiles client-side JavaScript using webpack, which is why you might want to download the JavaScript and CSS files from the resources section and tweak them / re-transpile them for your own use. If you make changes to the CSS, I recommend you use PostCSS so your changes will appear the same across all browsers.

The design system assumes that:

you want to use HTMX to create a SPA (Single Page Application),
you want to use semantic html, but that you want to style components primarily with CSS classes and inline styling,
your Content Security Policy allows for inline styling,
you want to use Floating UI for tooltips, menus, dropdowns, and the like,
you want to have slightly different layouts for desktop and mobile,
you want to prioritize mobile devices (you want the application that you show the user to always be similar to the mobile device view),
you do not want to listen to resize events on mobile

Explore the Design System

If you are looking for information about specific components or utility classes, use the links in the list below to find more information about those aspects of the system. Each aspect of the design system should describe the styling, accessability, and JavaScript concerns that go along with it.

If you are looking to learn more about the design system and the decisions made, continue reading below or navigate to the 'General' page for the design system.

If you want the code, navigate to the resources section.

Note that I am still working on documenting the design system. I got tired of writing the documentation and wanted to move onto other things. I will come back and finish / improve the documentation eventually.

Components and Utility Classes

NOTE: Popovers includes tooltips, dropdowns, dialogs, and menus - basically everything that is shown on mouseover or focus or everything that is in the top-layer. Media includes images, video, and audio. Surfaces includes cards, quotes, and asides. Other Inputs includes toggle buttons. Tabs includes tabs, steppers, and mobile steppers. Fixed Content includes the navbar, footer, sidebars, drawers, and Floating Action Buttons.

Other Inputs

Javascript for Inputs

When new content is loaded, the client side javascript gets all <input> and <textarea> elements, and then:

initializes them,
1. This involves setting the appropriate background size for range <input>s as well as setting the value for the <output>s for the range <input>s,
adds a focus event listener to the <input>s that are not readonly,
1. gets the parent element node of the parent element node of the input and if the element is a div that contains the .input-group class, sets the data-focus attribute to true,
adds a blur event listener to the <input>s that are not readonly,
1. gets the parent element node of the parent element node of the input and if the element is a div that contains the .input-group class, sets the data-blurred attribute to true and the data-focus attribute to false,
adds a change event listener to the <input>s that are not readonly and adds an 'input' event listener to <textarea>s and range inputs,
1. Checks whether classlist of the input contains .chip, then return if it does.
2. gets the id, name, type, current length of the input (if the input.value has a length), the minlength and maxlength attribute of the input,
3. checks whether the last change is currently being debounced, cancels the debounced function,
4. creates a debounced function that:
  1. checks whether there is a character counter for the input, and if there is, set the data-val attributes of the minlength and maxlength spans
  2. checks whether the input is a range input, and if it is, sets the background size for the range input and sets the value of the output element that corresponds to the range input
5. checks whether the input is a range input and if it is, creates a debounced function to blur the range input in 50ms.
adds a mouseover event listener to the <input>s that are not readonly,
1. gets the parent element node of the parent element node of the input and if the element is a div that contains the .input-group class, sets the data-hover attribute to true.
adds a mouseout event listener to the <input>s that are not readonly,
1. gets the parent element node of the parent element node of the input and if the element is a div that contains the .input-group class, sets the data-hover attribute to false.

Toggle Buttons

About Toggle Buttons

Toggle buttons aren't really an input, and there is no <input> element associated with them, but there is custom JavaScript associated with toggle buttons. When new content is loaded, the client-side JavaScript gets all buttons with the data-toggle attribute, and adds a click listener to them.
If the button is already selected, then the button is unselected (the .toggle class is toggled on the button). The client-side JavaScript then checks the wrapper of the toggle button group - the parent element of the button - to see if it has the data-only or the data-one attributes.
If the wrapper has the data-only attribute, that means only one toggle button in the group can be selected and whichever button was selected needs to be unselected.
If the wrapper has the data-one attribute, that means that the toggle button group needs to have at least one button selected, and so we querySelector for the button that has the attribute data-default to see which button should be selected (if the button that was just clicked was not unselected). That might not have made much sense, but I will go over the docs at some point.

Regular Toggle Buttons:

Toggle Buttons Large:

Toggle Buttons Small:

Range Inputs

About Range Inputs

A range input can either have a secondary (default) or primary background color and can have either a normal or small size.
Ensure that all range inputs have min, max, step, id, and name attributes. Ensure that all ranges have an associated <output> and an associated <label> (Both may be hidden.).
If you want to show the output, just put both the input and output inside of a <div class="flex-row align-center justify-start gap-2">.
If you want to show a <datalist> with the input at certain values, just see the examples below.
Actually, due to the fact that many browsers do not support the <datalist> element (e.g. Safari), I changed what would have been a <datalist> component with some <option>s to a <div role="listbox" class="datalist"> with some <div role="option" class="datalist-option">s. This will help with customization anyway (with some sacrifice to HTML correctness - you won't be able to include the list attribute on the input). If you don't want the user to be able to edit the input, just add the disabled class to the slider. It will not affect styling.

Example Range: Example Range With Sections: Small Range: Small Range With Sections: Numeric Range With Output:

File Uploads

About File Uploads

I haven't worked much on file uploads because you usually just want to specify the type of file the user should upload (image / audio / video), let the browser constrain the types, then upload to the server, but below are some preliminary file upload drafts.
The main difference between image / audio / video file uploads are the accept attribute.

Upload Image File: Upload Audio File: Upload Video File: Upload Multiple Image Files: Upload Audio Files: Upload Video Files:

Date and Time Inputs

About Date and Time Inputs

Date Inputs:
- Date Inputs accept a max and min attribute that accept a value in the YYYY-MM-DD format.
Datetime Inputs:
- Datetime Inputs accept a max and min attribute that accept a value in the YYYY-MM-DDTHH:MM:SS format.
- The HH:MM:SS stands for hours, minutes, and seconds in military time (e.g. 23:15 === 11:15 PM) and the seconds are optional.
Time Inputs:
- Time Inputs accept a max and min attribute that accept a value in the HH:MM:SS format.
- The HH:MM:SS stands for hours, minutes, and seconds in military time (e.g. 23:15 === 11:15 PM) and the seconds are optional.
Month Inputs:
- Month Inputs accept a max and min attribute that accept a value in the YYYY-MM format.
Week Inputs:
- Week Inputs accept a max and min attribute that accept a value in the YYYY-W## format.
- The #'s in the above abbreviation stand for the weeks in the year from 01 to 52 (and sometimes 53).

Date Input:

Datetime Input:

Datetime-local Input:

Time Input:

Month Input:

Week Input:

Phone Inputs

Phone Input:

Only enter numbers. The number will be formatted automatically.

Search Icons

About Icon Search

Resources

Click on the individual buttons to download separate files, or click on the All Files button to download a ZIP file of all the code. The code is sent pre-transpiled for readability.
Click on the VSCode Snippet button to download a copy of the html.json file that will make implementing this design system simpler.

All Files

Shared CSS

Desktop CSS Mobile CSS

Shared JavaScript

Desktop JavaScript Mobile JavaScript

VSCode Snippet