Skip to main content

Styling and layout

A docStatic site is a single-page React application. You can style it the way you style React apps.

Global styles​

DocStatic uses the @docusaurus/preset-classic theme with CSS overrides in the /src/css/custom.css file. Any CSS you write in that file is available globally and can be referenced directly using string literals.

Styling your site with Infima​

DocStatic uses Infima as the underlying styling framework. Infima provides a flexible layout and common UI components styling suitable for content-centric websites (blogs, documentation, home pages). For more details, refer to the Infima website.

Infima uses seven shades of each color. We recommend using ColorBox to find the different shades of colors for your chosen primary color. You can use the tool on the Example page to generate the different shades for your website and copy the variables into /src/css/custom.css.

Dark mode​

In light mode, the <html> element has a data-theme="light" attribute; in dark mode, it's data-theme="dark". Therefore, you can scope your CSS to dark-mode-only by targeting html with a specific attribute.

/* Overriding root Infima variables */
[data-theme='dark'] {
  --ifm-color-primary: #4e89e8;
}
/* Styling one class specially in dark mode */
[data-theme='dark'] .purple-text {
  color: plum;
}

Mobile view​

Docstatic uses 996px as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries.

.banner {
  padding: 4rem;
}
/** In mobile view, reduce the padding */
@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

For more information, refer to Styling and Layout in the Docusaurus documentation.

Related topics

  • Creating pages – Creating pages in the CMS.
  • Docs introduction – An introduction to docStatic docs.
  • Introduction – DocStatic was designed from the ground up to be easily installed and used to get your website up and running quickly.
  • Blog – Blogging with docStatic.
  • MDX and React – Using React in docStatic Markdown documents with MDX.
  • Introduction – Wiki sidebar generation and category index document conventions.
  • Static assets – Static assets are the non-code files that are directly copied to the build output. Learn about how they are handled and the best practices for using static assets.