Pier and Bootstrap together

Hi all,

I have created my site using bootstrap and pier. For people who want to see:
        http://www.delware.nl/

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

Now I want to add this site on the pier website. Who manages this website? And can I be added as an admin here?

Cheers,
Diego
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Hi all,

I tried my recipe for myself, and this didn’t work as easy as I thought. So here is a fixed recipe.

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. Since we need bootstrap loaded, we first need to register pier, using bootstrap, and of course start the web server:

PRKernel reset.
PRPierFrame registerAsBootstrapApplication: 'volkstuinen' kernel: (PRKernel named: 'pier').
ZnZincServerAdaptor startOn: 8088

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 template. We add the stuff we are going to need in the beginning. Since the footer will  be sticky, we want some room at the bottom anyways, so this will work fine.
+Navbar+
+MainPage+
+footer+

Now we start by adding the main page, just by clicking on main page. The main page 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+

Now remember to select the main page, because otherwise everything will be added to the template. Now login and modify the contents and the sidebar. The contents and sidebar, are the “normal” contents and sidebar, displaying the contents and the navigation (Children (dynamic)). Change the navigation and set the level to 1 and recursive to true. This will give us better navigation.

Next step will be to edit the footer. Select the footer and click edit and fill out the following:

{{{<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <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>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></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. Fill out:
        list class = nav navbar-nav navbar-right)
        active class = active.
It needs to point to the node where you add the children you want displayed in your footer. we leave this to default for now.

Now we 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”>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="se-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
</button>}}}
{{{<a class="navbar-brand" href="/">}}}Your site{{{</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.

We can now remove the unneeded things from our template and modify it into:
+Navbar+
+MainPage+
+footer+

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;
}

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>}}}

Note that for our static children you can only select nodes, that have children. You probably want to create them in a separate place, then add 1 child, and then go back to the menu to point it to the right place.

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.

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
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

On Wed, May 14, 2014 at 11:53 AM, Diego Lont <[hidden email]> wrote:
> Now I want to add this site on the pier website. Who manages this website? And can I be added as an admin here?


I can add your website on http://www.piercms.com/doc/examples. Which
category should I add you to?

--
Damien Cassou
http://damiencassou.seasidehosting.st

"Success is the ability to go from one failure to another without
losing enthusiasm."
Winston Churchill
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Hi Damien,

Under the category companies (Delware)

And while you are at it, can you also add Legacy Code (http://www.legacycode.nl) under companies?

Thanks,
Diego

On 16 May 2014, at 18:14, Damien Cassou <[hidden email]> wrote:


_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

On Mon, May 19, 2014 at 8:59 AM, Diego Lont <[hidden email]> wrote:
>
> Under the category companies (Delware)
>
> And while you are at it, can you also add Legacy Code (http://www.legacycode.nl) under companies?


done

--
Damien Cassou
http://damiencassou.seasidehosting.st

"Success is the ability to go from one failure to another without
losing enthusiasm."
Winston Churchill
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki