3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 01:09:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): proofread docs for alpha.20 (#1658)

Browse source 
* docs(v2): proofread docs for alpha.20

* docs(v2): update creating pages doc

* docs(v2): further updates to creating pages doc

* chore(v2): update CHANGELOG
This commit is contained in:
Yangshun Tay 2019-07-13 19:21:39 -07:00 • committed by GitHub
parent 9266dda072
commit c021367a18
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 185 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

18
website/docs/styling-layout.md
View file

@ -5,7 +5,7 @@ title: Styling and Layout
## Traditional CSS
If you're using `@docusaurus/preset-classic`, you can create your own CSS files (e.g. `src/css/custom.css`) and import them globally by passing it as an option into the preset.
If you're using `@docusaurus/preset-classic`, you can create your own CSS files (e.g. `/src/css/custom.css`) and import them globally by passing it as an option into the preset.
```diff
// docusaurus.config.js
@ -26,15 +26,15 @@ module.exports = {
Any CSS you write within that file will be available globally and can be referenced directly using string literals. This is the most traditional approach to writing CSS and is fine for small websites that do not have much customization.
## Styling your Site with Infima
## Styling your site with Infima
`@docusaurus/preset-classic` uses [Infima CSS](https://infima-dev.netlify.com/) as the underlying styling framework. Infima provides powerful and flexible layout and styling suitable for content-centric websites. For more details of Infima, check out [Infima docs](https://infima-dev.netlify.com/).
`@docusaurus/preset-classic` uses [Infima](https://infima-dev.netlify.com/) as the underlying styling framework. Infima provides flexible layout and common UI components styling suitable for content-centric websites (blogs, documentation, landing pages). For more details, check out the [Infima website](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 `src/css/custom.css` file.
```css
/**
* src/css/custom.css
* /src/css/custom.css
* You can override the default Infima variables here.
* Note: this is not a complete list of --ifm- variables.
*/
@ -49,22 +49,24 @@ When you `init` your Docusaurus 2 project, the website will be generated with ba
}
```
In future, we will provide an easier way to generate the different shades of colors.
<!-- TODO need more refinement here -->
## Styling Approaches
## Styling approaches
A Docusaurus site is a single-page React application. You can style it the way you style React apps.
There are a few approaches/frameworks which will work, depending on your preferences and the type of website you are trying to build. Websites that are highly interactive and behave more like web apps will benefit from a more modern styling approaches that co-locate styles with the components. Component styling can also be particularly useful when you wish to customize or swizzle a component.
### Global Styles
### Global styles
This is the most traditional way of styling that most developers (including non-front end developers) would be familiar with.
Assuming you are using `@docusaurus/preset-classic` and `src/css/custom.css` was passed in to the preset config, styles inside that file would be available globally.
Assuming you are using `@docusaurus/preset-classic` and `/src/css/custom.css` was passed in to the preset config, styles inside that file would be available globally.
```css
/* src/css/custom.css */
/* /src/css/custom.css */
.purple-text {
color: rebeccapurple;
}