Gyr

Gyr automatically styles many common HTML elements with a simple, elegant theme. Just place the link in your head tag, and you're good to go!

Gyr is fairly small and lightweight. Get started here or scroll down for a demo.

Dark mode can be toggled on/off using your system preferences, or the browser theme on Firefox. Motion can be disabled by turning on your device's reduced motion settings.


H1 header

H2 header

H3 header

H4 header

H5 header
H6 header
A Link for Demonstration Purposes

Italicized text.

Bold text.

Superscript text.

Subscript text.

Small text.

Deleted text.

Marked text.

Laurem 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.

An example details/summary

With some hidden text inside, too!

Tables

Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3

Forms

Fieldset and legend

Dialogs

Warning: may not work on all browsers (esp. Safari).

Welcome to the dialog.

Here you'll find quite a lot of information.

For instance:

These are the instructions to install gyr-css, again:

<link rel="stylesheet" href="https://unpkg.com/gyr-css@latest/dist/index.css" type="text/css" />

Laurem 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.

Same thing again, this time as a quote: "Laurem 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." Marcus Aurelius

"Laurem 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."

Unordered Lists

Ordered Lists

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
    1. Nested list item 1
    2. Nested list item 2
  4. Ordered List Item 4

console.log("Awesome!");

KBD

Other Elements

<HR> Element


Blockquotes

"Laurem 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." Placeholder Text