Minimal Classless CSS Framework with 8 Themes – Sakura

Sakura is a minimal, classless CSS framework that gives plain HTML pages a centered reading layout and consistent element styles.

It works directly with semantic HTML, with no JavaScript initialization or required CSS classes.

Features

• Responsive font sizes for smaller screens.
• 8 ready-made themes.
• Accent borders and backgrounds for blockquotes.
• Styled links, including visited and hover states.
• Full-width tables with cell dividers.
• Distinct backgrounds for inline and block code.
• Styled form fields, buttons, and disabled controls.
• Images and videos scaled to their container width.

How To Use It

Basic Usage

Load the Sakura stylesheet in the document.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Field Notes</title>
  <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css">
</head>
<body>
  <main>
    <h1>Field Notes</h1>
    <p>Notes about design and development.</p>
    <p><a href="#entries">View the entries</a></p>
    <h2 id="entries">Latest Entries</h2>
    <ul>
      <li>A typography experiment</li>
      <li>Building a reading layout</li>
    </ul>
    <blockquote>
      <p>Start with clear HTML.</p>
    </blockquote>
  </main>
</body>
</html>

The stylesheet is also available as an npm package:

npm install sakura.css

Choose a Theme

Sakura includes 8 compiled stylesheets. Use one for a fixed theme.

For example, replace the default stylesheet with the Pink theme:

<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-pink.css">

Use the System Dark Mode Preference

Load the regular theme for light screens and the dark stylesheet for devices that request dark mode. Put the dark stylesheet second, with its media condition:

<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen">
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)">

Create a Custom Theme with Sass

Sakura’s theme source uses Sass variables. Install the package and the Sass compiler, then create a theme.scss file in the project root. The shared SCSS partial uses the eight variables defined here.

npm install sakura.css
npm install --save-dev sass

$color-blossom: #246f83;
$color-fade: #805080;
$color-bg: #fafaf6;
$color-bg-alt: #ecede8;
$color-text: #333c40;
$font-size-base: 1.8rem;
$font-family-base: system-ui, sans-serif;
$font-family-heading: Georgia, serif;
@import "node_modules/sakura.css/scss/main";

Compile theme.scss and load the generated CSS file.

npx sass theme.scss theme.css

<link rel="stylesheet" href="theme.css">

Sass Theme Variables

All eight theme variables are listed below with the values used by Sakura’s default theme.

Change the Reading Width

Sakura sets body to max-width: 38em and centers it with automatic horizontal margins. These global element rules can also affect existing page layouts. For a wider reading column, place a custom stylesheet after Sakura:

<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css">
<link rel="stylesheet" href="site.css">

/* site.css */
body {
  max-width: 52em;
}

Alternatives And Related Resources

• Minimal Classless CSS Framework – Simple.css
• Minimal Clean CSS Design System – Pico.css
• Classless CSS Framework with UI Components – Sumi.css
• Classless Themeable CSS Framework For Modern Web Design – Dev.css