Using Bootstrap to fast track site development

A few enterprising folks got together and built a default set of CSS, Javascript and HTML scaffolding templates with the view to making web development a lot easier. They then released the above to the public domain under the name bootstrap. This toolset has become increasingly popular, to the extent that websites developed with bootstrap are recognisably similar.

The easiest way to dive into bootstrap, is to find a site based on it which advertises the template as being freely distributable, and save the site from within your browser. Any CSS, Javascript or external resources will be saved along with the site. One can then embark on altering the HTML to do what you need it to. This process saves a huge amount of time and effort.

For example, to kick things off for our skinning project, we visited BootWatch, selected the readable theme, and went "File, Save". Of course, you are certain to get a number of unwanted bits and pieces which need to be removed, like for example the Google Analytics script.

Reducing the HTML

After removing the unneeded parts and some editing, we were left with an HTML index file which we saved to a page template which we called bootstrap_templates/index.pt.

<!DOCTYPE html>
<html lang="en"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title tal:content="context/title">Site Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" tal:attributes="href static/bootstrap/bootstrap.css" media="screen">
    <link rel="stylesheet" tal:attributes="href static/bootstrap/custom.css">
  </head>
  <body>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container" tal:content="structure context/@@navbar">Nav Bar</div>
    </div>

    <h1> </h1>

    <div class="container" tal:content="structure context/@@breadcrumbs">Crumbs</div>
    <div class="container" tal:content="structure provider:content">Site Content</div>

    <div class="container">
      <footer tal:content="structure provider:footer">Footer</footer>
    </div>

    <script tal:attributes="src static/bootstrap/jquery-1.10.2.min.js"> </script>
    <script tal:attributes="src static/bootstrap/bootstrap.js"> </script>
    <script tal:attributes="src static/bootstrap/custom.js"> </script>

  </body>
</html>

We had to rename the resources folder in our static area to 'static/bootstrap/'. Note that our CSS and javascript is loaded directly from that folder, producing a faithful replica of the original theme.

For our navigation bar, we are rendering 'structure context/@@navbar' which is clearly a view. For our breadcrumbs, we render 'structure context/@@breadcrumbs', another view. However, take a look at where we render the 'structure provider:content' and 'structure provider:footer', which are existing viewlet managers which have an IArticle as context. The point is, you do not need to rebuild your site completely just to do a skinning exercise.

The Python part

Corresponding to the index.pt page template, we defined a Grok view class in the 'bootstrap.py' module:

class Index(grok.View):
    '''  Renders the main site index
    '''
    grok.context(IArticle)
    grok.layer(Bootstrap)

    editing = False   # content viewlet manager needs these flags
    adding = False
    deleting = False
    viewing = True

    def update(self): # require 'light' text box styling
        textLight.need()

Note that this view defines a grok.layer(Bootstrap). The layer itself is what defines the skin we are to use, and is defined as another Python class:

class Bootstrap(grok.IDefaultBrowserLayer):
    '''  Defines the 'bootstrap' layer
    '''
    grok.skin('bootstrap')

This means that we can reference the Index view by including the skin in the URL when we access our site:

http://localhost:8080/++skin++bootstrap/gfn

When setting up apache or nginx in front of the site, one would need to take the skin name into account for the proxy or rewrite rule - it is all completely transparent to the user when your site is accessed via the Internet.

*Username
*Password

Using Bootstrap

Reducing the HTML

The Python part

Grok 4 Noobs

Using Bootstrap to fast track site development