Baseline Styles

Optional

If you want a ready-made starting point for writing pages, add the optional baseline.css.

It takes care of:

Usage

Download baseline.css directly from jsDelivr, or reference it from your HTML.

Load the theme first, followed by the optional baseline and the bundle:

<link rel="stylesheet" href="path/to/default.theme.css" />
<link rel="stylesheet" href="path/to/baseline.css" /> <!-- 👈 Add this line! -->
<link rel="stylesheet" href="path/to/bundle.css" />

With a package manager:

import "sashimi-ui/default.theme.css";
import "sashimi-ui/baseline.css"; // 👈 Add this line!
import "sashimi-ui/bundle.css";

Example

This example uses only the default theme and baseline.css; no component bundle or page-specific styles are applied.

The source remains ordinary semantic HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Enjoying Sashimi</title>
    <link rel="stylesheet" href="path/to/default.theme.css" />
    <link rel="stylesheet" href="path/to/baseline.css" />
  </head>
  <body>
    <h1>Enjoying Sashimi</h1>
    <p>
      Sashimi is a Japanese dish of carefully sliced raw seafood, usually served
      with soy sauce and condiments.
    </p>
    <p>
      Because the preparation is so simple, its character depends on the
      <mark>quality of the ingredients</mark>.<br />
      The cut, temperature, and presentation shape the experience too.
    </p>

    <menu>
      <li><a href="#cutting">Cutting and texture</a></li>
      <li><a href="#serving">Serving sashimi</a></li>
    </menu>

    <figure>
      <img
        src="/sashimi.jpg"
        width="240"
        height="160"
        alt="Slices of tuna, salmon, and other sashimi arranged over ice"
      />
      <figcaption>
        Presentation makes the most of the natural colors and shapes of each
        fish.
      </figcaption>
    </figure>

    <h2 id="cutting">Cutting and Texture</h2>
    <p>
      The same fish can feel different depending on how it is cut. Soft fish
      such as tuna suit thick slices, while firm white fish are often sliced
      thinly.
    </p>

    <h3>Common Cutting Styles</h3>
    <ul>
      <li><strong>Hira-zukuri:</strong> thick, rectangular slices</li>
      <li><strong>Sogi-zukuri:</strong> broad, thin slices</li>
      <li><strong>Hoso-zukuri:</strong> fine, delicate strips</li>
    </ul>

    <h2 id="serving">Serving Sashimi</h2>
    <p>
      Wasabi and ginger add contrast to the fish and refresh the palate. Begin
      with delicate white fish, then move toward richer cuts.
    </p>

    <h3>A Simple Tasting Order</h3>
    <ol>
      <li>White fish such as sea bream</li>
      <li>Lean tuna or bonito</li>
      <li>Salmon, yellowtail, or fatty tuna</li>
    </ol>

    <h4>A Little Soy Sauce Goes a Long Way</h4>
    <p>
      Too much soy sauce can hide the fish's natural aroma. Lightly dip just one
      side of each slice.
    </p>
  </body>
</html>