Style System
Directory Structure
A style has the following directory structure by default:
style-name/ info.yaml settings.scss style.scss static/
info.yaml
The info.yaml
file must contain the following information:
name
- The name of the style; should match directory name.version
- An integer or float version representation.description
- A short description of the style.long_description
- A more detailed description of the style.author_name
- Name of the author.author_email
- The email address of the author.author_website
- The website of the author or style.
Example from the default
style:
name: "default" version: 0.9 description: "The default sleek style for PyKwiki 2" long_description: A green style with a collapsing table of contents. Mobile friendly. author_name: "Aaron Meier" author_email: "webgovernor@gmail.com" author_website: http://nullism.com
settings.scss
This file typically contains basic settings that a user can tweak.
style.scss
This is the meat of the style. It should implement classes found in default classes.
static/
This directory contains any static files to be included in the theme.
As a minimum, the root of this directory should have the following files:
favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
Default Classes
These classes are included with most PyKwiki styles.
alert
The alert alert-x
classes are used to highlight important information.
col-N
The .row
and .col-N
classes are the basis of the grid system.
Each row is 12 columns wide. The columns collapse when
the browser window is below $small-page-width
in pixels.
For example, the following html:
<div class="row"> <div class="col col-2 color-div"> <h2>.col .col-2</h2> </div> <div class="col col-3 color-div"> <h2>.col .col-3</h2> </div> <div class="col col-4 color-div"> <h2>.col .col-4</h2> </div> <div class="col col-3 color-div"> <h2>.col .col-3</h2> </div> </div>
Produces:
.col .col-2
.col .col-3
.col .col-4
.col .col-3
All columns examples:
.col .col-2
.col .col-3
.col .col-4
.col .col-3
.col .col-6
.col .col-6
.col .col-8
.col .col-4
.col .col-10
.col .col-2
.col .col-12
color-div
Styles a div with the $primary-color
setting.
Example:
This is in a colored div