Sematic

One Page HTML5 Template

• Created: March 2018.
• By: Nunforest - Envato author

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thank you very much!

Sematic is Html5 + CSS3 OnePage template and works fine in all major browsers and IE from version 10. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each section parts.

Lets take a closer look at the structure of Html, Css, JavaScript...

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

Here they are:

1. HTML - Main folder for template
2. Documentation - Documentation for Sematic site template

HTML Structure

The Default version of Sematic template contains 35 html pages. These pages are

1. accordions.html
2. alerts.html
3. articles.html
4. blockquotes.html
5. blog-grid.html
6. blog-list.html
7. buttons.html
8. call-action.html
9. clients.html
10. counters.html
11. dividers.html
12. dropcaps.html
13. grids.html
14. header2.html
15. icons.html
16. index.html
17. index-2.html
18. index-3.html
19. index-4.html
20. index-5.html
21. index-6.html
22. lists.html
23. portfolio-snd-style.html
24. portfolio-three-col.html
25. posts-container.html
26. pricing-tables.html
27. progress-bars.html
28. services-icons.html
29. single-post.html
30. single-project.html
31. social-media.html
32. tables.html
33. tabs.html
34. typography.html
35. video.html

Body part of the Html file contains a main div tag container, and this is divided in other main sections and each of these sections is further divided into smaller parts:

1. CONTAINER

   Main building blocks of Container looks like in the photo
   
   
   

2. Header

   Header is based in boostrap framework with logo in left, and navigation menu in the right.

   
   
   
   
3. Footer

   With copyright line in the left and social icons in the right

   
   
   

Grid:

Based on Bootstrap 4, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype.

The default Bootstrap grid system utilizes 12 columns, the grid adapts to be 575px and 1200px wide depending on your viewport.

For a simple two column layout, create a .row and add the appropriate number of .col-lg-* columns. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

CSS Files and Structure

In folder "css" you will find 2 CSS files

1. sematic-assets.min.css
2. style.css

Description:

1. In style.css which is main style sheet for "Sematic" site template. This file contains all of the specific stylings for the page.

   To edit a specific part of the page, simply scroll down, every section is well commented and you can find easy the appropriate style that needs to be edited. In example:

   
   
   
   

2. sematic-assets.min.css - all third part plugins style are minified for better performance in one file.

Scss files

we have included also scss folder. If you are familiar with Sass you can edit style of Sematic very easy.

JavaScript

In folder js you will find 5 javascript files, but all adjustments are in just one file: "script.js".

All JavaScript files:

• Sematic plugins js files - sematic-plugins.min.js
• Bootstrap - bootstrap.min.js
• Google Map v4.1 - gmap3.min.js
• popper - popper.js
• Jquery code added here - script.js

Description:

• ("sematic-plugins.min.js") all third party plugins js code are minified and compressed for better performance in one file.
• Bootstrap part Bootstrap Framework.
• JS for Google Map in Contact section. Google Map data enter in "script.js".
• ("popper.js") is used for bootstrap. Don't remove this file cause bootstrap js code will not work properly.
• Most of the settings you can adjust in "script.js". Every part is commented so you can have a clue for what is used.
  
  
  
  

Elements

I have used many elements, i will show the some of these elements, it's very easy to implement in which part of your template you want. every section is well comented, just grab that section and place where ever you want in your page.

• Google Map
• working Contact form
• carousel team, news, twitter feed
• Font Awesome
• Elegant Icons
• Progress bars, counter statistics
• and many other elements

Note: Using other elements from other version to another, is not complicated if you are familiar with html and css coding, you have to copy that part of html and important is also to copy css part. if you have problem with this our web developer can help you make some movements.

Description

• And also we own a contact form working, here in contact.php is the place for updating your mail
  
  
  note: the contact form does not work localy, it works only online.

Sources and Credits

I've used the following images, icons or other files as listed.

• jQuery - JavaScript Library
• Bootstrap - Bootstrap by Twitter
• Google Maps v3 - Google Map on contact page.
• PixEden.com - Responsive showcase presentation
• Documenter - Last but not least. Used for writing documentation. Thanks a lot revaxarts.
• Others.

Once again, thank you for purchasing this Template. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Template. Here is to be honest a simple documentation because we think there is no problem to implement your elements in this template because the code is clean and well commented. For more general question related to this Template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with "Sematic - site template" please go to your downloads section on ThemeForest.net and rate Sematic with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy Sematic as much as I've enjoyed developing this template.

Kind Regards,
Nunforest Team