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/")
-
Create $DIR/static/bootstrap
-
Copy -r the "dist" folder from bootstrap into $DIR/static/bootstrap/
-
Copy -r the "docs/assets" folder from bootstrap into $DIR/static/bootstrap
-
Copy the template specific css file (say, "jumbotron.css") into $DIR/static/bootstrap/"
-
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
- Starting a new Pyramid project
- Bootstrap basic templates
- Bootstrap css
- Bootstrap styleguide
- Bootstrap templates
- More bootstrap templates
- JS DOM
- JS All DOM members
- JS API
- Pyramid Request
- Pyramid Response
- Jinja2
- Redis quickstart (remember to apt-get install redis-server)