Barrel.css

Please note: Nord is an adaptation of the Nord Theme, which is MIT licensed, not public domain.

Round feathered images

Components

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

Help Text

The .stacked-form class

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. Cards do not have padding by default.

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.

More Cards!

Toolbar

Input w/btn:

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

Semantic Styles

Color Variables

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.

More Flex!

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

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.

12 Column layouts with nogaps

Column sizing is flexible

Note that the first column expands to fit content, and the second fills unused space.

Poetry Styling

Table Caption
Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Hymn of Breaking Strain

Rudyard Kipling

          THE careful text-books measure
  (Let all who build beware!) 
The load, the shock, the pressure
  Material can bear. 
So, when the buckled girder
  Lets down the grinding span, 
'The blame of loss, or murder, 
  Is laid upon the man. 
    Not on  the Stuff—the Man!

But in our daily dealing 
  With stone and steel, we find
The Gods have no such feeling
  Of justice toward mankind. 
To no set gauge they make us— 
  For no laid course prepare—
And presently o'ertake us
  With loads we cannot bear: 
    Too merciless to bear.

The prudent text-books give it 
  In tables at the end
'The stress that shears a rivet 
  Or makes a tie-bar bend—
'What traffic wrecks macadam—
  What concrete should endure—
but we, poor Sons of Adam
  Have no such literature,
    To warn us or make sure!

We hold all Earth to plunder—
  All Time and Space as well—
Too wonder-stale to wonder
  At each new miracle;
Till, in the mid-illusion
  Of Godhead 'neath our hand,
Falls multiple confusion
  On all we did or planned—
    The mighty works we planned.

We only of Creation
  (Oh, luckier bridge and rail) 
Abide the twin damnation—   
  To fail and know we fail.
Yet we - by which sole token
  We know we once were Gods—
Take shame in being broken
  However great the odds—
    The burden of the Odds.

Oh, veiled and secret Power
  Whose paths we seek in vain,
Be with us in our hour
  Of overthrow and pain;
That we - by which sure token
  We know Thy ways are true—
In spite of being broken,
  Because of being broken
    May rise and build anew
    Stand up and build anew.

🍂Basic Page🌱

Theme Chooser