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 — 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'))