Gebruik¶
CSS bewerken¶
Als je aan css werkt is het best om compass je files te laten monitoren zodat deze wanneer nodig kan hercompileren.
$ cd static
$ compass watch .
# je kunt ook gewoon eenmalig compileren
$ compass compile
Maak je eigen .scss file aan in /<package_name>/static/sacss/_<package_name>.scss
.
De underscore aan het begint zorgt er voor dat dit bestand als een plugin
gezien wordt en niet afzonderlijk gecompileerd wordt.
Als je met compass watch werkt, dan zal telkens je een bestand wijzigt je
app.css
bestand opnieuw worden aangemaakt. Alhoewel we deze compilatie
ook bij het deployen zouden kunnen uitvoeren, zou dit weer tot extra build-time
dependencies leiden. Vergeet daarom zeker niet om telkens je app.css
bestand in te checken.
Jinja2 templates¶
pyoes
levert een een globale layout pyoes/layout.jinja2
die
vooral een algemene header en footer levert. In deze layout zijn er een aantal
blocks gedefinieerd die in andere templates kunnen overschreven worden.
De scaffold maakt voor je een eigen layout.jinja2
aan waarin je een aantal
zaken instelt die voor de ganse site van tel zijn.
{% extends "pyoes/layout.jinja2" %}
{% set app_package = 'pyoes' %}
{% set ga_key = request.registry.settings["ga.tracker_key"] %}
{% set top_nav = [
('Over deze site', request.route_path('home')),
('Contact', request.route_path('contact'))
]
-%}
{% set footer_nav = [
('Toegankelijkheid', 'https://www.onroerenderfgoed.be/toegankelijkheid'),
('Juridische Informatie', 'https://www.onroerenderfgoed.be/juridische-informatie'),
]
-%}
{% set zoeken_action = request.route_path('zoeken') %}
{% set zoeken_placeholder = 'Zoek iets op deze sites...' %}
{% block app_css %}{{request.static_path('<package_name>:static/css/app.css')}}{% endblock %}
In je individuele templates kun je dan weer erven van je eigen layout zodat je indien nodig wijzigingen kunt aanbrengen die over de ganse site werken.
{% extends "layout.jinja2" %}
{% block content %}
<section class="inhoud">
<div class="row">
<div class="large-3 columns">
<nav>
<h2>Een submenu of zo</h2>
...
</nav>
</div>
<div class="large-9 columns">
<h1>Over deze site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit condimentum sollicitudin. Curabitur molestie, dui vel ultricies facilisis, eros nulla bibendum erat, ut viverra elit ligula eget lectus. Donec et nibh eget ipsum porta dapibus. Curabitur placerat dapibus lacus sed gravida. Nulla tempor fermentum nibh ut porttitor. Pellentesque malesuada faucibus ante a eleifend. Donec feugiat felis ullamcorper enim aliquet laoreet. Praesent sodales gravida fermentum. Praesent condimentum sollicitudin libero, ac malesuada ligula cursus non. Nullam nisi neque, fermentum sit amet pretium condimentum, bibendum ac augue. Vivamus ornare tristique dolor sit amet suscipit. Aliquam aliquam arcu vel neque sollicitudin blandit. Praesent vitae urna sit amet ligula rutrum adipiscing sed quis erat. Suspendisse potenti. Nam erat sem, tincidunt id scelerisque ut, dignissim id mi.</p>
<p>Nullam ultricies consectetur quam nec sagittis. Aenean ultricies vulputate nunc hendrerit pharetra. Nam in lacus leo, ut sodales metus. Nulla nisl dolor, condimentum vel pulvinar vel, lobortis ut enim. Sed laoreet rutrum ligula quis dictum. Vivamus at sem at metus ullamcorper porta. Ut orci orci, sollicitudin ac fringilla et, tempus vel velit. Curabitur non quam sit amet tellus placerat consectetur. Duis congue consectetur faucibus. Maecenas tempor feugiat consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consequat sapien sit amet est pellentesque laoreet. Cras ullamcorper nisl et ipsum iaculis vel rutrum urna consectetur. Fusce mauris leo, tempus non rutrum eget, faucibus ac lorem. Aliquam eget erat tincidunt enim feugiat facilisis. Donec id sapien at mi molestie semper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris nibh, egestas in vehicula vitae, dignissim a dui. Nam at augue mauris, eu vulputate lectus. Vivamus vulputate viverra dolor, ornare pharetra purus vehicula ut. Fusce lobortis, est feugiat pretium adipiscing, tortor orci porta orci, vel malesuada leo ligula nec ante. Vestibulum urna leo, varius vel adipiscing luctus, porta sit amet mi. Vivamus quis urna vitae nisi mollis feugiat vel in libero.</p>
</div>
</div>
</section>
{% endblock %}
demonstratie¶
Als je gewoon eens de nieuwe stijl wenst te bekijken en een overzicht van de mogelijkheden wil krijgen, kun je best de demo toepassing installeren.
Warning
De demo toepassing zit in de pyoes repository, maar wordt niet verdeeld in de pyoes package.
$ git clone https://github.com/OnroerendErfgoed/pyoes pyoes_demo
$ cd pyoes_demo
$ mkvirtualenv pyoes_demo
$ python setup.py develop
$ pip install -r requirements-dev.txt
Om het makkelijk te maken om de demo-toepassing te draaien naast een toepassing die je aan het ontwikkelen bent, draait deze op poort 6555 en niet op poort 6543.
$ pserve development.ini
Deze toepassing heeft een aantal eigen templates en stylesheets die als
inspiratie kunnen dienen. De templates kun je vinden in pyoes/templates
,
dit in tegenstelling tot de algemene pyoes templates die door een andere
applicatie worden overgenomen. Deze kun je vinden in pyoes/templates/pyoes
.
De pyoes/static
folder bevat de scss bestanden van deze demo toepassing.