Socase - HTML5 One page Theme

Created: 17/10/2018
latest Update: 17/10/2018
By: abmathasuriya
Email: abmathasuriya@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form abmathasuriya on ThemeForest OR You can send me ticket from our support system. Thanks so much!

Overview

The Socase Theme build using Bootstrap a powerful mobile first front-end framework for faster and easier web development.

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder. The main HTML folder consists of more folders for diferent types of theme assets:

images - folder contain all images for the theme design
js - folder contain all jquery plugin
fonts - Folder contain font files used in theme
css - folder contain all CSS files for the theme.
assets - Folder contains assets used in theme for your reference

Installation

This is an HTML theme and doesn't require installation in the traditional meaning of the word. You only need to place the content (HTML files and the folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for theme to work in correct order.

HTML

The general template structure is the same throughout the template. Here is the general structure.

Below are the general HTML structure of all pages.

Each section further described in below.

CSS

The theme comes with CSS (stylesheet) files grouped in the css folder:

1. bootstrap.min.css

5. padding-margin.css- Horizontal and vertical CSS i.e. padding and margin

6. iconfont.css

7. animate, iconfont, magnific-popup, slick slider - Plugin style

10. style.css is the main CSS file containg the layout styling of the pages.

The main sections of the style.css are separated by comments and the classes are named with clear names for better understanding and easier navigation.

Fonts

This theme uses ,Lato google fonts, Catamaran google fonts

Theme use default font Roboto and for heading and title theme use open sans fonts

Icon Fonts

This theme uses 900+ icon fonts like fontawesome, Linearicons and dripicons-master. You can use below link to see the detail of the each font.

Font-Awesome

Linearicons

themeisle-icons-graphics

JavaScript

This template is loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files are as under:

jquery.js
bootstrap.min.js
imagesloaded.pkgd.min.js
isotope.pkgd.min.js
jquery.easing.1.3.js
jquery.lwtCountdown-1.0.js
jquery.magnific-popup.min.js
jquery.parallax-1.1.3.js
jquery.scrollTo.min.js
jquery.sticky.js
jquery.viewport.mini.js
masonry.pkgd.min.js
wow.min.js
script.js
contact-form.js

Some of the jQuery plugins are heavily customized and chages in their files are not recommended.

All JS functions related to the theme content management are placed in script.js. The script.js file is responsible for the main functions. Other js file loads individual in respective demo pages where it is used.

Explaining common styles

This section explains some common style used in theme.

Text alignment

You can set text alignment by using common class like
.text-center{text-align:center !important;} .text-right{text-align:right !important;} .text-left{text-align:left !important;}

Text italic

You can set text italic and underline by using common class like
.text-italic{font-style:italic}.text-underline{text-decoration:underline;}

Font case

You can set Font case i.e. uppercase/lowercase/none by using common class like
.lowercase{text-transform: lowercase;} .uppercase{text-transform: uppercase;} .nocase{text-transform:none;}

Font weight

You can set font weight (i.e. font-weight:100 TO 900) by using common class like
.fw100{font-weight:100 !important;} .fw200{font-weight:200 !important;}....fw900

Letter Spacing

You can set letter spacing (positive and negative) by using common class like
/*2.3 letter-spacing(lp-) positive*/ .lp-0{letter-spacing:0px !important;} .lp-1{letter-spacing:1px !important;} .lp-2{letter-spacing:2px !important;} .lp-3{letter-spacing:3px !important;} .lp-4{letter-spacing:4px !important;} .lp-5{letter-spacing:5px !important;} .lp-6{letter-spacing:6px !important;} .lp-7{letter-spacing:7px !important;} .lp-8{letter-spacing:8px !important;} .lp-9{letter-spacing:9px !important;} .lp-10{letter-spacing:10px !important;}

position

You can set any component position i.e. left and right by using common class like
.float-left{float:left !important;} .float-right{float:right !important;}

You can used position(relative/fixed/absolute/static) by using common class like
.relative{position:relative !important;} .static{position:static !important;} .absolute{position:absolute !important;} .fixed{position:fixed !important;}

Background color style

