Skip to content


Folders and files

Last commit message
Last commit date

Latest commit


Repository files navigation


The Diazo-Bootstrap-Framework allows you to pull the bootstrap front-end on your web application. Therefor we use the Diazo XSLT Generator. There are also two samples included for the content providers Plone and Sphinx.

At last the Diazo-Bootstrap-Framework makes it easy to apply bootstrap-updates in your own project using the subtree merge strategy of git.

$ sudo apt-get install build-essential git python2.7 python2.7-dev python-setuptool

Before Ubuntu 11.04 the package git-core has to be installed instead of git.

$ sudo yum install make gcc-c++ zlib-devel git openssl-devel wv poppler-utils libjpeg-turbo-devel freetype libxml2-devel libxslt-devel unzip
$ sudo -u root -i
# curl -O
# tar xvzf Python-2.7.5.tgz
# cd Python-2.7.5/
# ./configure --prefix=/opt/python/2.7.5
# make
# make install
# mkdir /opt/python/2.7.5/Extensions
# cd $_
# curl -O
# /opt/python/2.7.5/bin/python

Please read Using buildout on Windows.

  1. First we clone the repository:

    $ git clone
  2. Than wie create the Diazo service and generate the bootstrap files:

    $ cd diazo_bootstrap/diazo
    $ python
    $ ./bin/buildout
  1. To create a Sphinx-based documentation, you can install it with buildout:

    $ cd diazo_bootstrap/sphinx
    $ python
    $ ./bin/buildout
  2. Then you can call the sphinx-quickstart to configure your documentation:

    $ ./bin/sphinx-quickstart

    You have to answer some questions:

    > Root path for the documentation [.]:
    > Separate source and build directories (y/N) [n]: y
    > Name prefix for templates and static dir [_]:
  3. Additionally we had to add the global navigation to the sidebars. Therefore we edit diazo_bootstrap/sphinx/source/

    html_sidebars = {
       '**': ['globaltoc.html', 'localtoc.html', 'relations.html', 'sourcelink.html', 'searchbox.html'],
  4. Next, we will create the documentation in ${buildout:directory}/docs with:

    $ cd diazo_bootstrap/sphinx
    $ ./bin/sphinxbuilder
  5. Finally, we start the Diazo-Proxy for our Sphinx-Docs:

    $ cd diazo_bootstrap/diazo/
    $ ./bin/paster serve sphinxproxy.ini

    and the Sphinx documentation with the Bootstrap-Theme will be available at http://localhost:9000.

  1. To create a Plone-Site, you can install it with buildout:

    $ cd diazo_bootstrap/plone
    $ python
    $ ./bin/buildout
  2. Then you can start the instance with:

    $ ./bin/instance start

    Now the Plone-Site will be available at http://localhost:8080/plone.

  3. Next, we start the Diazo-Proxy for our Plone-Site:

    $ cd diazo_bootstrap/diazo
    $ ./bin/paster serve ploneproxy.ini

    and the Plone-Site with the Bootstrap-Theme will be available at http://localhost:8000.

The Diazo-Bootstrap-Framework uses KSS or more precisly kss-node for generating a styleguide. More information about living styleguides you can find in the KSS specification.

To generate or update the living styleguide you have to call kss-node:

$ cd diazo_bootstrap/bootstrap
$ node_modules/kss/bin/kss-node less styleguide --l less/bootstrap.less
enerating your KSS Styleguide!

 * Source: /Users/veit/projects/vsc/diazo_bootstrap/bootstrap/less
 * Destination: /Users/veit/projects/vsc/diazo_bootstrap/bootstrap/styleguide
 * Template: /Users/veit/projects/vsc/diazo_bootstrap/bootstrap/node_modules/kss/lib/template

...compiling KSS styles
...parsing your styleguide
...generating section 1 [ Core variables and mixins ]
...generating section 2 [ Grid system and page structure ]
...generating section 3 [ Base ]
...generating section 4 [ Common ]
...generating section 5 [ Buttons & Alerts ]
...generating section 6 [ Nav ]
...generating section 7 [ Popovers ]
...generating section 8 [ Misc ]
...generating styleguide overview
...compiling additional stylesheets
 - less/bootstrap.less (less)

Generation completed successfully!

Now you can view your living styleguide in the web browser with a url similar to the following:

  1. First you have to link to the bootstrap repository:

    $ git remote add -f bootstrap

    This will add the following part in the configuration file of your Repository .git/config:

    [remote "bootstrap"]
        url =
        fetch = +refs/heads/*:refs/remotes/bootstrap/*
  2. Now you can apply changes in the bootstrap repository with:

    $ git fetch bootstrap
    $ git merge bootstrap/master
  3. Then we have to remove the generated files:

    $ cd diazo_bootstrap/bootstrap
    $ make clean
    rm -r bootstrap
  4. Last we build the bootstrap files again:

    $ make bootstrap

Have a bug? Please create an issue here on GitHub that conforms with necolass guidelines:


Veit Schiele


Copyright 2012 Veit Schiele

Licensed under a BSD-like License.


Copyright Plone Foundation

Licensed under a BSD-like License.


Copyright 2012 Twitter, Inc.

Licensed under the Apache License v2.0.

Font Awesome

Font licensed under the SIL Open Font License.

CSS, LESS, and SASS files licensed under the MIT License.

Pictograms licensed under the CC BY 3.0 License.


Copyright Zope Foundation

Licensed under the Zope Public License (ZPL) Version 2.1.


Buildout project easily integrates Bootstrap in the Diazo XSLT processor







No packages published