edit example

weru

28.58.2020 54a7c1a46b40470f22b42c72219c4eac7a87daf2

edit example

 exampleSite/content/docs/compose/customize.md

New file
@@ -0,0 +1,41 @@
+++
title = "Customize layouts & components"
description = "basic configuration"
# weight = 10
+++

### Shortcodes modifiers

These modifiers are classes you can use with shortcodes to customize the look and feel of your layouts and components.

#### Grid
|  modifier |  space    |
| --- | --- |
| grid-2 | 2 columns |
| grid-3 | 3 columns |
| grid-4 | 4 columns |

#### Spacing
|  modifier |  space    |
| ---| --- |
| mt-1 | 1.5rem top margin |
| mt-2 | 3rem top margin |
| mt-3 | 4.5rem top margin |
| mt-4 | 6rem top margin |

> use pt-1 ~ pt-4 for top padding

|  modifier |  space    |
|---| --- |
| mb-1 | 1.5rem bottom margin |
| mb-2 | 3rem bottom margin |
| mb-3 | 4.5rem bottom margin |
| mb-4 | 6rem bottom margin |

> use pb-1 ~ pb-4 for bottom padding

### How do I disable dark mode?

Under `params` add `enableDarkMode = false` to your `config.toml` file. If your site is based on the exampleSite, the value is already included; you only need to uncomment it.

> The user will still have the option to activate dark mode, if they so wish through the UI

 exampleSite/content/docs/compose/graphs-charts-tables.md

@@ -1,5 +1,5 @@
+++
title = "Bar Graphs, Charts & Tables"
title = "Graphs, charts & dynamic tables"
weight = 9
[dataset1]
  fileLink = "content/projects.csv" # path to where csv is stored
@@ -22,8 +22,7 @@

Once you have a csv file, you display the charts as follows:

### Example
#### __Show a pie, doughnut & bar chart at once__
#### Show a pie, doughnut & bar chart at once

Firstly define the data you want to display from the front matter:

@@ -63,8 +62,6 @@
  {{< chart "dataset1" "table" >}}
{{< /block >}}

### Example 2

Firstly define the data you want to display from the front matter:

```toml
@@ -81,7 +78,7 @@
  table = false # show table listing the chart data
```

#### __Show only a pie and a doughnut chart__
#### Show only a pie and a doughnut chart

```markdown
// from page content

 exampleSite/content/docs/compose/install-theme.md

File was renamed from exampleSite/content/docs/compose/getting-started.md
@@ -1,13 +1,13 @@
---
title: "Getting Started"
title: "Install theme"
weight: 2
description: >
  This page tells you how to get started with the Compose theme, including installation and basic configuration.
  This page tells you how to get started with the Compose theme.
---

## Prerequisites and installation
### Prerequisites

### Install Hugo
First ensure that you have hugo installed.

You need a [recent **extended** version](https://github.com/gohugoio/hugo/releases) (we recommend version 0.61 or later) of [Hugo](https://gohugo.io/) to do local builds and previews of sites (like this one) that uses this theme.


 exampleSite/content/docs/compose/overview.md

File was deleted

 exampleSite/content/docs/compose/search.md

@@ -1,5 +1,5 @@
+++
title = "Search"
title = "Search Function"
description = ""
weight = 8
+++

 exampleSite/content/docs/compose/shortcodes-example.md

@@ -5,7 +5,7 @@
  This is how the shortcodes would look like in action
---

### Using blocks, columns & buttons
### Blocks, columns & buttons

```sh
{{</* block "grid-2" */>}}

 exampleSite/content/docs/compose/shortcodes.md

@@ -1,13 +1,14 @@
---
title: "Shortcodes"
weight: 5
description: >
  Use hugo shortcodes to quickly compose site pages.
---
+++
title = "Shortcodes"
weight = 5
description = "Use hugo shortcodes to quickly compose your documentation pages."
+++

Instead of writing all your site pages from scratch, Hugo lets you define and use [shortcodes](https://gohugo.io/content-management/shortcodes/).

Why shortcodes? While markdown is sufficient to produce simple pages, it's insufficient where complex page structures are needed. Thusly, whenever we need special styling, shortcodes compliment the shortcomings of markdown.

This way, you can side step complex html and css boilerplate in your content files. 
This way, you can side step complex html and css boilerplate in your content files.

Sometimes, the shortcode will wrap content, sometimes it won't. When content is wrapped, a closing shortcode tag is needed. Please see the link I provided above and the markdown files for examples. You'll get the gist pretty quickly.