📦 styles-classic

A minimalist Docusaurus design that embraces soft, subtle details while remaining superbly functional and readable.

Try It Out

tip

You can also open the DevTools Console panel in device mode to play with these fluid custom properties.

color-primarycolor-warningcolor-dangerfont-size-0font-size-1font-size-2font-size-3font-size-4font-size-5space-xsspace-sspace-mspace-lspace-xl

minimalist

responsive

functional

readable

Common Use Cases

Use this when you want a neutral, minimalist stylesheet for your site.

Infima Differences

tl;dr

styles-classic extends from and is fully backward-compatible with Infima. It also provides fluid typography and spacing.

Docusaurus uses Infima as its styling framework. Most relevant to us are its CSS custom properties with the --ifm prefix.

Docupotamus extends from and is fully backward-compatible with those CSS custom properties. For a trivial example, we overwrite --ifm-color-gray-0 and add the new --ifm-color-gray-0-hsl.

Most importantly, we provide fluid typography and spacing with the --doc8 prefix. This modern design approach enables elements to scale proportionally with screen size without having to rely on brittle breakpoints. See here for popular properties.

Installation

tip

If you use the preset @docupotamus/docusaurus-preset-classic, you can skip this step. You don't need to install as a standalone dependency because the styles are already included in the preset.

tip

The preset is recommended over installing the standalone dependency.

npm

Yarn

Then register it in your site's docusaurus.config.js:

docusaurus.config.js

Example Usage

note

Inline styles are used here only for demonstration purposes. For production code, we recommended using a different approach that is more maintainable.

MyHeading.jsx

Customizing

Popular Properties

Name	Example	Description
--doc8-font-size-*	--doc8-font-size-0	Steps of fluid font size.
--doc8-space-*	--doc8-space-xs	Steps of fluid spacing.
--ifm-color-primary	--ifm-color-primary-darker	Primary color.
--ifm-color-white	--ifm-color-white	White color.
--ifm-color-black	--ifm-color-black	Black color.
--ifm-color-gray-*	--ifm-color-gray-200	Tones of gray color.

See all properties

Example

new-primary-color.css

What's Next?

If you have comments, questions, or are looking to contribute, please start a conversation over a GitHub issue!

Please remember to ⭐ give us a star on GitHub! ⭐