/webtools

Pyramid related web templating tools

Primary LanguagePythonDo What The F*ck You Want To Public LicenseWTFPL

Some tools for templating webpages

(mainly just for myself)

bootstrap2jinja.py

  • I'm using bootstrap with pyramid
  • This script turns a bootstrap template into a pyramid-compatible jinja2 template

First, start a new pyramid project

Download bootstrap by taking the "Source Code" option from this page

That gives you the bootstrap library and the example templates. The latter live in "docs/examples".

Then do this (you can use this script):

$DIR = pyramid projects code dir (where you have the subdirectory "static/")

  1. Create $DIR/static/bootstrap

  2. Copy -r the "dist" folder from bootstrap into $DIR/static/bootstrap/

  3. Copy -r the "docs/assets" folder from bootstrap into $DIR/static/bootstrap

  4. Copy the template specific css file (say, "jumbotron.css") into $DIR/static/bootstrap/"

  5. Copy the template specific index.html into $DIR

Finally, run python3 bootstrap2jinja.py namespace index.html > templates/mytemplate.jinja2

where namespace is the namespace of your pyramid project (say, my.awesome.project), i.e. links will look like this:

<link href="{{request.static_url('NAMESPACE:static/bootstrap/dist/css/bootstrap.min.css')}}" rel="stylesheet">

(most of the time the namespace is just the name of your python package's directory)

After that, it's time to turn templates/mytemplate.jinja2 into template mother class. Edit it & add this section therein:

{% block content %}
{% endblock content %}

Bonus

If you define (any) extra parameter, say python3 bootstrap2jinja.py namespace index.html 1 > templates/mytemplate.jinja2, the scripts will turn any js downloaded from cdn's into local files.

After that, you have to run the script __download__.bash in your $DIR/static/js/ directory: it will download automagically the .js files

A sample directory tree:

your_package_name/
   your_package_name/
        static/
            bootstrap/
                jumbotron.css
                assets/
                    brand
                    css
                    ...
                dist/
                    css
                    fonts
                    ...
            js/
                jquery-1.12.4.min.js
                ...

To test, go to the main dir and launch the webserver with:

pserve --reload development.ini

Link collection