---
title: "Base"
description: "Clover's structure alone with base.css, and its spacing with spacing.css, shown live on the Viewer and on a layout you compose. The look is yours."
url: https://clover.iiif.library.northwestern.edu/docs/styling/base
version: "4"
---
# Base
Use `base.css` for Clover’s structure alone, and `spacing.css` after it for its spacing. The look is yours.
Stylesheet
\[x]base.css\[ ]base.css + spacing.css\[ ]styles.css (fully styled)
> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
>
> [Example: the Viewer with base.css alone](https://clover.iiif.library.northwestern.edu/examples/stylesheets/base.html)
**React**
```jsx
import Viewer from "@nulib/clover";
import "@nulib/clover/base.css";
export default function Catalog() {
return (
);
}
```
**Web components**
```html
```
**React**
```jsx
import Viewer from "@nulib/clover";
import "@nulib/clover/base.css";
import "@nulib/clover/spacing.css";
export default function Catalog() {
return (
);
}
```
**Web components**
```html
```
**React**
```jsx
import Viewer from "@nulib/clover";
import "@nulib/clover/styles.css";
export default function Catalog() {
return (
);
}
```
**Web components**
```html
```
## 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
\[x]base.css\[ ]base.css + spacing.css\[ ]styles.css (fully styled)
> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
>
> [Example: a composed layout with base.css alone](https://clover.iiif.library.northwestern.edu/examples/stylesheets/compose-base.html)
**React**
```jsx
import * as Clover from "@nulib/clover";
import "@nulib/clover/base.css";
export default function Catalog() {
return (
);
}
```
**Web components**
```html
```
**React**
```jsx
import * as Clover from "@nulib/clover";
import "@nulib/clover/base.css";
import "@nulib/clover/spacing.css";
export default function Catalog() {
return (
);
}
```
**Web components**
```html
```
**React**
```jsx
import * as Clover from "@nulib/clover";
import "@nulib/clover/styles.css";
export default function Catalog() {
return (
);
}
```
**Web components**
```html
```
## 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](https://clover.iiif.library.northwestern.edu/docs/styling/variables#sizes-and-spaces). Add `spacing.css` after it to keep [Clover’s spacing](https://clover.iiif.library.northwestern.edu/docs/styling/spacing), or write your own.
**React**
Import them in place of `styles.css` and `templates.css`, then your own CSS. They serve the Viewer in every template.
**Web components**
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](https://clover.iiif.library.northwestern.edu/docs/styling/colors#contrast-guide), keep a focus ring on every control, and keep every target at least 24px.
## Next
- [Styling Clover's stylesheets, and how your CSS wins over them.](https://clover.iiif.library.northwestern.edu/docs/styling)
- [Spacing The golden scale spacing.css uses, from your 1rem.](https://clover.iiif.library.northwestern.edu/docs/styling/spacing)
- [Colors Your colors, with their contrast checked live.](https://clover.iiif.library.northwestern.edu/docs/styling/colors)
- [Classes Classes and states to select Clover by.](https://clover.iiif.library.northwestern.edu/docs/styling/classes)