Pinax Theme Bootstrap
In all our projects we’ve been maintaining a theme based on
Font Awesome, and
jQuery. We previously vendored these packages and had an undocumented build process pre-configured in our starter projects that use this theme. We are now using proper packaging in the starter projects.
The templates in this project are currently tested with the following versions:
Font Awesome 4.4.0
Upgrading to 6.0, you should be aware of a few changes:
extra_styleblocks have been merged into styles
extra_scriptblocks have been merged into
theme.jsscript is now loaded within a
theme_scriptblock after the
scripts block. It now expects that you'll load the necessary
jQuerylibrary at the project level in the
- No vendored assets ship with the theme anymore. You are responsible for setting up your own static assets at the project level. We have made it easy by just using one of our starter projects.
We have provided a reference implementation of using
webpack in our most popular starter project, the
pinax-project-account project. To build the
npm‘s version of
requirements.txt) simply follow these steps:
npm init # taking all defaults npm install bootstrap font-awesome jquery --save # the core libraries we need npm install webpack --save # the builder npm install extract-text-webpack-plugin --save # plugin to break apart files npm install css-loader style-loader file-loader less-loader babel-loader --save
Subsequent developers (or if you are using this starter project), can simply issue:
to install everything in the
package.json to a local
node_modules/ directory that
webpack can then use to build static files.
We also provided a working
webpack.config.js in the starter project, which provides not only a build script but also the ability to run a watcher so static assets are built as you edit them.
The starter project comes with assets prebuilt and ready to go. If you make changes to any assets you simply need to run:
npm install npm run build
If you want to have your assets automatically rebuild whenever you save changes, you can run:
npm run watch
If you need to add some other library, a datepicker for instance, you simply need to run the
npm install <package> --save command, hook it up in your
static/src/js/main.js (or elsewhere in your modules), and run
npm run build if you were not already running
npm run watch.
For more on our move to
webpackand away from vendoring, please read this blog post.