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

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.

Semantic Styles

Let this be a warning!

Danger Will Robinson!

Everything is fine now.

The highlight of the page

Flex

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

1 content here
2 foo bar
3 lorem ipsum
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-rows 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

Read More