Content block: theme.htm

Basik Theme

Filename - theme.htm

This file is sibling of jeffrey.htm, and welcome.htm

Winter CMS Basik Theme that Basiknstrates the basic core functionality and utilizes the accompanying Basik plugin. It is a great theme to copy when building a site from scratch.

The theme acts as a reference implementation for default component markup when distributing plugins.

Have fun!

Clean up instructions

If you clone this theme to use as a starting point. You may follow these instructions to clean up:

  1. Delete the pages/ajax.htm and pages/plugins.htm files.
  2. Delete the partials/framework/calcresult.htm partial file.
  3. Delete the partials/explain/ directory and contents.
  4. Delete the content/placeholder/ directory and contents.

Combining CSS and JavaScript

This theme doesn't combine assets for performance reasons. To combine the stylesheets, replace the following lines in the default layout. When combining with this theme, we recommend enabling the config enableAssetDeepHashing in the file config/cms.php.

Uncombined stylesheets:

<link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">
<link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">

Combined stylesheets:

<link href="{{ [
    '@framework.extras',
    'assets/less/vendor.less',
    'assets/less/theme.less'
]|theme }}" rel="stylesheet">

Note: Winter also includes an SCSS compiler, if you prefer.

Uncombined JavaScript:

<script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
<script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
<script src="{{ 'assets/javascript/app.js'|theme }}"></script>
{% framework extras %}

Combined JavaScript:

<script src="{{ [
    '@jquery',
    '@framework',
    '@framework.extras',
    'assets/vendor/bootstrap.js',
    'assets/javascript/app.js'
]|theme }}"></script>

Important: Make sure you keep the {% styles %} and {% scripts %} placeholder tags as these are used by plugins for injecting assets.

End of theme.htm

end jumbotron

Directory Tree

Structure of Winter CMS { Basik } Theme:

ThemeName Folder Top
├── assets
│   ├── css
│   │   ├── basiktheme.css
│   │   ├── theme.css
│   │   └── vendor.css
│   ├── fonts
│   │   ├── 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
│   │   ├── brain-alt-5-px.png
│   │   ├── newbrain_bandicoo.webp
│   │   ├── pages-vs-cmseditor-vs-paths.png
│   │   ├── theme-preview.png
│   │   └── winter.png
│   ├── javascript
│   │   └── app.js
│   └── less
│       ├── controls
│       ├── elements
│       ├── layouts
│       ├── pages
│       ├── theme
│       ├── theme.less
│       └── vendor.less
├── composer.json
├── content
│   ├── placeholder
│   │   ├── layout.txt
│   │   ├── page.txt
│   │   ├── style2.txt
│   │   └── style.txt
│   ├── jeffrey.htm
│   ├── theme.htm
│   └── welcome.htm
├── layouts
│   ├── default.htm
│   ├── layout_alt_one.htm
│   └── layout_alt_two.htm
├── meta
│   └── static-pages.yaml
├── pages
│   ├── 404.htm
│   ├── error.htm
│   ├── framework.htm
│   ├── home.htm
│   ├── index.htm
│   ├── jeffcon.htm
│   └── plugins.htm
├── partials
│   ├── calcresult.htm
│   ├── explain
│   │   ├── ajax.htm
│   │   └── plug.htm
│   ├── html
│   │   ├── contact.htm
│   │   └── dirtree.htm
│   └── site
│       ├── footer.htm
│       ├── header.htm
│       └── header.htm2.bak
├── README.md
└── theme.yaml

21 directories, 56 files

Set the CSS so the current page will be highlighted