Template Incorporation

Aug 29 2019 in User Interface
Image

Real world web applications should have interactive user interface(UI), responsiveness and user friendly feature. Essentially, a website template gives designers relatively easy ways to plug content into a sophisticated framework built through classic Web languages such as HTML and CSS. A website template may include carefully laid out titles, square or round images, background banners, stripes and other layout features, as well as styled and laid out typography. Designers can take advantage of these templates and simply swap in their own data and images to get a very elaborate Web style without writing any codes themselves.

Let us try to create a dual template integration for an rails application. For this let us use ADMINLTE 3 template for admin part and DRIMO template for website part of application. These templates is available for free. Since there are many ways to integrate the template, to achieve this we have used one of the method discussed below and finally admin panel will look like this.

Website panel

Let us start with Admin Panel

Step 1: Lets create a new rails application with name “TemplateIncorporation”

Step 2: First insert required css and js files in vendor folder by creating a folder name called admin which will have folder structure like

And mention the folder path from which we are going to fetch css and js files in assets.rb.

config/initializers/assets.rb

When a file is referenced from a manifest or a helper, Sprockets searches the three default asset locations for it. The default locations are: the images, javascripts and stylesheets directories under the app/assets folder, but these subdirectories are not special – any path under assets/* will be searched.Besides the standard assets/* paths, additional (fully qualified) paths can be added to the pipeline in config/initializers/assets.rb like

Step 3: In application.css and application.jsfiles add files like

In app/assets/application.css

In app/assets/application.js

Here in the above mentioned code we used require which will call the file located in that particular path for our application and also we didn’t mention .css or .js of that particular file because the content is written in master file(i.e., application.css or application.js) for all css and js files respectively.

Step 4: Partial file will start with a syntax of underscore(_) followed by the name, and render this partial files in layout file.

Step 5: Add required partials in app/views/layouts/application.html.erb and then the application.html.erb looks like

<!DOCTYPE html>
<html>
  <head>
    <title>TemplateIncorporation</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data- 
     turbolinks-track': 'reload' %>
    <link rel="stylesheet"
     href="https://maxcdn.bootstrapcdn.com/font- 
     awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" 
href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons. 
     min.css">
    <link href="https://fonts.googleapis.com/css? 
     family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  </head>
<body class="hold-transition sidebar-mini">
  <div class="wrapper">
    <%= render 'layouts/partials/top_header_nav' %>
      <%= render 'layouts/partials/top_side_nav' %>
	<div class="content-wrapper">
          <section class="content-header">
            <div class="container-fluid">
	      <div class="row mb-2">
		 <div class="col-sm-6">
		   <h1>Blank Page</h1>
		 </div>
		 <div class="col-sm-6">
		   <ol class="breadcrumb float-sm-right">
		     <li class="breadcrumb-item">
                       <a href="#">Home</a></li>
		     <li class="breadcrumb-item active">Blank 
                     Page</li>
		    </ol>
		  </div>
		 </div>
		</div>
              </section>
	      <section class="content">
		<div class="card">
	         <div class="card-body">
    		  <%= yield %>
                 </div>
	        </div>
              </section>
	    </div>
	    <%= render 'layouts/partials/footer' %>
  	</div>
      <%= javascript_include_tag 'application', 'data-turbolinks- 
     track': 'reload' %>
  </body>
</html>

Now the admin panel part is completed in template incorporation now lets go to website part of template incorporation in application.

Step 5: To view our template in browser we need to have view page for that let us create a controller named as dashboards_controller.rb and create index page in views of dashboards. So by typing /dashboards in url we can go to admin part of application.

Step 6: Here I’m using DRIMO template for website part of application, so lets insert required css and js files in vendor folder by creating a folder name called website. In that website folder lets copy the required folders css and js files to run website part.

Step 7: To have two different templates integrated in our application then we need to have two layout files. So lets create a new layout file in app/views/layouts with a name called website.html.erb

Step 8: Add website.css in app/assets/stylesheets and website.js in app/assets/javascripts and add required files.

In app/assets/website.css



In app/assets/website.js

Step 9: Since we created custom layout and custom css, js files so we need to add them in config/initializers/assets.rb like

Step 10: Add required partials in app/views/layouts/website.html.erb and then the website.html.erb looks like

<!DOCTYPE html>
<html>
 <head>
  <title>TemplateIncorporation</title>
   <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'website', media: 'all' %>
 </head>
 <body data-spy="scroll" data-target="#bs-example-navbar-collapse-1" data-offset="120">
  <div id="preloader">
    <div id="preloader_spinner">
      <div class="pre_inner">
	<div class="dot dot-1"></div>
	<div class="dot dot-2"></div>
	<div class="dot dot-3"></div>
      </div>
     </div>
   </div>
   <%= render 'layouts/partials/website_header_nav' %>
    <%= yield %>
     <%= javascript_include_tag 'website' %>
</body>
</html>

Step 11: To view our template in browser we need to have view page for that let us create a controller named as website_controller.rb and create index page in views of website. Since we integrated two templates in two layouts of our application we need to specify which layout we are going to use for particular pages of application. That can be achieved by giving “ layout ‘website’ ” in controller. Since i created a layout with a name “website.html.erb” i have used word layout ‘website’.

Step 12: To run images in production we need to write the code like image_path followed by path in which the image exists. For example <img src=”<%= image_path ‘img/mockup-img/m-image-1.png’ %>” alt=””>

To run font in production we need to modify the code by giving code like asset-url followed by path in which folder the font exists. For example asset-url(‘website/vendors/icofont/fonts/icofont.ttf?v=1.0.0-beta’) format(‘truetype’)

Conclusion: Integrating template is easy if we do the work perfectly with concentration. Hope everyone will enjoy integrating template in application. Checkout the live app demo here and the source code here.

Let's build something great

Get a customized quote for your product