Woof! - Stylin' with PureCSS

Writing page templates Getting user input

Stylin' with PureCSS

Our page is now sufficiently ugly that we can no longer put off styling it. For the most part, styling a web site involves writing CSS for the various page sections. We will store these definitions in the file public/stylesheets/fibonacci.css.

We start off by adding a suitable image for our header. In this case, we choose a public domain derived image of Fibonacci available from http://world.mathigon.org/resources/Sequences/Fibonacci.jpg and store it in public/images/fibonacci.jpg.

NOTE	The images and CSS for our example are available from the samples directory in the Woof! distribution.

We then write the CSS for our site basing our colors on the ones in the image. Each page section has its own CSS class, named after the section and prefixed by wf-. For example, the wf-header CSS class styles the header section. Our public/stylesheets/fibonacci.css CSS file is shown below.

.wf-header {
   color: #c16e8c;
   background-color: #e0edde;
   padding: 10px;
   border-bottom: #183b75 solid 2px;
   background-image: url(../images/fibonacci.jpg);
   background-repeat: no-repeat;
   background-size: contain;
   text-indent: 5em;
}

.wf-sidebar {
   background-color: #e0edde;
   border-bottom: #183b75 solid 2px;
}

.wf-main {
   border-bottom: #183b75 solid 2px;
}

.wf-footer {
    font-size:smaller;
    text-align: center;
}

We will be changing our code to use Pure CSS styles menus and input fields. We could use the visual defaults for Pure CSS but to demonstrate our graphical design skills (or the lack thereof), we will create a skin using the PureCSS skin builder as described in the PureCSS Skins chapter. Again, we choose colors that (we think) go well with the great man's headgear. We save the corresponding CSS in the public/stylesheets/fibonacci/pure-skin-fibonacci.css file. We could have saved the generated CSS in the fibonacci.css as well but keeping it separately allows us to change skins more easily in the future.

Finally, we need to arrange for our CSS files to be loaded. To do this we add the following lines to the FibonacciController constructor.

pagevar lappend stylesheets \ 
    [my url_for_stylesheet fibonacci.css] \ 
    [my url_for_stylesheet pure-skin-fibonacci.css]
pagevar set main {cssclasses {+ pure-skin-fibonacci}}
pagevar set sidebar {cssclasses {+ pure-skin-fibonacci}}

The first of these lines links our generated page to the CSS stylesheets we just created. The second and third lines have the effect of adding the created skin to the main and sidebar page sections. Note that the skin for each page section is separately assigned and is optional. Adding a skin to a section affects the colors and styling used for Pure CSS controls.

Then modify the page views to use Pure CSS tables instead of raw HTML based ones. First, change the main section view app/controllers/views/fibonacci-generate-main.wtf as follows.

% my variable seq
<p>
The first [llength $seq] numbers in the
Fibonacci sequence are shown below:
</p>
%(
  set index 0
  set table {}
  foreach number $seq {
    lappend table [list [incr index] $number]
  }
%)
[woof::pure::table $table -heading {Sequence Number} -stripes 1]
<p>
 <a href='[request url]'>Show first [incr index] in sequence</a>
</p>

Similarly, change the sidebar view app/controllers/views/fibonacci-sidebar.wtf to use Pure CSS menus for navigation.

%(
 set selected [file tail [request request_uri]]
 set menu [list  [list Generate [my url_for -action generate]]  [list Help [my url_for -action help]]]

 if {$selected eq "help"} {
     lset menu {1 2} selected
 } else {
     lset menu {0 2} selected
 }
%)

[woof::pure::menu $menu -orient sm]

Our page now looks like this.

We are getting close to the finish line. But there is one important basic task we have not covered - getting input from the user. We do that next.

Writing page templates Getting user input

Web Oriented Object Framework

User Guide (Version 0.5b4)

Stylin' with PureCSS