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,9 +1,10 @@
---
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.