Theme have mostly 3 background color style i.e. black, grey and color. You can specify background color scheme in any section or block or any component by using common class like
.grey-section{ background-color:#f8f8f8 !important; } .black-section{ background-color:#212121 !important; } .color-section{ background-color:#3a332d !important; }

Background overlay color style

You can set background overlay color opacity i.e. light color or black color in any section or block or any component by using commnon style like
/*5.2-Overlay background light*/ .overlay-light-alpha-10:before{background:rgba(255, 255, 255, 0.1);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-20:before{background:rgba(255, 255, 255, 0.2);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-30:before{background:rgba(255, 255, 255, 0.3);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-40:before{background:rgba(255, 255, 255, 0.4);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-50:before{background:rgba(255, 255, 255, 0.5);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-60:before{background:rgba(255, 255, 255, 0.6);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-70:before{background:rgba(255, 255, 255, 0.7);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-80:before{background:rgba(255, 255, 255, 0.8);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-light-alpha-90:before{background:rgba(255, 255, 255, 0.9);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} /*5.3-Overlay background dark*/ .overlay-dark-alpha-10:before{background:rgba(58, 51, 45, 0.1);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-20:before{background:rgba(58, 51, 45, 0.2);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-30:before{background:rgba(58, 51, 45, 0.3);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-40:before{background:rgba(58, 51, 45, 0.4);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-50:before{background:rgba(58, 51, 45, 0.5);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-60:before{background:rgba(58, 51, 45, 0.6);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-70:before{background:rgba(58, 51, 45, 0.7);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-80:before{background:rgba(58, 51, 45, 0.8);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .overlay-dark-alpha-90:before{background:rgba(58, 51, 45, 0.9);content: " ";height: 100%;left: 0;position: absolute;top: 0;width: 100%;}

For example you have to make a block with black background with overlay light.


class="black-section overlay-light-alpha-40">

Font family alter

Theme have used 3 google fonts in individual index pages. Each variants have mostly two font combination. You can set font by using common class like
.font-face1{font-family: 'Roboto', sans-serif;} .font-face1{font-family:'Arimo', sans-serif;}

Horizontal and vertical CSS i.e. padding and margin

padding-margin.css file contains responsive Horizontal and vertical padding and margin.
margin-top : mt-0 TO mt-140 margin-bottom: mb-0 TO mb-140 margin-left : ml-0 TO ml-140 margin-right: mr-0 TO mr-140 @media only screen and (max-width:1200px) margin-top : mt-lg-0 TO mt-lg-140 margin-bottom: mb-lg-0 TO mb-lg-140 margin-left : ml-lg-0 TO ml-lg-140 margin-right: mr-lg-0 TO mr-lg-140 @media only screen and (max-width:1024px) margin-top : mt-md-0 TO mt-md-140 margin-bottom: mb-md-0 TO mb-md-140 margin-left : ml-md-0 TO ml-md-140 margin-right: mr-md-0 TO mr-md-140 @media only screen and (max-width:768px) margin-top : mt-sm-0 TO mt-sm-140 margin-bottom: mb-sm-0 TO mb-sm-140 margin-left : ml-sm-0 TO ml-sm-140 margin-right: mr-sm-0 TO mr-sm-140 @media only screen and (max-width:767px) margin-top : mt-xs-0 TO mt-xs-140 margin-bottom: mb-xs-0 TO mb-xs-140 margin-left : ml-xs-0 TO ml-xs-140 margin-right: mr-xs-0 TO mr-xs-140 @media only screen and (max-width:480px) margin-top : mt-xxs-0 TO mt-xxs-140 margin-bottom: mb-xxs-0 TO mb-xxs-140 margin-left : ml-xxs-0 TO ml-xxs-140 margin-right: mr-xxs-0 TO mr-xxs-140 SAME FOR PADDING-TOP, PADDING-BOTTOM, PADDING-LEFT AND PADDING-RIGHT. YOu can use like following way. class="mt-120 mt-sm-80" - So initial in dasktop screen its margin-top with 120px and in small devices its margin-top with 80px.

Center content

You can set any component center of the screen or center of the main wrapper by using commno class like
.valign { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); }
And you can also set content in center position by using alternet class like
.table-content {position: relative;display: table;height: 100%;text-align: center;width: 100%;} .table-center-text {display: table-cell;height: 100%;vertical-align: middle;}

Mailchimp Configuration

Section containing class subscribe-section contains subscribe form.

You have to replace only action attribute of form tag with your mailchimp url.

Form with two hidden field named "u" and "id". You have to replace this value to your mailchimp account user and userid.

Form submitted via ajax call, contains in script.js file

Navigation

Navigation have 8 different style i.e. Menu-dark, Menu-dark-transparent, Menu-dark-bottom, Menu-dark-hidden, Menu-white, Menu-white-transparent, Menu-white-hidden, Menu-white-bottom.

Nav containing class "main-nav" contains main navigation. Below are the HTML structure of the main navigation.

For dark navigation with sticky at top use below style in nav tag

class="main-nav dark sticky"

For dark transparent navigation with fixed at top use below style in nav tag

class="main-nav dark transparent stick-fixed"

For dark transparent hidden navigation with fixed at top use below style in nav tag

class="main-nav dark transparent hide-menu stick-fixed"

For dark navigation with sticky bottom use below style in nav tag

class="main-nav dark bottom-menu sticky"

For light and color navigation with sticky at top use below style in nav tag

class="main-nav color-nav sticky"

For light and color transparent navigation with fixed at top use below style in nav tag

class="main-nav transparent stick-fixed color-nav"

For light and color transparent hidden navigation with fixed at top use below style in nav tag

class="main-nav transparent hide-menu color-nav stick-fixed"

For light and color navigation with sticky bottom use below style in nav tag

class="main-nav color-nav bottom-menu sticky"

All Navigation style contains in style.css file.

Page section

All html in this section is nested within a section with a class called "page-section". You can define any background image or background pattern in individual section by using data-background="path/to/image or pattern". For repeat background use class .repeat and for scroll background use class .scroll Below are the general HTML structure for portfolio section.

Credits

smooth-scroll.js
masonry.pkgd.min.js
jquery.sticky.js
jquery.scrollTo.min.js
jquery.parallax-1.1.3.js
magnific-popup
All images in theme (only in demo)- pixabay, Kaboompics and unsplash

Thanks!

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

please feel free to send me a message here: abmathasuriya on ThemeForest. OR you can send me ticket from our support system.