SevenApp is an incredibly eye catching and fully responsive Bootstrap 3 Template for any upcoming project. Template comes with developer friendly and easy to customizable code. It works on all main web browsers "IE8+", tablets and phones.
We hope you will enjoy using SevenApp template’s easy to navigate, user-friendly and catchy layout and yet developer friendly code. Our best wishes for your project or your customer :).
Copy Rights
- Author : Scoopthemes
- Twitter : @ScoopThemes
- Facebook : fb.com/scoopthemes
- Support : support@scoopthemes.com
Main Structure
SevenApp landing page structures as header
, slider
, section
, footer
and copyrights
very google friendly html.
Beginning of the Page
In order to detect Internet Explorer browser version a specific class implemented to following code at the beginning of all HTML pages
<!doctype html> <!--[if lt IE 7]><html lang="en" class="no-js ie6"><![endif]--> <!--[if IE 7]><html lang="en" class="no-js ie7"><![endif]--> <!--[if IE 8]><html lang="en" class="no-js ie8"><![endif]--> <!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Page Head
Page head contains Title, Metadata, Favicon and CSS.
<head> <meta charset="UTF-8"> <title>SevenApp - Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.theme.css"> <link rel="stylesheet" href="css/styles.css"> <script src="js/modernizr.custom.32033.js"></script> <!--[if IE]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]--> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head>
Header
header
tag contains both the nav
navbar and .slider-container
container class for the slider.
<header class="masthead"> <!-- Slider --> <div class="slider-container" id="slider"> ... ... </div> <!--Navigation--> <div class="navbar navbar-static-top" id="nav" role="navigation"> ... ... </div> </header>
Sections
Each section are in section
tag with an id for the nav scrolling, inside it .section-heading
class and contents.
.scrollpoint
class is for animation on scrolling it's toggeling when the section in the view.
.sp-effect1
, .sp-effect2
, .sp-effect3
, .sp-effect4
, .sp-effect5
and .sp-effect6
classes is for adding animation classes each has it's own effect.
.divider
is the seperatot between the h1
and h4
sub title.
<section id"id_goes_here"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-push-2 clearfix"> <div class="section-heading scrollpoint sp-effect3"> <h1>.Titl<span>e</span></h1> <span class="divider"></span> <h4>sub title goes here</h4> </div> </div> <div class="col-md-12"> <!--Content Goes Here With bootstrap Standards col-xs-# --> </div> </div> </div> </section>
Theme Configuration
SevenApp Template includes Three predefined theme colors. You can easily change the theme for your favorite colors using sass Css.
Using sass
SevenApp Template uses sass css processor, you can find the sass files in ../sass
. We will take you step by step to know the structure well.
The head for sass will look like this :
<!-- Contains Template Styling --> <link rel="stylesheet/sass" href="sass/styles.scss">
To Change colors open styles.scss
you can find it in /sass/styles.sass
, below how code looks like, see the $brand-primary:
change #de5749
to your light color. and it will calculate the light and the dark of this color
Compile the styles.scss
file and you will get a ready css file with your favorite color.
Sass mixins
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); //Colors $brand-primary : #de5749; // this is the primary color for your template $brand-primary-light : lighten($brand-primary, 20%); // the lighter color for your primary color $brand-primary-dark : darken($brand-primary, 20%); // the darker color for your primary color $brand-success: #5cb85c; // success color $brand-info: #5bc0de; // info color $brand-warning: #f0ad4e; // warning color $brand-danger: #d9534f; // danger color $brand-other: #25a7b4; // brand other color //Grays $gray-darker: lighten(#000, 13.5%); // #222 $gray-dark: lighten(#000, 20%); // #333 $gray: lighten(#000, 33.5%); // #555 $gray-light: lighten(#000, 60%); // #999 $gray-lighter: lighten(#000, 93.5%); // #eee //Basic Colors $white-color : #FFFFFF; // hex of the white $black-color: #000000; // hex of the black //font family $font-stack : 'Open Sans', Tahoma, Arial; //Mixins //Primary Color Gradient @include primaryGrad(gradDegree , gradStart, gradEnd ); //Gray Color Gradient @mixin grayGrad(gradDeg , gradStart, gradEnd); //Border Radius @mixin border-radius(radius); //Box Shadow @mixin box-shadow(shadow ); //like 0px 1px 3px rgba(0,0,0,.5) //Text Shadow @mixin text-shadow(text Shadow ); //like 0px 1px 3px rgba(0,0,0,.5) //Transition @mixin transition( transition value ); //Transparent @mixin transparent(color, alpha);
If you don't know how to compile sass use very easy koala app for windows, mac or linux.
Stylesheets
SevenApp comes with three different colors trying to meet your needs, ../css/styles.css
, ../css/styles2.css
and ../css/styles3.css
in the html you will find it in the head seaction :
You can change it to your .css
file favorite theme.
<link rel="stylesheet" href="css/styles.css">
If you want to use any of the predefined colors keep it as is :).
Javascript Intialization
Core javascript initialization implemented in ../js/script.js
thorugh appMaster
object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics.
You can call any of the available functions by objects for example : appMaster.smoothScroll();
, or even add your own.
var appMaster = { preLoader: function(){ // page preloader }, navSpy: function(){ // navspy for nav menu }, smoothScroll: function() { // Smooth Scrolling animates the whole web page to the section clicked }, scollToTop: function(){ // scoll to top script }, headerSlider: function(){ // slider in the header }, owlCarousel: function(){ // owl carousel for screen previews }, maps: function(){ // Google maps styling }, animateScript: function() { // this animates the elements on scrolloing using waypoint plugin } };
Fonts
SevenApp Template uses Open Sans font for headings from Google Web Fonts. You are able to choose more than 600+ fonts from Google Web Fonts. The font imported in the theme css file ../css/styles.css
In sass project you will find it in styles.scss
file you can find it in ../sass/styles.scss
.
// Font Importing @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
Credits
Name | Description | URL |
---|---|---|
Twitter Bootstrap | Sleek, intuitive, and powerful front-end framework for faster and easier web development. | http://twitter.github.io/bootstrap |
jQuery | jQuery is a fast, small, and feature-rich JavaScript library. | http://jquery.com |
Font Awesome | Font Awesome The iconic font designed for Bootstrap | http://fortawesome.github.io/Font-Awesome |
owlCarousel | Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. | http://www.owlgraphic.com/owlcarousel/ |
Waypoint | Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element. | https://github.com/imakewebthings/jquery-waypoints |
Mockups | All the mockups included from freebbble.com. | http://freebbble.com/ |
Mockup Download Links
As promissed here are the link to download mockups download from here.
Thank You For Purchasing Our Template, We Wish For You The Best Of Luck With Your Client, Cheers :). ScoopThemes Team.