Utilizing the Bootstrap or Foundation Framework

For enhancing the look of your application while maintaining the consistency of the design, using a front-end framework is a viable choice which in addition helps to speed up the development process. Here's how you can integrate the popular Bootstrap and Foundation frameworks into your Scrivito application.

Bootstrap

1. Install Bootstrap

First, add the Bootstrap gem to your Gemfile:

Copy
gem "bootstrap-sass", "~> 3.3.5"

Then, run bundle install to install the gem.

2. Set up Bootstrap

Rename your app/assets/stylesheets/application.css file to app/assets/stylesheets/application.scss and append the following lines:

Copy
@import "scrivito";
@import "bootstrap-sprockets";
@import "bootstrap";

Now, in app/assets/javascripts/application.js, require Bootstrap after scrivito:

Copy
//= require scrivito
//= require bootstrap-sprockets

3. Use Bootstrap

Now you can use Bootstrap to adjust the main content of your website by wrapping it inside a Bootstrap container:

Copy
<html>
  …      
  <body>      

    <div class="container">
      <%= yield %>
    </div>
    …  
  </body>
</html>

That's all. Your pages are now Bootstrap-enabled:

Click Details to see an exemplary navigation bar made with Bootstrap.

Details

Adding a navigation bar made with Bootstrap

Edit your page view at app/views/layouts/application.html.erb and add Bootstrap's navigation bar classes. The result should look like this:

Copy
<html>
  <body>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <%= link_to 'Home', scrivito_path(Obj.root), class: "navbar-brand" %>
        </div>

        <%= scrivito_tag_list :ul, Obj.root, :toclist, class: "nav navbar-nav" do |list, page| %>
          <%= list.tag :li do %>
            <%= link_to page.display_title, scrivito_path(page) %>
          <% end %>
        <% end %>
      </div>
    </nav>

  </body>
</html>


The Scrivito install generator creates a navigation in your page view that we don't need anymore. So navigate to app/views/page/index.html.erb and replace the navigation with:

<%= scrivito_tag :div, @obj, :body %>

Now you should see the Bootstrap navigation bar on your Scrivito website.

Foundation

1. Install Foundation

First, add the Foundation gem to your Gemfile:

Copy
gem "foundation-rails", "~> 6.1.1.3"

Then, run bundle install to install the gem.

2. Set up Foundation

Rename your app/assets/stylesheets/application.css file to app/assets/stylesheets/application.scss and append the following lines:

Copy
@import "scrivito";
@import "foundation";
@include foundation-everything;

Now, in app/assets/javascripts/application.js, require and initialize Foundation after scrivito:

Copy
//= require scrivito
//= require foundation

$(document).foundation();

3. Use Foundation

Now you can use Foundation to adjust the main content of your website by configuring the viewport and wrapping it inside a column row:

Copy
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  </head>
  <body>      

    <div class="column row">
      <%= yield %>
    </div>
    …  
  </body>
</html>

That's all. Your pages are now Foundation-enabled:

Click Details to see an exemplary navigation bar made with Foundation.

Details

Adding a navigation bar made with Bootstrap

First, edit your page view at app/views/layouts/application.html.erb and add the Foundation navigation bar classes. The result should look like this:

Copy
<html>
  <body>
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="menu">
          <li><%= link_to 'Home', scrivito_path(Obj.root) %></li>
        </ul>
      </div>

      <div class="top-bar-left">
        <%= scrivito_tag_list :ul, Obj.root, :toclist, class: 'menu' do |list, page| %>
          <%= list.tag :li do %>
            <%= link_to page.display_title, scrivito_path(page) %>
          <% end %>
        <% end %>
      </div>
    </div>

  </body>
</html>

 

Afterwards, the navigation the Scrivito install generator placed in your page view should be removed. For this, navigate to app/views/page/index.html.erb and replace the navigation with:

<%= scrivito_tag :div, @obj, :body %>

You should now see the Foundation navigation bar on your Scrivito website.

What's next?

If you're curious how the above code works, have a look at Navigating the Page Hierarchy.

You might also create a page type and a widget type and use them on your site, or, If you already have a working Rails application, e.g. a shop, consider complementing this content using Scrivito's in-place editing functionality.