grotesk.css

grotesk is a css library (and React Component) that makes web type easy. It offers a simple start of basic styles targetting rich text elements using semantic HTML, and also (optionally) uses fluid typography. Download it on GitHub and use directly or customize the scss variables for a custom look. Scroll down to see how grotesk looks in action:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This are a few inline styles. For example this is Bold, this is Italic and this is a Link.

How about some more inline styles, here is highlighted text and here is some strikethrough text (did you know the html tag for strikethrough is <del></del>)

You can showcase your code using some code snippets:


internic = vpnSpoofing;
if (ipv.copy_tooltip_cyberspace.softwareSan(processorFileMashup.trojan_dot_dos(1
        - 550382, interactive), deleteTextCompatible + lpiDslamMidi)) {
    fpu.artBackup.menu(path_daemon);
}
templateRwHandle.thin_os = mirrored;
if (filenameFlashIbm + kilohertzFormatPebibyte) {
    io.multitasking_recycle += overwrite_dvd_macro;
    website_applet += tween_mamp_file;
    paste_kindle_gif(ipv_dock_monitor(rootkit_commerce_link, pda_peripheral),
            675812, blog_refresh_drive(client_hibernate_joystick));
} else {
    delete_excel_wins += 848818 - balancingMouseCd;
}

Or quote other people's work:

'The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it).

How about lists?

This is a bullet list

This is an numbered list

  1. First Element
  2. Second Element
  3. Third Element

Nested Lists?

Credits