2014-05-14 10:53 GMT+01:00 Diego Lont <diego.lont@delware.nl>:
I have created my site using bootstrap and pier. For people who want to see:
http://www.delware.nl/

Yay! \o/

If there are more people who want to use bootstrap in their pier-site, please let me know.

Memememememememememememe!

At the moment I kind of hacked it together, but I will give you the outline for starters

First we need to load Pier, and since I also want to export my code, I used the following code:

Gofer new

smalltalkhubUser: 'Pier'

project: 'Pier3Addons';

configurationOf: 'Pier3AddOns';

load.

((Smalltalk at: #ConfigurationOfPier3AddOns) project version: #'development') load: #( 'Pier-Exporter-Code' 'Pier-Bootstrap' ).

This gives us a clean Pier-site, that we can modify for our use. Our template is quite simple: in our site we have a navbar, a main page and a footer. But before we can change our template, we have to make sure that we can still edit, after changing everything. This is how I would do it, if I needed to do it again.

We start by modifying the footer.

{{{<div id="footer">

<div class="container-fluid">}}}

+Collapse+

{{{</div></div></div>}}}

And then the collapse looks like this:

{{{<button type="button" class="navbar-toggle" data-toggle=“.fcollapse" data-target=".footer-collapse">

<span class="se-only">Toggle footer</span>

</button>}}}

{{{<div class="footer-collapse fcollapse">}}}

+Menu+

+Commands+

{{{</div>}}}

As you can see, there is still quite a lot of bootstrap code in our pier content, but after we have set up our site, we do not need to bother with this any more. The menu is a component, that displays some static Children. I added here the possibility to add some css class, and we need to set the list class (=nav navbar-nav navbar-right) and active class (=active). It needs to point to the node where you add the children you want displayed in your footer.

This footer allows us to login where-ever we want. Now we start on our mainPage. Ours has an alternative look, when we are logged in, because I do not want the pier navigation shown when we are logged out. This is a new component in Pier. I set it up with default (+contents+) and an alternate:

{{{<div class="jumbotron">

<div class="container">}}}

!!!Ingelogd

{{{</div></div>}}}

+contents+

+Sidebar+

The contents and sidebar, are the “normal” contents and sidebar, displaying the contents and the navigation (Children (context)).

Now we can modify our template into:

+Navbar+

+MainPage+

+footer+

This should drastically change the look and feel. Now finally we need to change our navbar. This looks a lot like our footer.

{{{<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class=“container">}}}

+Title+

+Collapse+

{{{</div></div>}}}

With the collapse:

{{{<div class="navbar-collapse collapse">}}}

+Menu+

{{{</div>}}}

And the title

{{{<div class=“navbar-header”>

<span class="se-only">Toggle navigation</span>

</button>}}}

{{{<a class="navbar-brand" href="/">}}}Delware{{{</a></div>}}}

The menu is the same as in the footer. It is a static children component with the list class set to "nav navbar-nav navbar-right” and the active class set to “active”, and pointing to the place where we have our content.

Finally, for our pages, we still have the jumbotron to add, so here is some bootstrap code as well:

{{{<div class="jumbotron">

<div class="container">}}}

+Heading+

{{{</div></div>}}}

{{{<div class="container"><div class="row">

<div class="col-md-4">}}}+Netwerk+{{{</div>

<div class="col-md-4">}}}+Kwaliteit+{{{</div>

<div class="col-md-4">}}}+Agile+{{{</div>

</div></div>}}}

So this is still quite the manual, so maybe we should make some bootstrap specific components. But then I do not know what components we exactly need, so please let me know if you have ideas for this, or have better ways to do this.

Finally, you also need to modify your css, and deploy it as a bootstrap site (adding the bootstrap libraries). This is the css I added:

.pier-login {

margin-top: 60px;

}

As you can see, there are a few new components and options (static children, css options, altdoc page) we added, but basically this is it. If you have any trouble or suggestions for improvements, let me know.

Cheers,

Diego