diff --git a/www/pages/docs/build.md b/www/pages/docs/build.md index 931d4ed4f..b2abf13bf 100644 --- a/www/pages/docs/build.md +++ b/www/pages/docs/build.md @@ -6,8 +6,61 @@ index: 4 linkheadings: 3 --- -# Build Configurations -> ⛔ [_**Coming Soon!**_](https://github.com/ProjectEvergreen/greenwood/issues/426) +## Build Configurations +> ⛔ [_**More coming Soon!**_](https://github.com/ProjectEvergreen/greenwood/issues/426) + +**Greenwood** offers the ability to extend some of the internal tooling used to better customize the project for those with more advanced use cases than those offered by Greenwood's default. Greenwood is farily unopinionated in its defaults and aims to provide support for modern web standards that are >= Stage 3 (where applicable). + +> _For markdown specific options, please see our docs section on [markdown](/docs/markdown/)._ + +### PostCSS + +To provide addition configurations and optimizations around CSS, user's can add a _postcss.config.js_ file within a project's root directory to take advantage of [**PostCSS**](https://postcss.org/). + +For example, if you wanted to write CSS with nested selectors, you would want do the following: + +1. Install the relevant PostCSS plugin + ```shell + $ npm install postcss-nested --save-dev + ``` +1. Create a _postcss.config.js_ file and `require` your plugin + ```js + module.exports = { + plugins: [ + require('postcss-nested') + ] + }; + ``` +1. Now you can write nested CSS! + ```css + :host { + & .card { + padding: 2.5rem; + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #fff; + background-clip: initial; + text-align: center; + + & .body { + padding:10px; + } + + @media(max-width:768px) { + padding:0; + } + } + } + ``` + +> _For reference, [this is the default _postcss.config.js_](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/config/postcss.config.js) being provided by Greenwood._ + +