About Jiffies CSS

Jiffies CSS is a "postmodern" CSS full-page reset. It uses "cutting edge" 100% pure CSS standards, including layers, native css nesting, and a variable structure to define user and application specific overrides.

This page is the canonical demo and progress tracker for the v2 rewrite. Every component and pattern in DESIGN.md has a demo home below, captured by the screenshot harness as each module lights up.

Usage

• For appropriate semantic markup, view the source of this file.

• Link to the bundle from unpkg. Copy

  <link
    rel="stylesheet"
    type="text/css"
    href="https://unpkg.com/@davidsouther/jiffies-css"
  />
  <script src="https://unpkg.com/@davidsouther/jiffies-css/accessibility.js"></script>

Theme with the Intent tier: adjust the controls below to see how a single --brand-color seed drives the whole M3 scheme. Copy the generated snippet into your own :root {} block and you're done.

Color

The scheme derives from one --brand-color: five key palettes plus a fixed error, each a tonal ramp, assigned to semantic role tokens with light/dark mappings.

Semantic roles

Primary tonal palette

Headings

Headings are built using <h1> etc tags.

First Heading h1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus cupiditate minima, magni possimus commodi, eveniet? Rem, adipisci architecto pariatur libero aliquid culpa sunt accusantium.

Second Heading h2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia molestias ullam quasi est a nemo, accusamus voluptatum autem.

Third Heading h3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo deleniti, repudiandae rerum nam laborum eligendi aperiam.

Fourth Heading h4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cum eum eligendi voluptatum quasi nisi doloremque ipsam unde.

Fifth Heading h5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit voluptatem necessitatibus eos iusto nam deserunt, dicta possimus.

Formatting

Formatting uses the appropriate <b> etc inline text tags.

This sentence is bold. If you like semantics, you might go with strong or emphasized text. If not, italic is still around. Small text is for fine print. Your copy can also be _subscripted and ^{superscripted}, inserted, deleted, or highlighted. You would use a hyperlink to go to a new page.

If you like to write about there are plenty of semantic tags for you. There's the generic code, as well as keyboard input, computer output, and variables.

You might have need of a citation, short quotation, abbr, or definition. It might be 10:00pm.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam molestiae et assumenda molestias alias ut saepe doloribus, porro, deleniti neque, harum minus, commodi laudantium quod excepturi nam corrupti odit provident. - Blockquote Citation

Preformatted Text

If you can keep your head when all about you
    Are losing theirs and blaming it on you,
If you can trust yourself when all men doubt you,
    But make allowance for their doubting too;

- Rudyard Kipling, If-
        

Code

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}

Horizontal Line

Lists

Unordered list

• List item one
  • Nested list item
• List item two
• List item three

Ordered list

1. List item one
   1. Nested list item
2. List item two
3. List item three

Definition List

Definition Title One

First definition description

Definition Title Two

Second definition description

Buttons

Button elements, links with role="button", and input elements should all render exactly the same.

Primary

Secondary

Adding a secondary class reads the tonal container pair.

Contrast

Adding a contrast class.

Outline

Adding an outline class creates outlined buttons with no background.

States

Disabled and busy (loading) states.

Forms

States

Validity and editability are read from ARIA and native attributes, not classes.

Form switch

A pure-CSS toggle: a checkbox or radio painted as a sliding switch.

Tables

Accordion

Styling for <details> and <summary>.

Tabs

Styling for <section role="tablist">.

Modal

Native dialog; often dialog > article.

Property sheet

A dl rendered as aligned label/value rows.

Name

Jiffies CSS

Version

2.0.0-alpha

License

MIT

Author

David Souther

Progress

A styled native progress, line and round.

Determinate

Indeterminate

Round

Form group

A fieldset[role=group] joins adjacent controls into one segmented row.

Card & Panel

article is the elevated card; section is the flat panel. Each may carry header/main/footer rails.

Card-scoped hero

The hero figure sits in a card's header rail. Its parent (the article) decides its scale: it bleeds past the rail padding and clips to the card radius.

Hero (page-scoped)

A full-bleed page banner: a figure > img plus a heading inside a page-level header rail.

Page-scoped hero

Navigation

nav > ol in two modes selected by ancestor, not by class: a page-end bar (header/footer) and a sticky table of contents (aside). The page header, footer, and aside on this page are live examples; an inline page-end bar follows.

Breadcrumb

Classless: the Breadcrumb ARIA label selects it.

Utilities

Class-based helpers in the utility layer: .flex / .row / .inline / .flex-{0-4} / .justify-* / .align-*, and .grid driven by the --grid-column-count dial.

Flex row — justify & align

Flex grow steps

Grid — 3-column override