🎺 Trumpet CSS

🎵 How sweet the sound 🎶

Trumpet CSS is a framework-independent, easily customizable, zero-js-first web UI component library. It is a single CSS file! Inspect elements on this page to see how it works.

Show me the components!

Guiding Principles

It is okay to use inline styles
CSS classes are for referencing repeated styles as components of the UI
No build
Prefer a shallow DOM tree
No breaking changes
Vendor pattern
Easy customization

The idea of splitting CSS and HTML into seperate files in order to have separation of concerns is not a good idea, and probably not the reason CSS stylesheets were first implemented (looking into this). One thing we can learn from the recent popularity of CSS utility class based, and CSS-in-JS solutions is that putting styles in your HTML is a perfectly good way to style your page and can feel pretty good. In our case, we just use the style attribute. The added benefit of styles in HTML is locality of behavior. Our approach is that things should probably be done this way, until it is inadequate or the style is repeated too frequently. In that case, a CSS class should be used.

CSS as the engine of repeated styles (CATEORS) is the idea that when a need for applying a set of styles to multiple elements exists, we can put that set of styles in a single CSS class and then use that class on the needed elements. This is in opposition to the solution that utility class based solutions propose, which is html element abstraction. By using CATEORS, the HTML can be written in a flat fashion without element abstractions.

No build is awesome and highly underrated.

A shallow DOM tree is preferable for performance reasons. This is achieved by using CATEORS, and ensuring components themselves are applied to a shallow HTML structure.

Breaking changes are a bad experience for consumers of a library. We won't do it!

The Vendor pattern means that you copy the code into your project. This makes it so your application will never break with some new update.

Since this is meant to be vendored and it is no build, you have the ability to change the code yourself to customize it. No need to learn a UI library's abstraction for customization with little documentation. Trumpet CSS is just CSS!

Guiding Preferences

One mid-toned color mode
Skeuomorphism

The reason that light mode and dark mode are a thing today is because light mode hurts your eyes. If a middle-of-the road color scheme is used, then there is no pain in the eyes and no need to implement two color modes.

Skeuomorphism is just cool. Things should look vibrant and have depth. Flat UI is the brutalist design of the web and it should be avoided.

Installation

Trumpet CSS is designed to be vendored. Copy the trumpet.css file into your project. Then you can reference the stylesheet in the head of your html document like so

<link rel="stylesheet" href="/public/trumpet.css" />

This assumes your project has a public directory from which it serves static files.

You're now ready to use Trumpet CSS.

Usage

Inspect elements on this page to see their html structure. You can then copy from developer tools and paste into your project. Trumpet CSS is so simple, that's all you need!

Trumpet CSS components follow a CSS convetion called Resonable System for CSS Stylesheet Structure (RSCSS). Here is a quick overview.

Components are kebab-case and at least two words
Variants start with a hyphen, are lower-case and contain no hyphens. IE: "-largecolumns"
Inner elements of a component are lower-case and contain no hypens. IE: "innercolumn"

Here is an imaginary component to demonstrate the structure

<div class="imaginary-component -large">
  <div class="topsection">Hello</div>
  <div class="lowersection -wide">World!</div>
</div>

Components

👀 Inspect elements on this page to see their HTML structure. Then copy and paste them into your project!

Accordion Group

Using checkbox input

This can hide and show by clicking the top content

Using radio input

This will only show and not hide by clicking the top content

The rest of these use grouped radio inputs

Click one of the following radio buttons to expand it and collapse this one. This is more true to the traditional definition of an accordion.

Secondary variant. This topcontent is multi-line and contains a lot of text. You can see that it expands to the proper size.

some bottom content is here

Warning variant. Multi-line Content

Here you can see that the bottom content can be multi-line and contain a lot of text. The accordion will size itself to the proper size as it expands and collapses.

Error Variant

bottom content

Info Variant

bottom content