Skip to content

Bullframe CSS

Kitchen sink

Every styled element in one page. Switch builds live.

Text, embeds, interactive controls, forms, tables, and the grid. Pick a build from the sidebar.

Docs home GitHub

What this page covers

7 builds
Switch live between system, light, dark, classless, and utilities builds.
7 element groups
Text, embedded content, interactive elements, forms, components, tables, and grid.
12-column layout
Fluid grid with optional breakpoint collapses for responsive demos.

Body classes in use

  • .bf-responsive-typography: fluid type scale across viewports
  • .bf-reduced-motion: calmer motion when the OS asks for it

Text elements

Typography, inline elements, lists, quotes, and code samples.

Headings

Heading 1 with link

Heading 2 with link

Heading 3 with link

Heading 4 with link

Heading 5 with link
Heading 6 with link

Paragraphs with headings utilities

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline text elements

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element just a placeholder example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable.

hidden attribute

Template content

Address

Address: somewhere, world

hr

pre (383 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

code (526 characters)

html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}

pre code

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title >...</title>
  <link rel="stylesheet" href="bullframe.css">
</head>
<body>
  <main>...</div>
</body>
</html>

blockquotes

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Tom Whatever
Even better philosophical quote marked up with just a <blockquote> element.

Ordered list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Unordered list

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

Definition list

Name
Description value
Synonym
Description value
Abbreviation
Description value

Unstyled list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Navigation list

Embedded content

Images, media, embeds, progress, and meter.

Linked figure with an image and a caption

just a placeholder
The image above is 800x400 pixels

SVG

HTML5 video with controls

Audio with controls

YouTube iframe 16:9 (default)

Progress

70%

Meter

at 50/100

Interactive elements

Details/summary and native dialog.

Details with a summary

Click to Open Something small enough to escape casual notice.
Click to Hide Something small enough to escape casual notice.

Dialog

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores ducimus optio quis expedita, modi libero maxime voluptate temporibus quia tempore molestiae necessitatibus id in nostrum a, alias beatae! Molestias, voluptatem?

 
<script>
  // Sets open/close button clicks to show or hide the dialog if available,
  // else toggles the open attribute.

  const dialog = document.getElementById('myDialog');
  const openBtn = document.getElementById('openBtn');
  const closeBtn = document.getElementById('closeBtn');

  openBtn.onclick = () => dialog.showModal ? dialog.showModal() : dialog.setAttribute('open', '');
  closeBtn.onclick = () => dialog.close ? dialog.close() : dialog.removeAttribute('open');
</script>

Forms

Inputs, selects, textareas, and fieldsets across common states.

Inputs

HTML5 has several new input types for forms (legend).

Radio and checkbox inputs

Radios

Checkboxes

Custom Radios

Custom Checkboxes

Selects

Choose your options below

Textareas

Write your message below

Textareas (disabled)

Write your message below

Clickable inputs

Click the buttons below

input type="image" (130x40px)
Button (link)
Primary button (link)
Click the buttons below

Clickable inputs (disabled)


input type="image" (130x40px)
Button (link)
Primary button (link)

Buttons

Click the buttons below

Buttons (.bf-disabled)

The buttons below are disabled.

Components

Button Variants

Button Sizes

Button Groups

Full Width Button

Form Components

Login Form

Contact Form

Tables

Default and utility-enhanced tables.

Unstyled tabular data

Jimi Hendrix - albums
Album Year Price
Are You Experienced 1967 $1.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $1.00
Band of Gypsys 1970 $12.00
Album Year Price

Styled tabular data

Jimi Hendrix - albums
Album Year Price
Are You Experienced 1967 $1.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $1.00
Band of Gypsys 1970 $12.00
Album Year Price

Styled responsive tabular data

Caption goes here
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
row1_cell1 row1_cell2 row1_cell3 row1_cell4 row1_cell5 row1_cell6 row1_cell7 row1_cell8
row2_cell1 row2_cell2 row2_cell3 row2_cell4 row2_cell5 row2_cell6 row2_cell7 row2_cell8
row3_cell1 row3_cell2 row3_cell3 row3_cell4 row3_cell5 row3_cell6 row3_cell7 row3_cell8
row4_cell1 row4_cell2 row4_cell3 row4_cell4 row4_cell5 row4_cell6 row4_cell7 row4_cell8
row5_cell1 row5_cell2 row5_cell3 row5_cell4 row5_cell5 row5_cell6 row5_cell7 row5_cell8
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8

Styled tabular data + zebra striping

Jimi Hendrix - albums
Album Year Price
Are You Experienced 1967 $1.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $1.00
Band of Gypsys 1970 $12.00
Album Year Price

Styled responsive tabular data + zebra striping

Caption goes here
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
row1_cell1 row1_cell2 row1_cell3 row1_cell4 row1_cell5 row1_cell6 row1_cell7 row1_cell8
row2_cell1 row2_cell2 row2_cell3 row2_cell4 row2_cell5 row2_cell6 row2_cell7 row2_cell8
row3_cell1 row3_cell2 row3_cell3 row3_cell4 row3_cell5 row3_cell6 row3_cell7 row3_cell8
row4_cell1 row4_cell2 row4_cell3 row4_cell4 row4_cell5 row4_cell6 row4_cell7 row4_cell8
row5_cell1 row5_cell2 row5_cell3 row5_cell4 row5_cell5 row5_cell6 row5_cell7 row5_cell8
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8

Grid System

Fluid 12-column layout with optional breakpoint collapses.

Use .bf-row with .bf-col-1 through .bf-col-12. With .bf-container--break-md, columns stack below 768px.

Default .bf-container caps at 1140px; .bf-container--fluid stays full width.

No gutters (.bf-no-gutters)