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.
Note
Custom styling
We dont want you to think of css anymore, but.. if you really want to you can add your own css too:
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'))