Fun Without Javascript

A set of useful techniques for web applications that do not rely on javascript inspired by the work seen here

Tab-Like Behavior

Using the styling in this section, a component within a series of components, each with a class of 'view' will only be displayed if its id matches exactly the hash of the page OR it is the last component and no other components match the hash.

Example

Red Selected Blue Selected Default Selected

Progress bar

Example

Click each step to follow progress:

1 2 3 4 5

Modal

Example

Click to Open Modal

Stylable Checkboxes and Radio Buttons

Using the styling in this section, in conjunction with the html for attribute, we can create invisilble checkboxes and radio buttons whose behavior and appearence is directly tied to the label following it. Because inputs follow "bizzare" formatting rules, and labels follow

Example: Checkboxes

Example: Radio Buttons