--- 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_label_image: 16x9/japanese-forest-grass.avif 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

Labeled input

#### 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.

#### Toolbar in header

Toolbar

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

### 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?

A text area

#### Here's a form with no classes

Label

#### Meters and sliders

{% endblock %}