Wednesday, August 17, 2016

Create a Custom Caching Adapter in OpenCart

No matter the web framework you’re working with, caching is an important tool to have in the kitty to improve the overall performance of your website. You have different caching mechanisms to choose from, like file, APC, Memcached and more. You can decide based on your requirements, and sometimes it takes a combination of more than one adapter to justify the desired outcome.

OpenCart already includes a couple of caching adapters in the core, and that’s what provides a template to follow should you want to create a custom one. To implement a custom adapter, you just need to create methods as per the contract and include your logic in each method, and you’re done! It’ll be picked up automatically as a part of the OpenCart caching mechanism.

For each caching adapter, it’s only the underlying mechanism to store and retrieve data that changes. The same is true for our custom database caching adapter too, and that’s why we need to create a custom schema that holds the caching data.

Make sure that you’ve installed the latest version of OpenCart before we go ahead and start creating a custom adapter.

Create an Adapter Schema

It’s a dbcache MySQL table that’s going to hold our caching data. So, let’s create it!
  1. CREATE TABLE IF NOT EXISTS `{DB_PREFIX}dbcache` (
  2.   `key` varchar(255) NOT NULL,
  3.   `value` longblob NOT NULL,
  4.   `expire` int(11) NOT NULL
  5. ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
The important thing to note here is the database prefix; if you’re using it, make sure that you name your table accordingly. For example, in the case of database prefix oc_, you should create a table named oc_dbcache.

Other than that, the structure of table is quite simple, and it holds only three columns—key, value, and expire. The key column holds the caching key, the value column holds the associated value, and the expire column holds the UNIX time-stamp.

Create an Adapter File

You’ll find all the caching adapters provided by OpenCart under the system\library\cache directory. Our custom adapter must go there too, so let’s create a file ssystem\library\cache\database.php with the following contents.
  1. <?php
  2. namespace Cache;
  3. class Database {
  4.     private static $_db;
  5.     private $expire;
  6.      
  7.     /**
  8.      * Constructor
  9.      *
  10.      * @param timestamp $expire Caching time in seconds
  11.      */
  12.     public function __construct($expire) {
  13.         $this->expire = $expire;
  14.         $this->initDbInstance();
  15.     }
  16.  
  17.     /**
  18.      * Helper method to create DB instance
  19.      */
  20.     private function initDbInstance() {
  21.         if (is_null(static::$_db)) {
  22.             static::$_db = new \DB(DB_DRIVER, DB_HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_DATABASE, DB_PORT);
  23.         }
  24.     }
  25.      
  26.     /**
  27.      * Fetch the value stored in cache by key
  28.      *
  29.      * @param string $key Cache Key
  30.      *
  31.      * @return mixed Value of cache key if found, boolean false otherwise  
  32.      */
  33.     public function get($key) {
  34.         $query = static::$_db->query("SELECT * FROM `" . DB_PREFIX . "dbcache` WHERE `key` = '" . $key . "' AND `expire` >= '" . time() ."'");
  35.          
  36.         if ($query->num_rows) {
  37.             return unserialize($query->row['value']);
  38.         }
  39.          
  40.         return false;
  41.     }
  42.  
  43.     /**
  44.      * Set the cache value by key
  45.      *
  46.      * @param string $key    Cache Key
  47.      * @param mixed  $value  Cache value
  48.      */
  49.     public function set($key, $value) {
  50.         $this->delete($key);
  51.         static::$_db->query("INSERT INTO " . DB_PREFIX . "dbcache SET `key` = '" . $key . "', `value` = '" . mysql_escape_string(serialize($value)) . "', `expire` = '" . (time() + $this->expire) . "'");
  52.     }
  53.  
  54.     /**
  55.      * Delete the value stored in cache by key
  56.      *
  57.      * @param string $key    Cache Key
  58.      */
  59.     public function delete($key) {
  60.         static::$_db->query("DELETE FROM " . DB_PREFIX . "dbcache WHERE `key` = '".$key."'");
  61.     }
  62. }
As per the conventions, the class Database is defined under the Cache namespace. There are two properties, $_db and $expire$_db holds the database instance, and $expire is set to cache lifetime when the class is instantiated. The reason behind declaring the $_db property as static is the singleton object it holds.

In the constructor of class, we’re assigning the caching time passed from the OpenCart framework to the $expire property and calling the initDbInstance method defined in the same class that creates and assigns a database instance to $_db if it doesn't already exist.

Next, the get method is used to fetch a cache entry by key and expire time, and the set method is used to insert a new cache entry in the database. Also, we’re serializing the cache data in the set method to make sure that it’s stored properly. Of course, we need to unserialize it in the get method before we actually return it!

Finally, there’s a delete method that deletes an entry from database. It’s interesting to note here that the set method calls the delete method every time to make sure that we don’t end up creating duplicate cache entries!

So, that’s it as far as our custom caching adapter file setup is concerned. In the next section, we’ll see how to plug it in to the OpenCart core framework.

Plug in Our Custom Caching Adapter

Unfortunately, there’s no back-end configuration that allows you to plug in your custom caching adapter. So, for the sake of this tutorial, we’ll go ahead and directly influence the way it’s handled in the core.

Go ahead and open index.php under the document root of your site.

Find the following snippet.
  1. $cache = new Cache('file');
Replace it with:
  1. $cache = new Cache(database');
So, as you can see, we’ve just changed the argument, or rather the adapter name, that’s passed when creating a new $cache object.

In the same way, do it for the index.php file that resides under the admin directory. It makes sure that both the front-end and back-end use our custom caching adapter.

You’re almost done! Go ahead and visit a couple of pages in the front-end and back-end, and you should see that the dbcache MySQL table is being filled up with new records!


Conclusion

As always, if you're looking for additional OpenCart tools, utilities, extensions, and so on that you can leverage in your own projects or for your own education, don't forget to see what we have available in the marketplace.

Today, we’ve discussed how to create a custom caching adapter in OpenCart. The database caching adapter was created in the process for demonstration.
Written by Sajal Soni

If you found this post interesting, follow and support us.
Suggest for you:

Rails 5: Learning Web Development the Ruby Way

Create Complete Web Apps without Coding

The Complete Web Developer Course - Build 14 Websites

Learn Responsive Web Development from Scratch

Bitcoin for the Dark Web

Saturday, August 6, 2016

Download Manual PDF in Spanish bootstrap translated OFFICIAL



Start a while ago on a course Bootstrap 3 Spanish on youtube and I found it very important, after watching many videos do a search on the web for a course in pdf to load on my phone but did not find any, only the course of the page  http://librosweb.es  however is not available downloading this so I decided to get off the pages in PDF one by one and join them.
Well folks, I share the pdf, already sorted by chapter and ready to download.
Credits belong to the page  http://librosweb.es/  and the great work done by translating it , I just pass it to PDF.

Download Manual Bootstrap PDF

If you found this post interesting, follow and support us.
Suggest for you:

Bootstrap Responsive Design Tutorial Fundamentals

Learn to Build Websites using Twitter Bootstrap


Thursday, August 4, 2016

Project: Finishing up Our Middleman Podcast Website_part2(end)

More Organization

The styles I copied from Refills are in a new Sass partial of course. In “source/stylesheets/all.sass” we reference:
  1. @import 'header_navbar'
And the actual partial “source/stylesheets/_header_navbar.scss” looks like:
  1. .centered-navigation {
  2.   $base-border-radius: 3px !default;
  3.   $dark-gray: #333 !default;
  4.   $large-screen: em(860) !default;
  5.   $base-font-color: white;
  6.   $centered-navigation-padding: 1em;
  7.   $centered-navigation-logo-height: 2em;
  8.   $centered-navigation-background: #E7F1EC;
  9.   $centered-navigation-color: $base-font-color;
  10.   $centered-navigation-color-hover: $text-color;
  11.   $centered-navigation-height: 60px;
  12.   $centered-navigation-item-padding: 1em;
  13.   $centered-navigation-submenu-padding: 1em;
  14.   $centered-navigation-item-nudge: 2.2em;
  15.   $horizontal-bar-mode: $large-screen;
  16.   background-color: $matcha-green;
  17.   border-bottom: 1px solid darken($matcha-green, 5%);
  18.   min-height: $centered-navigation-height;
  19.   width: 100%;
  20.   z-index: 9999;
  21.   // Mobile view 
  22.   .mobile-logo {
  23.     display: inline;
  24.     float: left;
  25.     max-height: $centered-navigation-height;
  26.     padding-left: $centered-navigation-padding; 
  27.     img {
  28.       max-height: $centered-navigation-height;
  29.       padding: .8em 0;
  30.     } 
  31.     @include media($horizontal-bar-mode) {
  32.       display: none;
  33.     }
  34.   } 
  35.   .centered-navigation-mobile-menu {
  36.     color: $centered-navigation-color;
  37.     display: block;
  38.     float: right;
  39.     line-height: $centered-navigation-height;
  40.     margin: 0;
  41.     padding-right: $centered-navigation-submenu-padding;
  42.     text-decoration: none;
  43.     text-transform: uppercase;
  44.  
  45.     @include media ($horizontal-bar-mode) {
  46.       display: none;
  47.     } 
  48.     &:focus,
  49.     &:hover {
  50.       color: $centered-navigation-color-hover;
  51.     }
  52.   } 
  53.   // Nav menu 
  54.   .centered-navigation-wrapper {
  55.     @include outer-container;
  56.     @include clearfix;
  57.     position: relative;
  58.     z-index: 999;
  59.   } 
  60.   ul.centered-navigation-menu {
  61.     -webkit-transform-style: preserve-3d; // stop webkit flicker
  62.     clear: both;
  63.     display: none;
  64.     margin: 0 auto;
  65.     overflow: visible;
  66.     padding: 0;
  67.     width: 100%;
  68.     z-index: 99999; 
  69.     &.show {
  70.       display: block;
  71.     }
  72.     @include media ($horizontal-bar-mode) {
  73.       display: block;
  74.       text-align: center;
  75.     }
  76.   } 
  77.   // The nav items 
  78.   .nav-link:first-child {
  79.     @include media($horizontal-bar-mode) {
  80.       margin-left: $centered-navigation-item-nudge;
  81.       padding-right: 0px;
  82.     }
  83.   }
  84.  
  85.   ul li.nav-link {
  86.     background: lighten($matcha-green, 8%);
  87.     display: block;
  88.     line-height: $centered-navigation-height;
  89.     overflow: hidden;
  90.     padding-right: $centered-navigation-submenu-padding;
  91.     text-align: right;
  92.     width: 100%;
  93.     z-index: 9999; 
  94.     a {
  95.       color: $centered-navigation-color;
  96.       display: inline-block;
  97.       outline: none;
  98.       text-decoration: none;
  99.       &:focus,
  100.       &:hover {
  101.         color: $centered-navigation-color-hover;
  102.       }
  103.     }
  104.     @include media($horizontal-bar-mode) {
  105.       background: transparent;
  106.       display: inline;
  107.       line-height: $centered-navigation-height; 
  108.       a {
  109.         padding-right: $centered-navigation-item-padding;
  110.       }
  111.     }
  112.   } 
  113.   li.logo.nav-link {
  114.     display: none;
  115.     line-height: 0; 
  116.     @include media($large-screen) {
  117.       display: inline;
  118.     }
  119.   } 
  120.   .logo img {
  121.     margin-bottom: -$centered-navigation-logo-height / 3;
  122.     max-height: $centered-navigation-logo-height;
  123.   }
  124. }
I put the CoffeeScript code from Refills into “all.coffee”. As soon as I had to add more code than that, I’d put it into its own designated place. “source/javascripts/all.coffee”:
  1. //= require jquery
  2.  
  3. $(document).ready ->
  4.   menuToggle = $('#js-centered-navigation-mobile-menu').unbind()
  5.   $('#js-centered-navigation-menu').removeClass 'show'
  6.   menuToggle.on 'click', (e) ->
  7.     e.preventDefault()
  8.     $('#js-centered-navigation-menu').slideToggle ->
  9.       if $('#js-centered-navigation-menu').is(':hidden')
  10.         $('#js-centered-navigation-menu').removeAttr 'style'
  11.       return
  12.     return
  13.   return
This snippet is responsible for toggling the menu for smaller screens.


Because I deleted a bunch of stuff I didn’t need from the navbar markup—like the submenu—I was able to get rid of a significant chunk of the relevant styles in this file. Since I don’t know if you need a more elaborate navbar and want to take the code right from these examples, I suggest you copy the original code if you have bigger plans for the navbar. Play with the Sass to fit your style, remove dead code and duplicates. I adjusted the background color and link colors, played with the transparency of the logo, changed the border and moved on. Have fun and go crazy if you like. I just wanted to use a super simple navbar with the brand color and a centered logo. It turned out pretty good for this little work I’d say.

Here’s the index page:

And here’s the detail page:


Time to package this into a git commit and for deploying the site.
  1. git add --all
  2. git commit -m 'Implements a header with navbar
  3.                Adds header partial to layout
  4.                Takes care of deployed asset url for logo
  5.                Imports Sass partial for navbar
  6.                Adds logo
  7.                Adds CoffeeScript code
  8.                Adjusts Refills styles
  9.                Adjusts Refills markup'
  10.  
  11. middleman deploy
Title

The next change is a small one, just a touch really. We need to update the title tag in our layout (“source/layouts/layout.erb”):
  1. <title>Matcha Nerdz<%= ' - ' + current_article.title unless current_article.nil? %></title>
This gives us a dynamic title which always starts with our site’s name and attaches the article’s title if available.
  1. git add --all
  2. git commit -m 'Adjusts site’s title'
  3.  
  4. middleman deploy
Pagination

When you look at the bottom of the index list of articles you’ll see something essential missing—navigating our list of posts.


I’m not a fan of overly clever pagination links—bulky ones are also not winning any awards with me. Let’s keep it simple and provide two links for next and previous pages. Middleman makes this incredibly convenient. We just need to adjust our “config.rb” and tell the frontmatter of our index page to fine tune it.
  1. blog.paginate = true
First uncomment the line above. After that, you tell the index page how many articles you want to see. I think ten posts per page is enough. In “source/index.html.erb”:
  1. ---
  2. per_page: 10
  3. pageable: true
  4. ---
The final step before we apply some styling is to place both links conveniently at the bottom of the list. First we need to get rid of these lines of code below which were commented out. They were placed at the very top of your index page.
  1. <!--
  2. <% if paginate && num_pages > 1 %>
  3.   <p>Page <%= page_number %> of <%= num_pages %></p>
  4.  
  5.   <% if prev_page %>
  6.     <p><%= link_to 'Previous page', prev_page %></p>
  7.   <% end %>
  8. <% end %>
  9. -->
And then place this at the very bottom of this page:
  1. <% if paginate %>
  2.   <% if prev_page %>
  3.     <p class='pagination-link'><%= link_to '<< Previous page', prev_page %></p>
  4.   <% end %> 
  5.   <% if next_page %>
  6.     <p class='pagination-link'><%= link_to 'Next page >>', next_page %></p>
  7.   <% end %>
  8. <% end %>
This gives us the navigational links we need side by side and supplies us with a class to tweak a few things. I decided to go with a partial for the Sass code because it didn’t fit in the footer, nor the index post styles, plus it deserves a partial of its own, especially should it grow more in size. In “source/stylesheets/all.sass”:
  1. @import 'pagination'
And in the partial “source/stylesheets/_pagination.sass”:
  1. .pagination-link
  2.   +shift(2)
  3.   margin-bottom: 4em
  4.   &:first-of-type
  5.     float: left
  6.     margin-right: 4em
  7.   a
  8.     +transition(color 0.25s ease-in-out)
  9.     color: $text-color
  10.     font-size: 1.1em
  11.     &:hover
  12.       color: $matcha-green
We shift the links a bit to the right, arrange them to float next to each other—default would be block behaviour being stacked on top of each other—and apply a little transitional effect when the user hovers over the link. That’s all we need right now. Let’s have a look.



Alrighty, time for another commit.
  1. git add -all
  2. git commit -m 'Adds Pagination to index list of posts
  3.                Adjusts config.rb
  4.                Adjusts markup on index page
  5.                Adds styles in _pagination Sass partial'
  6.  
  7. middleman deploy
Final Thoughts

I guess that should suffice for version 01! As a next step, you should play with media queries to make the layout responsive to various screen sizes. The typography could need some serious love as well.

Pick a typface or two that best goes with the theme of your podcast—just don’t forget to keep it super readable.

Also, should you decide to do a podcast for real, I can only congratulate you. It’s a great way to learn from experts and also to increase your network significantly. Doing something of value for the community is always a good idea and can pay off big time. One last tip, try to learn by doing and experiement as much as you can! Reading alone just doesn’t cut it—been there, done that! If you like to share the lessions learned by writing about it, you will deepen your understanding of the topic even more. Have fun!
Written by Ed Wassermann

If you found this post interesting, follow and support us.
Suggest for you:

Learn Responsive Web Development from Scratch

The Complete Web Developer Course - Build 14 Websites

Create Complete Web Apps without Coding

The Complete PHP 7 Guide for Web Developers

Advanced HTML5 Tutorial for Web Developers




Wednesday, August 3, 2016

Project: Finishing up Our Middleman Podcast Website_part1

In this, the last tutorial in our series, we’ll implement a navbar and a hero section for branding our podcast site. A simple, non-bulky pagination rounds up the first version of this project and gives you all you need to get going with publishing your podcast episodes.

What We’ll Cover
  • Hero Section
  • Navigation
  • Title
  • Pagination
Hero Section

Why don’t we add a small hero section on top of the index page? I want something that gives us an opportunity to brand the podcast site without going full-splashy-marketing-page-nuts. I strongly trust in “less is more” and moreover, in “don’t insult your users by bombarding them with nonsense”. Let’s keep it nice and simple.

In this last article we will make use of another part of the Bourbon family and implement a couple of patterns from Refills—which provides a pattern / components library (styled and unstyled) and is built with Bourbon and Neat. Why reinvent the wheel when we can now and then adjust existing ones to our needs?

Note: The Refills project is maintained by designers at thoughtbot—so it’s in very good hands quality-wise.

Go to http://refills.bourbon.io/ and copy the markup for the “Hero Unit”. The provided markup is placed in our index file—right above the part where we iterate over our page_articles. In “source/index.html.erb”:
  1. ...
  2.  
  3. <div class="hero">
  4.   <div class="hero-inner">
  5.     <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
  6. " alt="Logo Image"></a>
  7.     <div class="hero-copy">
  8.       <h1>Short description of Product</h1>
  9.       <p>A few reasons why this product is worth using, who it's for and why they need it.</p>  
  10.     </div>
  11.   </div>
  12. </div>
  13.  
  14. <div class='posts'>
  15.   <% page_articles.each_with_index do |article, i| %>
  16.     <h2 class='post-title'><span class='post-date'><%= article.date.strftime('%b %e') %></span> <%= link_to article.title, article %></h2>
  17.  
  18. ...

Here I copied the styles from Refills’ pattern section as well, placing them into a new file dedicated to this banner section. The provided styles are in the .scss syntax and so I go with the flow—there’s no need to convert this into .sass really.

In “source/stylesheets/_hero_banner.scss”:
  1. .hero {  
  2.   $base-border-radius: 3px !default;
  3.   $action-color: #477DCA !default;
  4.   $large-screen: em(860) !default;
  5.   $hero-background-top: #7F99BE; 
  6.   $hero-background-bottom: #20392B;
  7.   $hero-color: white;
  8.   $gradient-angle: 10deg;
  9.   $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; 
  10.   @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
  11.   background-color: #324766;
  12.   background-position: top;
  13.   background-repeat: no-repeat;
  14.   background-size: cover;
  15.   padding-bottom: 3em; 
  16.   .hero-logo img {
  17.     height: 4em;
  18.     margin-bottom: 1em;
  19.   } 
  20.   .hero-inner {
  21.     @include outer-container;
  22.     @include clearfix;
  23.     margin: auto;
  24.     padding: 3.5em;
  25.     text-align: center;
  26.     .hero-copy {
  27.       text-align: center;       
  28.       h1 {
  29.         color: $hero-color;
  30.         font-size: 1.6em;
  31.         margin-bottom: 0.5em; 
  32.         @include media($large-screen) {
  33.           font-size: 1.8em;
  34.         }
  35.       } 
  36.       p {
  37.         color: $hero-color;
  38.         line-height: 1.4em;
  39.         margin: 0 auto 3em auto;  
  40.         @include media($large-screen) {
  41.           font-size: 1.1em;
  42.           max-width: 40%;
  43.         }
  44.       }
  45.     }
  46.   }
  47. }
We will adjust this in a second but let’s take a peek first:


Ignore the typography for now, you can adjust it later. I replaced the image and put a slight gradient on top of it. Since the type is white, I needed a bit more contrast for a better reading experience. If you choose an image that does not need an additional gradient, go for it!

I adjusted the Refills code with a couple of changes. First, I added an image to “source/images” and saved this image in the variable $hero-image. Then I reused this variable in the background mixin from Bourbon and reordered the image and the linear-gradient (a Bourbon mixin as well). Because the gradient comes first, it is overlayed on top of the Matcha_Nerdz.png. Once more, in “source/stylesheets/_hero_banner.scss”:
  1. .hero {  
  2.   $hero-image: '../images/Matcha_Nerdz.png'; 
  3.   $hero-background-top: darken($matcha-green, 65%); 
  4.   $hero-background-bottom: rgba(lighten($matcha-green, 10%), .3); 
  5.   @include background(linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), url($hero-image), no-repeat $hero-background-top scroll); 
  6.   margin-bottom: 2em; 
  7.   //background-color: #324766;
  8.   //background-size: cover;
For the gradient itself, I reused our $matcha-green that we stored in “source/stylesheets/base/_variables.scss”. The top color is darkend by 65% with a Sass function; the other one is lightened by 10% and also made transparent via another Sass function called rgba. We then reuse these variables in our background mixin. The gradient-angle stayed the same. I also added a small margin of 2em to push the index list down a bit. The styles I commented out for you are dead weight and so I deleted them.

You can play with such a gradient directly in Photoshop as well, of course, but I wanted to show you how you can use them in Sass. Below is a screenshot that has no linear gradient added to the hero unit. As a little exercise, I’ll leave the cleanup of the styles we copied to you. If you find duplicates or unused styles, I recommend you fix this before moving on.


Commit and Deploy
Time for another commit and deploy.
  1. git add --all
  2. git commit -m 'Adds hero unit to index.html.erb
  3.                Adds hero image with gradient
  4.                Adds _hero_banner Sass partial
  5.                Imports Sass partial'
  6.  
  7. middleman deploy


Without the visual grid, it doesn’t look you have much work left to adjust this page for your podcasting needs. A few things I’d recommend you do is find a typeface that communicates your project distinctively without being too exotic and adjust the size and spacing of your text so that it fits your hero unit background image. Since this is part of your branding, I suggest you take your time and have some fun!

Navigation

It’s a good time to add a navbar. Again, we will use an existing pattern from Refills and adapt it for our own needs. I chose the “Centered Navigation” which you will find under “Patterns”. For this one, we need to copy the HTML, SCSS and the CoffeeScript code. I’ll start first by adding the markup to our global “layout.erb” file
  1. <!doctype html>
  2. <html> 
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv='X-UA-Compatible' content='IE=edge;chrome=1' />
  6.          <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  7.     <title>Blog Title<%= ' - ' + current_article.title unless current_article.nil? %></title>
  8.     <%= feed_tag :atom, "#{blog.options.prefix.to_s}/feed.xml", title: "Atom Feed" %>
  9.     <%= stylesheet_link_tag "all" %>
  10.     <%= javascript_include_tag  "all" %>
  11.   </head> 
  12.   <body> 
  13.     <header class="centered-navigation" role="banner">
  14.       <div class="centered-navigation-wrapper">
  15.         <a href="javascript:void(0)" class="mobile-logo">
  16.           <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/
  17. source/images/placeholder_logo_3_dark.png" alt="Logo image">
  18.         </a>
  19.         <a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
  20.         <nav role="navigation">
  21.           <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
  22.             <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
  23.             <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
  24.             <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
  25.             <li class="nav-link logo">
  26.               <a href="javascript:void(0)" class="logo">
  27.                 <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/
  28. source/images/placeholder_logo_3_dark.png" alt="Logo image">
  29.               </a>
  30.             </li>
  31.             <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
  32.             <li class="nav-link more"><a href="javascript:void(0)">More</a>
  33.               <ul class="submenu">
  34.                 <li><a href="javascript:void(0)">Submenu Item</a></li>
  35.                 <li><a href="javascript:void(0)">Another Item</a></li>
  36.                 <li class="more"><a href="javascript:void(0)">Item with submenu</a>
  37.                   <ul class="submenu">
  38.                     <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
  39.                     <li><a href="javascript:void(0)">Another Item</a></li>
  40.                   </ul>
  41.                 </li>
  42.                 <li class="more"><a href="javascript:void(0)">Another submenu</a>
  43.                   <ul class="submenu">
  44.                     <li><a href="javascript:void(0)">Sub-submenu</a></li>
  45.                     <li><a href="javascript:void(0)">An Item</a></li>
  46.                   </ul>
  47.                 </li>
  48.               </ul>
  49.             </li>
  50.             <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
  51.           </ul>
  52.         </nav>
  53.       </div>
  54.     </header>
  55.      
  56.     <div id="main" role="main">
  57.       <%= yield %>
  58.     </div> 
  59.     <%= partial "partials/footer" %>     
  60.   </body>
  61. </html>
Whoa! That’s quite a chunk of code. Are you thinking the same as me? This looks nasty, right? Let’s put this into a partial. We’ll change “source/layouts/layout.erb” to:
  1. ...
  2.  
  3.   <body>
  4.  
  5.     <%= partial "partials/navbar" %>
  6.      
  7.     <div id="main" role="main">
  8.       <%= yield %>
  9.     </div>
  10.  
  11.     <%= partial "partials/footer" %>
  12.      
  13.   </body>
  14. </html>
And add “source/partials/_navbar.erb”:
  1. <header class="centered-navigation" role="banner">
  2.   <div class="centered-navigation-wrapper">
  3.     <a href="javascript:void(0)" class="mobile-logo">
  4.       <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>
  5.     </a>
  6.     <a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
  7.     <nav role="navigation">
  8.       <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
  9.         <li class="nav-link"><%= link_to 'Home', '/matcha-nerdz' %></li>
  10.         <li class="nav-link logo">
  11.           <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>
  12.         </li>
  13.         <li class="nav-link"><%= link_to 'About', '/pages/about.html' %></li>
  14.       </ul>
  15.     </nav>
  16.   </div>
  17. </header>
I’ve removed a bunch of stuff that I don’t need and only end up with my logo that I stored in “/images” and two links for home and about pages. For the two links I used the link_to helper method. It takes two arguments:
  • The string you want users to click on
  • and the location you want to link to.
I’m sure people who have played a bit with Rails or Sinatra are familiar with this. Handy, but no big deal. The link for “Home” (/matcha-nerd) will break for your local host but it is working on GitHub Pages where we need the namespace.

The avid reader might also have discovered that our about link links to a simple HTML page that I placed in a new directory named “pages”. I suggest you put HTML pages like contact, faq or whatever also in this directory. If you put these static pages in there you should have no problems customizing them to your needs. Just have some fun and apply what you’ve learned so far with these pages. From here on you are on your own with these, but you now know everything you need. Samo, samo!

Asset Path

A word about the image tags and the asset path on GitHub Pages. I decided to replace the plain img tags for the logo with a Middleman helper called image_tag. It’s not only pretty concise and readable, but also fixes an issue you will run into with the img tag when you build the site and deploy it to GitHub Pages. The url for the asset link on individual articles gets all screwed up and this is the simplest solution to fix that.
  1. <img src="/images/matcha_nerdz_logo.png" alt="Logo image"> 
Before using image_tag, the url for the logo looked like this: 
http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png
  1. <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>
This Middleman helper provided the url with the app name matcha-nerdz—it correctly namespaced the asset and gives GitHub Pages access to this image file (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).
Written by:Ed Wassermann (countinue)

If you feel useful for you and for everyone, please support and follow us.
Suggest for you:

Best HTML5 Coming Soon Templat

Coming soon or under construction template informs your users that your site is under construction and will be launched soon. These coming soon templates are also useful if you are looking to launch new websites or applications as they notify your users that you are working on other projects too.

Coming soon and under construction templates also help you to engage your visitors by providing a subscription form by which you can save your website visitor’s personal information which you can use for marketing your products later on.

There are myriad of coming soon and under construction pages available online, some of them include countdown widget, signup form and some unusual designs. For this round up we have compiled a list of 15 Best Coming Soon Templates which will help you to setup your coming or under construction page for your website easily and help you to get more customers and users in quick time.

Please find the list of Best HTML5 Coming Soon Website Templates below.

1. Symmetry


It is a uniquely designed under construction HTML5 template with a flat & modern look. This is a minimal, flat, clean & modern under construction coming soon page for anyone who wants an amazing & unique under construction page. It is suitable for any corporate, creative or business agency & can be used for launching any website, intro pages, product launch promos etc.

2. Kubrick


KUBRICK has been built with the Framework Bootstrap 3, responsive on every screen from phone to TV, easy to customize, HTML5 verified 100% by the W3C, CSS3, SASS and Mailchimp.

3. Artico


Artico is a creative, modern, minimal and fully responsive HTML5 coming soon. It offers a simple design with a unique animated SVG animation, which perfectly look on retina devices, as well as parallax and particle effects.

Artico was built with the latest Bootstrap framework so that this template will look great on any device. You can use any type of Artico for your project. It’s easy to use and well documented.

4. SoonX


SoonX is a Coming Soon, clean and elegant template for every creative people, corporate, agency, e-commerce, photographers or anyone who is getting their website built and want to show a coming soon page in creative way.

SoonX has been built in HTML5, responsive on every screens, easy to customize, beautifully animated, verified 100% by the W3C, CSS3, and Ajax based email forms are integrated with Mailchimp.

5. Angle


Creative Agency, General Business,Personal,Product Pre-order or any other website. It can be used as Your Coming Soon Page while the main site is under construction. It’s Highly customizable, easy to use. This template comes in 5 background styles and different purpose allows full video angle powered by HTML 5CSS 3jQuery with flexibility of bootstrap 3

6. Phase


Phase is a beautifully designed HTML coming soon or under construction template suitable for any upcoming businesses, agencies, companies, teams, communities, charities, bands, movies etc. It’s built with custom 12 column grid system to make it perfectly responsive. The design is modern and eye candy. It’s simple yet packed with features and attracts the viewers with it’s visual design.

7. Epic


EPIC is ready to boost your next or existing project with a tailor-made design. Polyvalent, elegant, crafted carefully for the best user experience. Exclusive in all the ways, offering a range of unique interactions, 4 premium variants and a solid foundation under Bootstrap 3.

8. Bump


BUMP is a modern, multipurpose Landing page ready to boost your next or existing project with a Minimal FLAT design. The template comes with 10 versions, ready-to-use and unique. BUMP has been made to captivate your vision, eye catching in the first seconds, truly flexible, add or remove content very easily and quick.

9. OPAL


OPAL is ready to boost your next or existing project with an advanced design. Exclusive in all the ways, offering a range of unique interactions, 10 pre-made variants and a solid foundation under Bootstrap 3.

10. Woody


Woody is a flat and minimal design, business, responsive coming soon HTML5 template. This multipurpose, customizable template, includes AJAX subscription, mailchimp ready, working contact form, custom backgrounds and much more!

11. Moon Light


A “moonLight Coming Soon page” is perfect if you like a clean and minimalistic design. The pack allows you to use 3 different type of pages, one clean and simple, with timer option and gallery. The page is Search Engine Optimized using professional html markup, and you can connect to twitter to have your page always updated. In the footer there is a module show the last post done on twitter.

12. Minimal Coming Soon


Minimal Coming Soon template is carefully designed with attention to the details. Your visitors will love it. It contains lots of features while keeping its stylish minimal look. Pick only what you want and customize it the any way you want.

13. Gravity


Gravity is a responsive clean Bootstrap 3 based coming soon / under construction template. The focus is on minimalist minded interface without sensory overload. Gravity coming soon comes in six versions: image background, image slider background, YouTube video background. ken burns slider, gradient background and color background.

14. PHLY


PHLY is a versatile Coming Soon, clean and elegant for every creative people, corporates, agency, e-commerce, business, portfolio etc…
PHLY has been built with the Framework Bootstrap 3, responsive on every screens, easy to customize, HTML5 verified 100% by the W3C, CSS3, SASS and Mailchimp.

15. Twist


Twist is a creative, modern, professional, responsive and HTML5 coming soon template based on latest Bootstrap 3.3 framework . This template is being packed with mailchimp subscription form, ajax contact form, font awesome icons. It is suitable for any creative agency.
Written by: Gavin

If you found this post interesting, follow and support us.
Suggest for you:

Advanced HTML5 Tutorial for Web Developers

Build Professional Websites with HTML5 and CSS3 from Scratch

Build Responsive Real World Websites with HTML5 and CSS3

Build Real World Websites from Scratch using HTML5 and CSS3

Learn Web Development Using  HTML5 Advanced Programing


Tuesday, August 2, 2016

20 Best Multipurpose HTML5 Website Templates for 2016

When it comes to web design there are myriad of premium and free resources out there like themes, plugins, templates, fonts, tools and much more. But rather than buying individual one, buying all resources in a package would be smart decision and this is what HTML5 multipurpose templates offer. HTML5 multipurpose templates allow you to create any niche site in minutes and provide numerous possible features with it.

For this article we have compiled a list of 20 Best Multipurpose HTML5 Website Templates which you can use for creating any kind of eye caching site quickly and easily. Following templates have tons of features like mega menu, revolution slider, fully responsive layout etc and you can easily use them for creating desired websites.

Let’s explore the list of following Best HTML5 Multipurpose Website Templates Below.

1. Mazarine

Mazarine is a clean, multipurpose one page HTML5 template which is easy to customize for creating any type of websites in minutes. This template is powered by Bootstrap 3.x, responsive, and has a mobile first approach and includes 4 demo variants, extra elements, portfolio single page, lightbox, blog side bar and much more.

2. Pivot



Pivot is a fully-featured multi-purpose, responsive, Bootstrap based HTML 5 template that looks effortlessly on-point in business, education, agency, and portfolio or resume template applications.

You can use Pivot to give your next product launch or app landing page a refreshing, confident appeal. Complete with full login, error pages and coming soon pages your new business will present a consistent look from start to finish.

3. Rhythm


Rhythm is another great HTML5 multipurpose template which serves multiple purposes for you and helps you creating exciting websites for you.
This template has a 50+ different demos, 180+ html files, 40+ portfolio pages, 5 single project pages, revolution slider, fully responsive, font awesome icons, retina ready and powerful shortcodes.

4. Kallyas


Kallyas is one of the most popular HTML5 template which you can use for creating any niche site in minutes. Kallyas has sleek, intuitive, and powerful front end framework for faster and easier development.

Kallyas is seo ready, responsive and retina ready, includes live front end page builder, visual slider builder, unlimited header styles, font icons, mega menu, 14 hero scenes and almost every feature which you need to create a beautiful site.

5. SmartStart


SmartStart is a simple and clean but still professional template suitable for any business or portfolio, and it’s created by using the latest HTML5 and CSS3 techniques.

With a responsive design it is easily usable with any device (Desktop, tablet, mobile phone…), without removing any content!

6. Wisten


Wisten is a 100% responsive One Page template. Wisten is powered with Twitter Bootstrap 3.0 Framework. It is perfect for creative agencies, digital studios personal freelancers, photographers.

Wisten includes myriad of handy features such as clean code, font awesome icons, 5 home page versions, smooth scrolling, one page design, working contact form, sticky navigation, browser compatibility and much more.

7. Sartre


Sartre is a flexible, well crafted template that offers a range of unique concepts, pre-design blocks, a bunch of components and plugins. Build a unique and solid website that functions well on desktop, tablet and mobile.

Sartre is ultra responsive, and includes 8 concepts, 24 variations, 50+ html template files, full screen parallax sections, lightbox with social sharing and modal support, 8+ plugins, mobile off screen navigation and much more.

8. Phoenix


Phoenix is a multipurpose template that can be used by a creative agency or as a personal portfolio for a freelancer. It’s a fully responsive one/multi paged template built on Bootstrap 3 framework.

It comes with many intro section versions – full screen background, full screen parallax slider, full screen video. It also has implemented a coming soon page (with countdown), to upload it until you get your job done, along with a 404 error page and an external single page for projects.

9. Machine


Machine is a multipurpose HTML5 template which is 100 percent responsive and includes page builder, 70+ unique content blocks, 30+ pre built demo pages to suit all styles, 3 unique navigation types, coming soon pages, email contact form and much more.

10. Pages


Pages is another great HTML5 multipurpose template which is perfect for creating any niche site easily. Pages includes 20+ designs, 70+ pre built blocks, unlimited variations, image slider floating header and of course it is responsive.

11. Edena


Edena is fresh and trendy HTML5 multipurpose template which is built upon bootstrap framework and perfect for creating any kind of site quickly. This awesome premium website template is the ideal tool to showcase your project, your business or your portfolio.

This template includes Google map, revolution premium slider, clean minimal popup, free textures pack, retina ready and much more.

12. Pangaea


Pangaea is a sleek, multi-purpose HTML template full to the brim with features. It comes with variant page builder, fully responsive, 35 page templates, support forum access and fully documented for better use.

13. Massive


Massive is a massive HTML5 template that comes jam-packed with 260+ pages and 50+ home page variations. Massive comes with all the necessary building blocks for your site so that you don’t have to worry about designing a beautiful site. Massive is fully responsive and retina ready and built on top of the popular bootstrap framework.

Massive is a perfect choice for creating sites under General, Corporate, Creative, Portfolio, photography, Agency, Magazine, Restaurant, Hotel, Spa, Renovation, Fashion, E-commerce, Blog , Parallax, App Landing and Event category.

14. Woverine


Wolverine is a Multipurpose HTML 5 Template with which responds to the most demanding customers. It can be a great choice for your Corporate, Ecommerce, Portfolio, and Creative Agency etc. This theme can easily satisfy all of your needs. Use Wolverine template to create any interactive website you want.

Wolverine build with responsive design, meaning your new site will adapt to fit any screen size, from desktops down to mobile phones. All pages and features have been optimized to work on every device.

15. Epic


Epic is a fully responsive HTML5 retina enabled one page and multi page theme suitable for any kind of creative or business use. Designed to give your brand or service an air of esteem and confidence, EPIC is perfect for personal and business uses.

EPIC is 100% responsive, each and every element including the awesome slider are fully responsive. With the advanced styling customization features, you can create endless possibilities by changing navigation styles, backgrounds for each section with colors, images or patterns.

16. Yamen


Yamen is a clean and multi-page Business HTML template with multiple features crafted for professionals and freelancers who are looking for a package which can be used for a Corporate, Agency, Creative, Personal, and small business websites.

Yamen includes mega menu, vide background section, working contact, form, extra one page demo, working twitter feed, cross browser compatibility, complete shop pages and much more.

17. Sturlly


Sturlly is a creative, clean and professional one page responsive theme. It contains different options, pre-made layouts for different businesses and other extra pages like blog and coming soon.

It is well designed, tested, documented; easily customisable and really perfect fits for businesses like SPA salon, fashion, restaurant, travel, interior, architecture, design agency, personal resume and many more…

18. Nietzsche


Nietzsche is a robust and flexible template with a unique design intended for agencies and creative individuals that want to put their work forward in a professional and unique manner. Built on our own flexible framework called Timber, it comes with a range of ready-to-use components, content blocks and several in-house developed plugins and much more.

19. Pillar

https://school.codequs.com/p/B16N7unu

Pillar empowers you to build visually beautiful pages powered by semantically beautiful markup. With extensive styling for portfolios, blogs, shops and landings – Pillar comfortably suits all common website styles.

20. Ottavio

https://school.codequs.com/p/B16N7unu

Ottavio is a One Page and Multi Page Theme fully responsive and easy to customize. Ottavio is designed to be the best solution for business, e-commerce, agency, creative, portfolio and personal websites
.
Ottavio includes 45+ HTML5 pages, twitter bootstrap 3, parallax sections, retina ready, 4 homepage variants, video background sections, one page layout and everything which you want in your HTML5 template.
Written by: Gavin

For more information , please support and follow us. 
Suggest for you:

Advanced HTML5 Tutorial for Web Developers

Build Professional Websites with HTML5 and CSS3 from Scratch

Build Responsive Real World Websites with HTML5 and CSS3

Build Real World Websites from Scratch using HTML5 and CSS3

Learn Web Development Using  HTML5 Advanced Programing