Masakini

Responsive Multipurpose HTML5 Template


Thank you very much for purchasing our theme!

If you have any issue or question that this document does not cover, feel free to contact us here.. Thank you.

About

Masakini is a clean and professional site template, perfect for all types of companies and personal web sites. Built on the Advanced foundation framework with HTML5 / CSS3. Its responsive too - Will fit great on all devices. More features like 4 Homepages, 2 Portfolio pages, About page, Services page, Tabs, Accordions and much more gives you more space to work with and also with a few lines of code.

Clean coded and Easy updation are the key features. Go ahead to know more.

This theme is a Responsive layout with four columns. The general template structure is the same throughout the template. Here is the general structure.

..... ..... .....

I have used Nine CSS files in this theme.

  1. style.css - Contains all of the specific stylings for the page.
  2. reset.css - Generic reset file.
  3. foundation.css - Contains all of the specific stylings for the responsive layout.
  4. ie8.css - Contains all of the specific stylings for ie8.
  5. ddsmoothmenu.css - Contains all of the specific stylings for the Dropdown NavMenu
  6. responsiveslides.css- Contains all of the specific stylings for the Responsive slider
  7. pricing_table.css - Contains all of the specific stylings for Pricing Table content
  8. accordion.css - Contains all of the specific stylings for jQuery Accordion
  9. prettyphoto.css - Contains all of the specific stylings for Lightbox plugin
Style.css file contains all of the specific stylings for the page. The file is separated into sections using:
    /*-----------------------------------------------------------------------------------*/  
    /* GLOBAL STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* HEADER WRAP
    /*-----------------------------------------------------------------------------------*/
     css codes  
          
    /*-----------------------------------------------------------------------------------*/
    /* SLIDER WRAP
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
          
    /*-----------------------------------------------------------------------------------*/
    /* SERVICES WRAP
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* INDEX - PORTFOLIO STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* RECENT BLOG POST STYLES
    /*-----------------------------------------------------------------------------------*/
    css codes  
      
    /*-----------------------------------------------------------------------------------*/
    /* TESTIMONIAL STYLES
    /*-----------------------------------------------------------------------------------*/ 
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* ABOUT CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* BLOG CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* CONTACT FORM CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  
      
    /*-----------------------------------------------------------------------------------*/  
    /* FOOTER CONTENT STYLES  
    /*-----------------------------------------------------------------------------------*/  
    css codes  

and much more
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Dont change anything in foundation.css file. It may affect the whole theme.

This theme imports eighteen Javascript files.

  1. jquery-1.7.2.min.js - To Enable jQuery.
  2. foundation.min.js - Plugin for foundation framework.
  3. app.js - Support plugin for foundation framework.
  4. jquery.foundation.tabs.js - Foundation Tabs plugin.
  5. ddsmoothmenu.js - Plugin for Dropdown menu.
  6. jquery.mobilemenu.js - Plugin for Responsive menu.
  7. modernizr.foundation.js - Plugin for Modernizr.
  8. responsiveslides.min.js - Plugin for Responsive slider.
  9. jquery.quicksand.js - Plugin for Filterable portfolio.
  10. script.js - Support plugin for Filterable portfolio.
  11. jquery.easing.1.3.js - Plugin for Easing.
  12. jquery.akordeon.js - Plugin for Accordion.
  13. jflickrfeed.min.js - Plugin for Flickrfeed.
  14. jquery.tweet.js - Plugin for jQuery Tweets.
  15. jquery.placeholder.min.js - Plugin for Form ie placeholder.
  16. jquery.gmap.js - Plugin for google map.
  17. jquery.prettyphoto.js - Plugin for Responsive Lightbox.
  18. main.js - Custom theme support file.

Lets start updating the template. Open index.html file and follow the steps.

Header and footer updates are same for all pages. So will explain once here.

Header


  1. Replace "images/logo.png" with your logo url or source.
  2. Replace "532 336 9978" & "admin@domain.com" with your contact no. and email.

Dropdown Navmenu

This is the basic structure.

			

  1. Replace "Primary menu" & "PRIMARY_MENU_LINK" with the menu name and url .
  2. Replace "Sub menu" & "SUB_MENU_LINK" with your sub menu name and url .
  3. YOu can add unmited submenus. Submenus can also be nested.


Responsive slider

This is the code for slider images.
			

Replace "demo/slider/1.jpg" with the first slider image. Same for all four. Unlimied slides can be added.

This is the code for slider pager.
			

Replace "Superb Portfolio" with some pager title. Same for all four.



Services content

	
Graphic Design

Sed diam nonummy nibh euismod tincidunt ut laoreet aliquam volutpat.

This is the basic structure. Same as for all.
  1. Replace "images/ico1.png" with the services icon image url or source.
  2. replace the text between "<h5>" "</h5>" with the service title.
  3. replace the text between "<p>" "</p>" with the service description.


Recent Portfolio wrap

			
The image onhover shows a zoom icon, onclick will expand as a lightbox. Update the thumb content as follows.
	
		
	


Tabs content

This is the structure for tabs content.
	
Tab1
Tab2
Tab3
  • TAB1 CONTENT HERE
  • TAB2 CONTENT HERE
  • TAB3 CONTENT HERE


Clients wrap

		
replace "demo/clients/1.png" with the client image. Same for all six.

Footer wrap

Tweets widget
To update the tweets info, open main.js file from "JS" folder and find the following code
	count: 2,	
	username: "envato"


Flickr widget Again in main.js file, find the following code.

			limit: 9,
			qstrings: {
				id: '52617155@N08'
			},

To get your flickr id, go here. and update your flickr profile url.



About page

Team info
		

Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum.

This is the code for the team info, same for all four.
Skills bar
			

Photoshop - 80%

This is the code for the skills details, same for all four.

Services page

Offer info
	
Celebrating New Year

Discount 50%

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Pricing table
			
Standard
$300 / Project
View
5 Logo Alternatives
5 Revisions
Full Stationery Design
Brand Consultation
Brand Management
Promotional Campaign
Choose This
This is the code for the first one. Same for all three.

Portfolio page

First lets update the filter part. Find this code

			

replace as follows.

	
  • CATEGORY NAME IN CAPITAL LETTERS


  • Now find this one

    				
  • Restaurant Web Design Duis autem vel eum iriure dolor in hendrerit in vulputa
  • Note: You have to mark the item id in order like data-id="id-1" for first one, data-id="id-2" for second and so on...



    Contact page

    Google map

    Open contact.html and find this code

    			address: "Boulder, CO",
    
    Here replace "Boulder" with the location and "CO" with the state.
    or
    Update the full address.

    PSD files are not added with this template. You can get it here

    We have used the following plugins, fonts & images. All fonts, images, icons used in this template are free for commercial use.

    Fonts
    jQuery Plugins
    Images Images in live preview are not included to the template.





    Once again, thank you so much for purchasing this theme.
    As I said at the beginning, We'd be glad to help you if you have any questions relating to this theme. We I'll do our best to assist.

    Thanks

    Spyropress