Utilizing the Bootstrap or Foundation Framework

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:

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:

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

3. Use Bootstrap

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

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:

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:

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:

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

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:

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:

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.