Responsive web design

This example shows how to make responsive web design. You will need to bundle foundation-rails gem so add this line to your Gemfile:

gem 'foundation-rails'

 

You will also need to add this two lines to your application.js file:

//= require foundation
$(document).foundation(); 

 

and this to your application.css file:

 *= require foundation

 

I don't recommend adding this lines to cms.js and cms.css. They will make havok to data entry forms ;-)

 

Lets look at design template which would normally be defined in dc_site.design field.

<div id="site">
 <ul id='meni-site' class='small-block-grid-3'>
  <%= dc_render(:dc_simple_menu, name: 'meni-site', method: 'as_responsive') %>
 </ul>
 <div class="site-top picture-top">
  <img src="/files/logos/top-bg-pic.jpg" />
 </div>

 <div id="page" class="row">
  <div id="div-main" class="small-12 large-7 columns">
   <div class="show-for-medium-down" style="padding: 10px;"> <%= dc_render (:responsive, method: 'i_move') %></div>
   [main]
  </div>
  <div id="div-right" class="small-12 large-5 columns">
   <div class="show-for-medium-up"><%= dc_render(:responsive, method: 'i_move') %></div>
    <%= dc_render(:responsive, method: 'roller') %>
    <div class="na-mailing"><%= dc_render(:dc_poll, poll_id: 'mail-subscribe') %></div>
    <div class="na-mailing"><%= dc_render(:responsive, method: 'send_mail') %></div>
  </div>
 </div>

 <div id="site-footer">
  <%= dc_render(:dc_piece, id: 'site-footer') %>
 </div>

</div>
<%= dc_render(:responsive, method: 'eu_cookies') %>
<%= dc_render(:dc_common, method: 'google_analytics') %>

 

Lets look at the design step by step. At top we have small menu which is rendered by DcSimpleMenu.as_responsive method.

<div id="site"> 
 <ul id='site-menu' class='small-block-grid-3'>
  <%= dc_render(:dc_simple_menu, name: 'site-menu', method: 'as_responsive') %>
 </ul>

 

Below menu there is a huge (1280x480) picture, which is automatically resized when screen size gets smaller.

<div class="site-top picture-top">
 <img src="/files/logos/top-pic.jpg" /> 
</div>

 

With a little help of this css code:
.site-top {
text-align: center;
position: relative;
height: 0;
overflow: hidden;
}
.picture-top { padding-bottom:37.5%; }

 

Continue to central part of site which is divided into two parts. div-main for displaying main page data and div-right which is used for interacting with users, showing ads etc.

 

Main part also has part which is shown only on phones. This part is rendered by Responsive.i_move method.

 <div id="page" class="row">
  <div id="div-main" class="small-12 large-7 columns">
    <div class="show-for-medium-down" style="padding: 10px;"><%= dc_render(:responsive, method: 'i_move') %></div>
   [main]
  </div>

 

[main] string is replaced by code defined in design document and looks like this.

<% main="\<\%= dc_render(:responsive, method: 'all_documents') \%\>" %>
<%= dc_replace_in_design(replace: '[main]', with: main) %>

 

Responsive.all_documents collect all available documents and display them in main part of site.

 

The right div of the site center has four parts. They will move to bottom when displayed on phone.

  <div id="div-right" class="small-12 large-5 columns">
    <div class="show-for-medium-up"><%= dc_render(:responsive, method: 'i_move') %></div>
    <%= dc_render(:responsive, method: 'roller') %>
    <div class="na-mailing"><%= dc_render(:dc_poll, poll_id: 'subscribe') %></div>
    <div class="na-mailing"> <%= dc_render(:responsive, method: 'send_mail') %></div>
  </div>
 </div>

 

First part is show only when screen size is large enough. 

 

Roller method will prepare ads pictures, which will scroll with a help of slick http://kenwheeler.github.io/slick/ javascript library.

 

Mail subscribe is a simple poll which only asks for entering e-mail address and calls ResponsiveController.subscribe action to save address to internal database intended for news subscribers. 

 

Responsive.send_mail again prepares mail_to link which visitor may use to send ideas to site owners.

 

At the bottom of page there is a site-footer div which is saved in dc_piece collection name 'site-footer' document.

 <div id="site-footer">
  <%= dc_render(:dc_piece, id: 'site-footer') %>
 </div>

 </div>
 <%= dc_render(:responsive, method: 'eu_cookies') %>
 <%= dc_render(:dc_common, method: 'google_analytics') %>

 

And finally there is google_analytics token and div which informs user about Euro cookies law, which must be implemented in Europe if site uses google_analytics.


Last update: 08.05.2018