Big Fancy Header!

Jay's Clever Framework Name

Every tag in HTML, styled.

This page represents 113 non-depreciated tags in HTML, as per Mozilla Developer Network's HTML web docs. Some representation of visual content based on Bootstrap's cheatsheet.

The only tag not represented is the generic container tag <div>. CSS specificity allows me to avoid the generic container entirely, allowing a nearly clean slate to build upon.

I end up rewriting the same CSS and HTML every project and it's time to turn it into my own framework.

Assumptions

  • Browser defaults aren't inherently bad.
  • Separate style from content where ever possible.
  • Use classes and ids to describe content.
  • Use CSS to describe design.
  • Progressive enhancement and graceful degradation are key.
  • Build for everyone.

To-Do

  • Ensure proper contrast on text in header/footer
  • Add aria to all controls
  • Fill in media section with media
  • Style media, forms, components

Color

Our primary color palette is generated by choosing a single color, and generating CSS light, dark, neutral, and complimentary colors.

Using the lightness-chroma-hue (lch) CSS color model, we can create light and dark variations of our primary color, desaturate it to provide a neutral color, and calculate the complimentary color. We can then create variations of the complimentary, tetrads, etc to produce rich color palettes. The palettes are designed to incorporate both a light and dark mode.

Primary Color and Variants
Complimentary Color and Variants
>
Tetrad 1 Color and Variants
Tetrad 2 Color and Variants

Typography

This is a quotation in a blockquote: Someone said something, once. — supposedly

This is a paragraph with inline elements. It has deletions and strike-throughs, insertions and underlined text. Some text is emphasized or italicized, other text is strong or bold. Some text is marked. There are abbr and definitions. (Small text is small.)

This is pre-       
			styled text.

This is keyboard input and a variable.

This is a code sample

This is sample output

This is datasuperscript! and this is a subscript.

File your complaints at this address:

100 NotReal Ln
Fakeville, OZ 99999
mail@noone.fake

Right-To-Left Languages

"This is Arabic" using the bi-directional isolate tag <bdi>: هذا باللغة العربية
"This is Arabic" using the bi-directional override tag <bdo>: هذا باللغة العربية

East Asian Languages

"This is Chinese (simplified)" using <ruby>: 这是中文 (Zhè shì zhōng wén)

Miscellany

MathML

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

    Unordered List
  • Item 1
  • Item 2
  • Item 3
    Ordered List
  1. Item 1
  2. Item 2
  3. Item 3
    4. Definition List
    Term
    Definition

Tables

Table Caption
Table Header
Column 1 Column 2
Element 1 Element 2
Element 1 Element 2
Element 1 Element 2
Element 1 Element 2
Element 1 Element 2
Element 3
Table Footer

Media

Introduces: figure, picture, svg

Images

Placeholder Responsive Image
A full-width responsive SVG
Placeholder Responsive Image
A 200x200 image thumbnail

Image Maps

Yeah I can't believe they haven't been depreciated either.

Placeholder Responsive Image

Audio

This is the audio tag
Download audio

Video

Generic Containers

Embed:

Nesting Content

iframe

Forms

This is a Ranged Slider 42
Contact Verification


Miscellany


Dates & Times





Ticky Boxes

File Uploads
Text Input



Button Button, Who's Got the Button


Components

Details

Interface elements, aren't they neat!

Click to see a dialog box

This is a dialog box

Web Components

template slot