Stolon

title

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>A prototype</title>
    <link href='css/main.css' rel='stylesheet'>
    <script src='js/main.js' defer></script>
  </head>
  <body>
    <div contenteditable class="editor">
      # VTF website v3 Design guide

## Good practices

- In general, look at what already exists to make your choice
- Avoid dobule blank line in code
- Keep indentation clean

## Naming convention

- HTML classes are in kebab-case : `.this-is-a-class`
- php variables are in camelCase : `$versionAuthors`
- filenames are kebab-case : `news-post.php`

## CSS templating

Use the box system to create content blocks:

- see box mini-framework in `main.css`
- a `.b-* element` should be child of a `.b-contener` parent element
- `.b-1-1` for the element to takes full with of its parent (100%)
- `.b-1-2` for the element to takes 1/2 with of its parent (50%)
- `.b-1-3` for the element to takes 1/3 with of its parent (33.33%)

```
┌──.b.contener────────────────────────────────────────────┐
│  ┌──.b-1-1───────────────────────────────────────────┐  │
│  │                                                   │  │
│  │                                                   │  │
│  └───────────────────────────────────────────────────┘  │
│  ┌──.b-1-2────────────────┐ ┌──.b-1-2────────────────┐  │
│  │                        │ │                        │  │
│  │                        │ │                        │  │
│  │                        │ │                        │  │
│  └────────────────────────┘ └────────────────────────┘  │
│  ┌──.b-1-3───────┐ ┌──.b-1-3───────┐ ┌──.b-1-3───────┐  │
│  │               │ │               │ │               │  │
│  │               │ │               │ │               │  │
│  └───────────────┘ └───────────────┘ └───────────────┘  │
└─────────────────────────────────────────────────────────┘

```

Add `.text` to boxes that will require `p` `ul`,`li` to be formatet for reading (list will be bullets)

Add `.button` to links that needs to become button-like

## Builk change in Processwire

You can edit many pages at once with the module _ProcessAdminActions_. Check what it can do in Module > Site > ProcessAdminActions!

## Text blocks styles

You may need specific classes to be used in text blocks. CKEditor has a “Style” dropdown you can use and customize. To do so, go to `mystyles:/site/modules/InputfieldCKEditor/VTF_styles.js` and add your own style. [Documentation here](https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set)
    </div>
    <div class="log">
      log
    </div>
  </body>
  </html>

snap save new fork

gallery