Versión en castellano

Wednesday 9 January 2013

Siviglia Templating and Bootstrap

I've been looking around for some nice, simple UI framework to implement as a base widget library for my Siviglia templates project, and include it in the distribution.
To keep the spirit of the templating system, this is a dual process.The  first problem to solve is finding a good set of abstractions used in web UI development.
There are a few obvious abstractions, like "page", "header", "footer", "menu"...Those concepts will be the widgets to implement.
Then, for those widgets, there could be many different implementations, using different frameworks.
But, as long as templates are expressed in terms of those abstractions, they'll be independent of the implementation of those widgets, so simply changing the widget include path, the whole UI could be generated using a different framework.

The Boostrap UI framework is a simple, nice looking UI framework, and makes it an ideal candidate for a first implementation. And, what it's also important, it's to use the names ("abstractions") it uses for some common elements found in web page design, like the "Carousel Jumbotron" .

The carousel is a set of images, of which only is visible one at a time.It could include some sort of navigation between those images, and some content associated with each one.
When building a template for your PHP site, that's all the detail you should give to the underlying widget.How  the navigation is managed, where the content is shown, etc, it's defined by the widget.
Of course, you could create a few carousel widgets.One with a thumbnail navigation, other with text links...
The important thing, in the end, is that reading the template should give an inmediate idea of what's going on in the page.
For the  "Carousel Jumbotron" example, the template should be something like this:

[*PAGE]
    [_CONTENTS]
         [*/MENU/BAR]
               [_ITEM][_LABEL]Project name[#][_LINK]...[#][#]
               ....
         [#]
         [*/CAROUSEL/JUMBOTRON]
               [_ITEM][_IMAGE]....[#]
               [_CONTENT]
                     [*/PARAGRAPH/TITLED]
                           [_TITLE]Example headline[#]
                           [_CONTENT]....[#]
                     [#]
               [#]
               ....
         [#]
     [#]
[#]

Creating the template in this way, helps you to separate what you want to have in the page, of how you'll implement it.And that's what i mean with "templates expressed in abstract UI concepts".

There are a few more UI abstractions used (and named) in Bootstrap.If you have more ideas, please comment about it!

No comments:

Post a Comment