Using Bootstrap with PmWiki

I built a theme using bootstrap for a client, but it was fairly precise, with static content on the majority of pages, and using config.php to switch to the default theme for all admin pages.

 

 

 

Standalone Bootstrap theme

I built a theme based on the theme embedded within the Pmwiki Kit? (see below).
It’s bundled up like a “real” theme, and can be installed on any (modern) version of PmWiki.

 

Zip files now exist, but haven’t been made available properly.
Work is in-progress on php unit tests.

 

MORE FEATURES

 

 

Github repo

https://github.com/MichaelPaulukonis/pmwiki-bootstrap-skin

 

issue list

https://github.com/MichaelPaulukonis/pmwiki-bootstrap-skin/issues

 

 

Applying the darkstrap theme

Darkstrap

 

so, to do darkstrap, add after screen in the template:
\path\to\pmwikibootstrap\pub\skins\bootstrap-fluid\bootstrap-fluid.tmpl

 

<!-- Le styles -->
    <link href="$FarmPubDirUrl/css/screen.css" rel="stylesheet">

 

I downloaded the zip of darkstrap from https://github.com/danneu/darkstrap
placed JUST the darkstrap.css file into \path\to\pmwikibootstrap\pub\css
added the third line below line to the template:

<!-- Le styles -->
    <link href="$FarmPubDirUrl/css/screen.css" rel="stylesheet">
    <link href="$FarmPubDirUrl/css/darkstrap.css" rel="stylesheet">

 

It looks pretty good straight out of the box.
Although maybe the header should be dark instead of light.
Table of contents doesn’t work so well
headline is white-on-white

 

the default theme darkstrap theme also looks good, but has some issues

 

 

Darkstrap is included by default, as well as flat-ui. not sure that’s handled in licensing. ugh.

 

 

 

PmWiki Bootstrap Compass preconfigured wiki-kit

I am looking at the pmwiki Bootstrap theme/kit (github repo)

 

I’ve made some minor contribs to this project.
It’s bootstrap skin is the basis for my standalone skin

 

setup was easy
the actual bootstrap css is called screen.css

 

Uses Compass, which uses SASS.
You can see the SASS files
Unfortunately, SASS is a Ruby-thing.
Which adds one more language you might not be using.

 

I use Javascript and node.js.
Which also might add one more language you might not be using.
AAAARGH.

 

I’m going to look into this, I suppose.
But I don’t really want to do Ruby dev.
Still, it’s a good project.

 

My own pmwiki-kit

this has nothing to do with bootstrap
Except for the fact that I’d include my bootstrap-theme by default
And not use SASS

 

 

 

 

bootstrap formatting things

TODO: notes on how to do bootstrap things inside of PmWiki
at first blush they seem to be not-as-easy-as-they-could-be
but not really sure how else to accomplish it

 

PmWiki Kit Main HomePage

 

Here is some of the markup that ships with the homepage, as shown above.
It shows use of the hero-unit, two different buttons, and a fluid-row with 3 spans

(:div class="hero-unit":)
! PmWiki Kit

A pre-configured [[http://www.pmwiki.org/|PmWiki]]%apply=link newwin% starter kit with a selection of [[http://www.pmwiki.org/wiki/Cookbook/Cookbook|community addons]]%apply=link newwin%, a [[http://twitter.github.com/bootstrap/|Bootstrap]]%apply=link newwin% skin and [[http://compass-style.org/|Compass]]%apply=link newwin% stylesheets.

Works out of the box. Download it, point your web server to it and start editing your pages. Default login is @@admin : admin@@, perhaps [[Main.PmwikiKitSetup|change that]] before you go live.

[[https://github.com/gambhiro/pmwiki-kit-bootstrap-compass|Github Repo]]%apply=link newwin class="btn btn-primary"% @@git clone git://github.com/gambhiro/pmwiki-kit-bootstrap-compass.git@@
(:divend:)

(:div class="row-fluid":)
(:div2 class="span4":)
!! Addons

* [[http://www.pmwiki.org/wiki/Cookbook/RenamePage|RenamePage]]

(:div2end:)
(:div2 class="span4":)
!! Editing

The [[PmWiki/basic editing]] page describes how to create pages
in PmWiki.  You can practice editing in the [[wiki sandbox]].

[[PmWiki/basic editing|+]]%apply=link class="btn"%
(:div2end:)

(:div2 class="span4":)
!! More
More information about PmWiki is available from

[[http://www.pmwiki.org]]%apply=link class="btn"%
(:div2end:)
(:divend:)

 

 

Integrating PmWikiBootstrap into an existing wiki

I installed pmwiki-2.2.51 with a minimal config.php file copied directly from sample-config.php
The following folders need to be copied:

  • pub/skins/bootstrap-fluid
  • pub/javascripts
  • pub/images
  • pub/css
    • /screen.css
    • /ie.css

 

Then add the following line to config.php:
$Skin = 'bootstrap-fluid';

 

apply scope

pmwiki-kit comes with the blogit package, which sets up some configs of its own.

 

At least the following from blogit is required for markup styles expected by pmwiki-bootstrap:

 

 

$WikiStyleApply['link'] = 'a';  #allows A to be labelled with class attributes

 

so that the following might be implemented properly:

 

[[PmWiki/basic editing|+]]%apply=link class="btn"%

 

 

other bootstrap examples to look at

polymer

http://polymer-project.appspot.com/ - I’m recognizing a lot of the components now.
That’s a non-inverted navbar at top.
The whole theme looks lighter and .... arier? than the bootstrap in the kit-extracted version.
What’s the difference?

 

Maybe no difference beyond the header, and the “fact” that the sample image includes the hero-unit, which has a gray background.

 

Maybe the header style should be a theme option....

 

unofficial github buttons

http://ghbtns.com/

 

I like the emptyness -- could we do this with pmwiki? no headers, no right or left bars?

 

some sort of per-page markup (I believe if stuck in the group-header it would be respected in all group pages, no?)....

 

 

Licensing

Darkstrap doesn’t appear to have any copyrights or licensing attached to it AFAIK

 

PmWikiBootstrap would be covered by the GNU General Public License:

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

 

Re-distributed components (PmWiki, bootstrap, cookbook recipes) carry whatever licenses they already have.

 

See Also

TwitterBootstrap
TwitterBootstrap#themes
Skins:TwitterBootstrap
https://github.com/gambhiro/pmwiki-kit-bootstrap-compass
Skins:SkinGuidelines
PmWiki:Skins

 

https://github.com/tamouse/pmwiki-bootstrap-skin/ - another pmwiki bootstrap skin. tamouse is working in a different direction, with different tools. as of 2013.09.07 some things I’m interested in in the dropdowns branch.

 

 

Category Tags

theming styles pmwikidevelopment php css bootstrap