Skip to Content

Base

Use base.css for Clover’s structure alone, and spacing.css after it for its spacing. The look is yours.

Stylesheet
import Viewer from "@nulib/clover";
import "@nulib/clover/base.css";
 
export default function Catalog() {
  return (
    <Viewer iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json" />
  );
}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/base.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>
 
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
></clover-viewer>
import Viewer from "@nulib/clover";
import "@nulib/clover/base.css";
import "@nulib/clover/spacing.css";
 
export default function Catalog() {
  return (
    <Viewer iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json" />
  );
}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/base.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/spacing.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>
 
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
></clover-viewer>
import Viewer from "@nulib/clover";
import "@nulib/clover/styles.css";
 
export default function Catalog() {
  return (
    <Viewer iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json" />
  );
}
<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>
 
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
></clover-viewer>

Composed layouts

A layout you compose takes the same stylesheets, component by component. On base.css alone, each keeps its structure and nothing more: Items’ thumbnails touch, and Metadata’s entries run together. spacing.css puts the room back between them, and styles.css the rest of the look, such as the pictures’ corners and the labels’ weight. The title is your page’s heading in every case.

Stylesheet
import * as Clover from "@nulib/clover";
import "@nulib/clover/base.css";
 
export default function Catalog() {
  return (
    <Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
      <Clover.Label as="h3" />
      <Clover.Summary />
      <Clover.Body />
      <Clover.Items />
      <Clover.Metadata />
    </Clover.Root>
  );
}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/base.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>
 
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
>
  <clover-label as="h3"></clover-label>
  <clover-summary></clover-summary>
  <clover-body></clover-body>
  <clover-items></clover-items>
  <clover-metadata></clover-metadata>
</clover-root>
import * as Clover from "@nulib/clover";
import "@nulib/clover/base.css";
import "@nulib/clover/spacing.css";
 
export default function Catalog() {
  return (
    <Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
      <Clover.Label as="h3" />
      <Clover.Summary />
      <Clover.Body />
      <Clover.Items />
      <Clover.Metadata />
    </Clover.Root>
  );
}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/base.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/spacing.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>
 
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
>
  <clover-label as="h3"></clover-label>
  <clover-summary></clover-summary>
  <clover-body></clover-body>
  <clover-items></clover-items>
  <clover-metadata></clover-metadata>
</clover-root>
import * as Clover from "@nulib/clover";
import "@nulib/clover/styles.css";
 
export default function Catalog() {
  return (
    <Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
      <Clover.Label as="h3" />
      <Clover.Summary />
      <Clover.Body />
      <Clover.Items />
      <Clover.Metadata />
    </Clover.Root>
  );
}
<script src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/index.umd.js"></script>
 
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
>
  <clover-label as="h3"></clover-label>
  <clover-summary></clover-summary>
  <clover-body></clover-body>
  <clover-items></clover-items>
  <clover-metadata></clover-metadata>
</clover-root>

Using base.css

For a look of your own, use base.css in place of Clover’s styles. It keeps the structure of every component and template (what shows, where each box sits, what lies over what, how large each box and target is, and the cursor over what you can press or drag) and defines the scale’s custom properties. Add spacing.css after it to keep Clover’s spacing, or write your own.

Import them in place of styles.css and templates.css, then your own CSS. They serve the Viewer in every template.

Link them before the elements’ script, then your own CSS. The elements find base.css as they load and bring none of Clover’s styles. If it comes later, they keep Clover’s rather than restyle what’s already on the page. With a bundler, import @nulib/clover/base.css before @nulib/clover/web-components.

A layout that works

base.css alone gives you a layout that works:

  • Whatever lies over other content (a control’s name, a menu, a sticky heading, the Panel over a narrow page) gets a surface in your page’s colors, Canvas and CanvasText, until your look replaces it.
  • A control Clover’s look restyles, such as a language’s code or the eye that hides a set, stays the browser’s radio or checkbox, focus ring and all.
  • Margins and paddings that hold the layout stay: an auto margin that aligns a box, the room PanelToggle keeps in its corner, and Items’ zero margins, which undo the 40px a browser puts on each side of a figure.
  • A hotspot over the picture stays see-through.
  • SplitHandle, the bar you drag between the panes to resize the Panel, shows from top to bottom in your text’s color.

Your look decides colors and focus. Check its colors in the contrast guide, keep a focus ring on every control, and keep every target at least 24px.

Next