Skip to main content

bullframe.css

Solid, fluid, cross-browser Sass (SCSS) framework

Download GitHub

This an is a quick look at a wide range of HTML elements, divided into several sections and rendered into unusual combinations, for testing purpose only.


CSS build in use:
bullframe-system-default.min.css

<body> classes:
.bf-responsive-typography
.bf-reduced-motion


Text elements

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

Description name
Description value
Description name
Description value
Description name
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

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

Details with a summary

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

Forms

Inputs

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

Radio and checkbox inputs

Radios

Checkboxes

Selects

Textareas

Textareas (disabled)

Clickable inputs


input type="image" (130x40px)

Clickable inputs (disabled)


input type="image" (130x40px)

Buttons

Buttons (.bf-disabled)

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

12 columns fluid Grid System with containers, rows and columns.
At 575, 768 or 991 pixels the columns could be 100% of the row's width.
The default container .bf-container has a max-width set to 1140 pixels by default.
The custom container .bf-container--fluid doesn't have a max-width.

This is a default container with a bf-container--break-md class and a set a columns combinations.

12 col
11 col
1 col
10 col
2 col
9 col
3 col
8 col
4 col
7 col
5 col
6 col
6 col
5 col
7 col
4 col
4 col
4 col
3 col
3 col
3 col
3 col
2 col
2 col
2 col
2 col
2 col
2 col

No gutters between columns (.bf-no-gutters)

2 col
2 col
2 col
2 col
2 col
2 col