title
A prototype
# 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
:root{ --logH:300px; } body{margin:0;} .editor{ font-family:monospace; background:gray; width:100%; border:0; height:calc(100vh - var(--logH)); overflow:scroll; } .log{ position:fixed; bottom:0; left:0; background:tomato;width:100%; height:var(--logH); }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code