BLOK - A bruatlist, explicit, opinionated UI toolkit for accessible standard exepriences

BLOK is the UI system based on Brut RB's ethos - web standards, brutalist web design, minimal configuration and choices, and obviousness over minimalism.

BLOK should allow you to create a good looking user interface with minimal CSS and JS by using semantic elements and a minimal set of custom attributes/classes.

Vibe

BLOK is 3-dimensional, but not skeuomorphic. Buttons look pressable, links look followable, form fields look obviously interactive. BLOK doesn't provide endless choices for spacing, typography, and colors. But it provides enough.

The Third Dimension

A web page is, at its core, made up of a few elements:

• Content
• Form Fields
• Buttons
• Links
• Notifications & Dialogs

Each of these lives at a different level of a three-dimensional space.

• Ground level is where content exists.
• Links, buttons, and other interactive controls sit on the ground, however buttons and controls have height to indicate their ability to be interacted-with.
• Data entry fields are sunken into the ground, waiting to accept data
• Notifications and Dialogs appear in the air, perhaps establishing their own ground level above the ground.

As with the real world, content can rise above or sink below ground level if needed.

An Absence of Choice

BLOK can be configured to an extent, however it is not designed to power any UI you can imagine. In BLOK, links are always underlined and buttons always look like buttons. Anything that's not a button should never look like one.

BLOK provides a limited number of font sizes, spacings, border radiuses, colors, etc. These choices are enough for most people and most UIs.

BLOK provides appropriate typography to headers and paragraphs, based on the assumption you are building a web app, not writing a term paper.

BLOK is for when the functionality of the site or app is what brings value, not the visual design.

Progressive Enhancement and Accessibility

BLOK should be accessible in all standard ways. Interactive elements in BLOK should work when JavaScript has broken or isn't available. BLOK should avoid using the client to generate HTML that the server can produce.

Structure

BLOK contains three layers:

• Base - a reset and scant styles for typography and spacing that you'd likely want as defaults. These apply to your HTML merely by including BLOK's stylesheet. This also includes a set of custom properties/design tokens useful for consistent styling.
• Components - default styles and classes that implement various UI components like buttons, tabs, forms, etc. Many of these styles apply to raw elements, or use ARIA rules instead of classes. These are only available inside a container that has the BLOK CSS class.
• Utilities - a small set of single-purpose classes to allow you to quickly design and prototype your own UI components. These are based on the design tokens provided by Base, which are used by Components.

Usage Patterns

BLOK is not the basis for a design-forward app, nor is it intended to let you build an app that pushes visual design boundaries or whose value to users is its visual design. BLOK allows you to create good looking UI that allows your apps behavior to shine through.

The base case for using BLOK is to put the BLOK class on your <body> element, and use the built-in components. These should provide you with most of what you'd need for your average web app.

You have two points of customization:

• Modifying custom properties. This allows you to change colors, adjust spacing, and configure typography. This is the simplest and most common.
• Creating custom components. No component library can foresee every app's need. You can use BLOK's utility layer to quickly design and prototype components in your app. You can leave these classes in your markup if you like, and they will be consistent with BLOK's own components. Or, you can translate them to actual CSS to make your own re-usable components.