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.

Usage

Headings

Headings are built using <h1> etc tags.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

hgroup :last-child

Lorem ipsum dolor sit amet, consectetur adipiscing 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, sunt in culpa qui officia deserunt mollit anim id est laborum

Footer content for a card.

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 .

123 Fake Street
Springfield, USA

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;
If you can wait and not be tired by waiting,
    Or being lied about, don’t deal in lies,
Or being hated, don’t give way to hating,
    And yet don’t look too good, nor talk too wise:

- Rudyard Kipling, If-
          

Code

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

Horizontal Line


Headings

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. Ipsa error aliquid et! Animi.

Second Heading h2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia molestias ullam quasi est a nemo, accusamus voluptatum autem. Eius explicabo est assumenda voluptatem id, hic maxime mollitia facere debitis quos.

Third Heading h3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo deleniti, repudiandae rerum nam laborum eligendi aperiam. Autem id, ad necessitatibus accusantium, facilis, quae ullam est, voluptates debitis fugiat quos inventore!

Fourth Heading h4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cum eum eligendi voluptatum quasi nisi doloremque ipsam unde, laboriosam nihil voluptatem consequatur quam non similique vero ratione animi sit veritatis.

Fifth Heading h5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit voluptatem necessitatibus eos iusto nam deserunt, dicta possimus error qui reiciendis, aut dolore magnam eligendi maiores expedita commodi perferendis non blanditiis.

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

Tables

Head 1 Head 2 Head 3
Footer 1 Footer 2 Footer 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3

Accordion

Styling for <details> and <summary>.

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

Accordion 2
  • Vestibulum id elit quis massa interdum sodales.
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
  • Quisque sed eros non eros ornare elementum.
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.

Tabs

Styling for <section role="tablist">.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

  • Vestibulum id elit quis massa interdum sodales.
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
  • Quisque sed eros non eros ornare elementum.
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.

Buttons

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

Link

Secondary Buttons

Adding a secondary class will display a secondary color.

Link

Contrast

Adding a contrast class will create ghost/outline buttons.

Link

Outline

Adding an outline class will create outlined buttons with no background.

Forms

Form States