mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-14 16:52:39 +02:00
54 lines
2 KiB
Markdown
54 lines
2 KiB
Markdown
---
|
|
id: styling-layout
|
|
title: Styling and Layout
|
|
---
|
|
|
|
## Styling your site with Infima
|
|
|
|
The classic template of Docusaurus uses [Infima](https://infima-dev.netlify.com/) as the underlying styling framework. Infima provides powerful and flexible layout and styling for content-centric websites. For more details of Infima, check out [Infima docs](https://infima-dev.netlify.com/).
|
|
|
|
When you `init` your Docusaurus 2 project, the website will be generated with basic Infima stylesheets and default styling. You may customize the styling by editing the `custom.css` file under your site's `/css` directory:
|
|
|
|
```css
|
|
/**
|
|
* /css/custom.css
|
|
* You can override the default Infima variables here.
|
|
* this is not a complete list of --ifm- variables
|
|
*/
|
|
:root {
|
|
--ifm-color-primary: #25c2a0;
|
|
--ifm-color-primary-dark: rgb(33, 175, 144);
|
|
--ifm-color-primary-darker: rgb(31, 165, 136);
|
|
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
|
--ifm-color-primary-light: rgb(70, 203, 174);
|
|
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
|
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
|
}
|
|
```
|
|
|
|
<!-- TODO need more refinement here -->
|
|
|
|
## Styling your components
|
|
|
|
Your whole Docusaurus 2 site is a React app. Any styling that works with React will work with your site.
|
|
|
|
Component styling can be particularly useful when you wish to customize or swizzle a component. And there are a few frameworks we recommend that work particularly well with components.
|
|
|
|
### With CSS Modules
|
|
|
|
To style your components using CSS Modules, name your stylesheets as `xxx.module.css`. The build step will pick up such files as CSS Module stylesheets. Then, you may get the generated class names from the module:
|
|
|
|
```js
|
|
import styles from './styles.module.css';
|
|
|
|
export default () => (
|
|
<main className={styles.main}>
|
|
<h1 className={styles.heading}>Hello!</h1>
|
|
<article className={styles.docContent}>My doc</article>
|
|
</main>
|
|
);
|
|
```
|
|
|
|
### With CSS-in-JS Frameworks
|
|
|
|
This section is a work in progress. [Welcoming PRs](https://github.com/facebook/Docusaurus/pulls).
|