Layout and styling¶
Reahl comes with Widgets. You build your own by adding these
together to form more complicated Widgets that add up to a complete
user interface.
Use Widgets from the bootstrap package for a styled site.
Lets start by adding a Navbar to the page:
from reahl.web.fw import UserInterface
from reahl.web.bootstrap.page import HTML5Page
from reahl.web.bootstrap.ui import TextNode
from reahl.web.bootstrap.navbar import Navbar, ResponsiveLayout
from reahl.web.bootstrap.grid import Container
class AddressBookPage(HTML5Page):
def __init__(self, view):
super().__init__(view)
self.body.use_layout(Container())
layout = ResponsiveLayout('md', colour_theme='dark', bg_scheme='primary')
navbar = Navbar(view, css_id='my_nav').use_layout(layout)
navbar.layout.set_brand_text('Address book')
navbar.layout.add(TextNode(view, 'All your addresses in one place'))
self.body.add_child(navbar)
class AddressBookUI(UserInterface):
def assemble(self):
self.define_view('/', title='Address book', page=AddressBookPage.factory())
A Layout is used to change what a Widget looks like. The
ResponsiveLayout makes the Navbar collapse automatically on
devices smaller than medium (md) size.
Note how ResponsiveLayout is also used to add brand text and other
contents to the Navbar.
The Container Layout used on the body of our HTML5Page gives the page
some margins and is necessary for Bootstrap to work.
Custom styling¶
Out of the box, a Reahl web application uses a default set of colours and styling choices. To comprehensively change these defaults requires one to compile a customised version of bootstrap <../howto/customisingcss>` — an advanced topic.
If you just need to add some CSS op top of the defaults,
serve your own static files from a directory added using
define_static_directory() inside
your assemble().
self.define_static_directory('/css')
To use your own CSS, add a link to such a static file on your HTML5Page subclass. For example in the __init__ of your class, put:
self.head.add_css(Url('/css/own.css'))