theme > pages > adb.htm
Row with Cols:
How to make a grid (like CSS grid).
Plugin components
Plugins can provide components, simple building blocks that enrich any page or layout. Check out the todo example below.
Directory Tree
Structure of Winter CMS { Basik } Theme:
ThemeName Folder Top
├── assets
├── content
└── theme.yaml
├── assets
│ ├── css
├── composer.json
│ │ ├── basiktheme.css
│ │ ├── theme.css
│ │ └── vendor.css
│ ├── fonts│ │ ├── theme.css
│ │ └── vendor.css
│ │ ├── lato-black-webfont.eot
│ │ ├── lato-black-webfont.svg
│ │ ├── lato-black-webfont.ttf
│ │ ├── lato-black-webfont.woff
│ │ ├── lato-italic-webfont.eot
│ │ ├── lato-italic-webfont.svg
│ │ ├── lato-italic-webfont.ttf
│ │ ├── lato-italic-webfont.woff
│ │ ├── lato-light-webfont.eot
│ │ ├── lato-light-webfont.svg
│ │ ├── lato-light-webfont.ttf
│ │ ├── lato-light-webfont.woff
│ │ ├── lato-regular-webfont.eot
│ │ ├── lato-regular-webfont.svg
│ │ ├── lato-regular-webfont.ttf
│ │ └── lato-regular-webfont.woff
│ ├── images│ │ ├── lato-black-webfont.svg
│ │ ├── lato-black-webfont.ttf
│ │ ├── lato-black-webfont.woff
│ │ ├── lato-italic-webfont.eot
│ │ ├── lato-italic-webfont.svg
│ │ ├── lato-italic-webfont.ttf
│ │ ├── lato-italic-webfont.woff
│ │ ├── lato-light-webfont.eot
│ │ ├── lato-light-webfont.svg
│ │ ├── lato-light-webfont.ttf
│ │ ├── lato-light-webfont.woff
│ │ ├── lato-regular-webfont.eot
│ │ ├── lato-regular-webfont.svg
│ │ ├── lato-regular-webfont.ttf
│ │ └── lato-regular-webfont.woff
│ │ ├── brain-alt-5-px.png
│ │ ├── newbrain_bandicoo.webp
│ │ ├── pages-vs-cmseditor-vs-paths.png
│ │ ├── theme-preview.png
│ │ └── winter.png
│ ├── javascript│ │ ├── newbrain_bandicoo.webp
│ │ ├── pages-vs-cmseditor-vs-paths.png
│ │ ├── theme-preview.png
│ │ └── winter.png
│ │ └── app.js
│ └── less
│ ├── controls
│ ├── elements
│ ├── layouts
│ ├── pages
│ ├── theme
│ ├── theme.less
│ └── vendor.less
│ ├── elements
│ ├── layouts
│ ├── pages
│ ├── theme
│ ├── theme.less
│ └── vendor.less
├── content
│ ├── placeholder
│ ├── basik.htm
│ └── home.htm
├── layouts
│ │ ├── layout.txt
│ │ ├── page.txt
│ │ ├── style2.txt
│ │ └── style.txt
│ ├── jeffrey.htm│ │ ├── page.txt
│ │ ├── style2.txt
│ │ └── style.txt
│ ├── basik.htm
│ └── home.htm
│ ├── default.htm
│ ├── layout_alt_one.htm
│ └── layout_alt_two.htm
├── meta│ ├── layout_alt_one.htm
│ └── layout_alt_two.htm
│ └── static-pages.yaml
├── pages
│ ├── 404.htm
│ ├── error.htm
│ ├── framework.htm
│ ├── home.htm
│ ├── index.htm
│ ├── jeffcon.htm
│ └── plugins.htm
├── partials│ ├── error.htm
│ ├── framework.htm
│ ├── home.htm
│ ├── index.htm
│ ├── jeffcon.htm
│ └── plugins.htm
│ ├── calcresult.htm
│ ├── explain
├── README.md│ ├── explain
│ │ ├── ajax.htm
│ │ └── plug.htm
│ ├── html│ │ └── plug.htm
│ │ ├── contact.htm
│ │ └── dirtree.htm
│ └── site│ │ └── dirtree.htm
│ ├── footer.htm
│ ├── header.htm
│ └── header.htm2.bak
│ ├── header.htm
│ └── header.htm2.bak
└── theme.yaml
21 directories, 56 files
Basik Diagram
themeName > content > diagram.htm
The Plugin
Manage your tasks with this simple ToDo list.
The todolist component used here is provided by the plugin called
Winter\todolist, you can find it in the plugins/winter/todolist folder.
The HTML
The HTML markup for this example:
{% component 'todolistTodo' %}
Unlike the AJAX example, components are simple building blocks that can be used with a small amount of code.
Only one line is needed:
[ end themeName/partial/explain/plug.htm ]