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

Previous topic

A basic application

Next topic

Build a user interface with Widgets