Ratata

More web standards, less bullshit.

Ratata is a HTML, CSS and JavaScript boilerplate using just HTML, CSS and JavaScript. It's main focus is on web standards, accessibility and performance. Check it out on CodePen.

Table of contents

• Getting Started
• Credits, Attribution and Inspiration
• Browser Support

Getting Started

• Download the latest release. You may need to copy and paste the contents of the unzipped Ratata-0.x.x/src folder into your project directory.
• Install Ratata from GitHub using npm: npm install ratata. You may need to copy and paste the contents of the node_modules/ratata/src folder into your project directory.

Variables

The file _variables.css in the src folder contains variables for all layout, spacing and typography used in Ratata.

:root {
  /**
   * Spacing
   *
   */
  --scroll-padding-top: calc((100 / 18) * 1rem);
  --scroll-padding-bottom: 0;

  /**
   * Layout
   *
   */
  --container-max-width: calc((1848 / 18) * 1rem);
  --container-small-max-width: calc((660 / 18) * 1rem);
  --container-padding-inline: calc((24 / 18) * 1rem);

  /**
   * Typography
   *
   */
  --base-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif;
  --base-font-size: calc((18 / 16) * 1rem);
  --base-font-weight: 400;
  --base-line-height: calc((31 / 18));

  /* b, strong */
  --bold-font-weight: 700;

  /* small */
  --small-font-size: calc((16 / 18) * 1rem);
  --small-line-height: calc((27 / 16));

  /* Blockquote */
  --blockquote-font-size: calc((23 / 18) * 1rem);
  --blockquote-line-height: calc((38 / 23));

  /* Headings */
  --headings-font-family: var(--base-font-family);
  --headings-font-weight: 700;

  /* h1 */
  --h1-font-size: calc((47 / 18) * 1rem);
  --h1-line-height: calc((73 / 47));

  /* h2 */
  --h2-font-size: calc((37 / 18) * 1rem);
  --h2-line-height: calc((58 / 37));

  /* h3 */
  --h3-font-size: calc((29 / 18) * 1rem);
  --h3-line-height: calc((47 / 29));

  /* h4 */
  --h4-font-size: calc((23 / 18) * 1rem);
  --h4-line-height: calc((38 / 23));
}

A default color scheme for light and dark mode can be found in src/themes/.

Credits, Attribution and Inspiration

• Stephanie Eckles' Pure CSS Custom Checkbox Style
• Stephanie Eckles' Pure CSS Custom Styled Radio Buttons
• Manuel Matuzović's Removing list styles without affecting semantics
• David Bushell's CSS Button Styles You Might Not Know
• Adrian Roselli's Progressively Enhanced HTML Accordion

Browser Support

Ratata supports the latest, stable releases of all major browsers.