# 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)
log