--- allow_origins: - '*' allow_xss: false alt-top-banner: '' auto-reload: false auto-reload-interval: 5.0 code: counters[0] += 1 mimetype: text/html no_header: true no_navheader: true require_method: - GET - POST require_permissions: [] resource-timestamp: 1713115537052463 resource-type: page setupcode: "# This code runs once when the page is creates\r\n# All varibles in code\ \ are accessible in the page body.\r\n\r\ncounters = [0]" streaming-response: false template_engine: jinja2 theme-css-url: '' --- {% extends "pagetemplate.j2.html" %} {% block title %} Dynamic Pages {% endblock %} {% block body %}
Look! A Header

Basic Page

This is a simple test page for barrel.css

It is public domain/CC0, allong with barrel.css itself.

Get the source code here: at github

Components

We want to keep the number of components very small, and use semantic HTML for the rest

Toolbars

Toolbar

Cards

Cards can have headers
This is a card! Headers and footers are optional in cards and windows. "w-sm-full" means about the width of a phone screen.
A footer

Toolbar in header

Toolbar

Toolbars in headers are rendered differently if they are the only child of that toolbar, to reduce visual noise.
A footer

Semantic Styles

Let this be a warning!

Danger Will Robinson!

Everything is fine now.

The highlight of the page

Color Variables

Semantic color palletes are generated from a single base color

Flex

The flex-row class is all you need for a nice layout. The padding class gives any element a little padding around the edges.

1
2
3
4

More Flex!

These boxes are aligned with align-left, and they are smushed together with nogaps

1
2

12 Column layouts

Put your stuff in a flex-row element and use cols-1 through cols-12. It's a responsive grid, cols-X just sets the width to a fraction of the parent, but it can reflow to fit small screens. w-full means 100% parent element width.

3 col wide
9-col wide

12 Column layouts with nogaps

3 col wide
9-col wide

Text Styles

Bold and Italic and Underlined and Normal, undecorated text.

Also a Link

Backgrounds

The paper class gives a background to an element. You might need it if displaying over dark stuff.
Paper warning!
Paper highlight!

HTML Elements

details/summary More content is here.

Ye Olde Block Quote

It is an ancient Mariner, And he stoppeth one of three. "By thy long gray beard and glittering eye, Now wherefore stopp'st thou me?

Here's a form with no classes

Meters and sliders

{% endblock %}