To customize the look of Abelujo, you can set your CSS rules in each app <name of the app>/static/<name of the app>/style.css file, i.e. in search/static/search/style.css. This file will be loaded automatically by Django, and collected when we run collectstatic command.
Note
We used LiveScript but we’re now switching to Vue.js with plain Javascript. https://vuejs.org
Our current Angularjs controllers are written in Livescript:
* http://livescript.net
The LiveScript executable and repl is lsc.
Now to compile LiveScript files run make gulp.
You can recompile everything on every change with:
gulp watch
Note
If you have the same file with both a js and a ls extension, the javascript will take precedence (it is appended first in abelujo.js so it is read first by angularjs).
How to improve the user interface with html and CSS ?
Note that we don’t write pure html, we use the jade templating language instead, which compiles to html.
Very quick reference:
<div class="nav", id="default-id", href="#">
<ul> etc
is written
div.nav#default-id(href="#")
ul etc
// and the div can be omitted:
.nav#default-id(href="#")
ul etc
Le’t consider possible pitfalls:
If you comment out a node, its children will be commented out as well
// div.commented
span.commented-by-its-parent
The css file for the app is at search/static/search/style.css.
Our CSS layout and widgets come from Bootstrap3 and Angular-UI:
If we want to use a new javascript library for development on the client side, we have to make the html page load it. We use bower for that. It is a quick process:
add the library name and its version to the bower.json in the dependencies list.
warning:: be sure to check the json format. Use your editor’s tool for that.
install it:
bower install
The sources are now at static/bower_components/.
add the path to the library’s minified js to the gulpfile.js, in the vendorJsFiles list. It is generally situated at static/bower_components/mylib/mylib.min.js but it can vary.
build the javascript files:
gulp