This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.See for yourself (resize your browser).If you would like to read more about bootstrap framework click here: Bootstrap Documentation.
1.1. Grid System and Single row structure
The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here
Basic grid HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> |
1.2. Page structure
Below you will find default page structure (default.hbs files):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!DOCTYPE html> <html> <head> {{! Document Settings }} <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> {{! Page Meta }} <title>Orlando - Blog</title> <meta name="description" content="{{meta_description}}" /> <meta name="HandheldFriendly" content="True" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" href="{{asset "/favicon.ico"}}"> {{! Styles'n'Scripts }} <link rel="stylesheet" type="text/css" href="{{asset "css/bootstrap.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "css/mb-slider.css"}}"> <link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" /> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" /> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="{{asset "bootstrap/js/html5shiv.min.js"}}"></script> <script src="{{asset "bootstrap/js/respond.min.js"}}"></script> <![endif]--> <script src="{{asset "js/modernizr.custom.js"}}"></script> <script src="{{asset "js/device.min.js"}}"></script> {{! Ghost outputs important style and meta data with this tag }} {{ghost_head}} </head> <!-------------------TYPES OF MENU------------------> <!--If you want to can change the type of menu here. Just add or remove the class: ct-navbar--fixedTop ct-navbar--fixedBottom ct-navbar-isTransparent-toDefault ct-navbar-isTransparent-toInverse ct-navbar--logoright - user can use logo on the right or on the left side ct-js-navbarMakeSmaller - user may decide if he wants the navbar to be smaller or not on scroll ct-js-enableWayPoints - user may decide if he wants the waypoints sections to appear or not .ct-js-wayPoint added to header ct--darkMotive - dar flavour option <!---------------------------------------------------> <body class="cssAnimate ct-navbar--fixedTop ct-js-navbarMakeSmaller ct-js-enableWayPoints"> {{> responsive-menu}} {{> menu}} {{{body}}} {{ghost_foot}} {{! The main JavaScript file for Corpress }} <script type="text/javascript" src="{{asset "js/jquery.min.js"}}"></script> <script type="text/javascript" src="{{asset "bootstrap/js/bootstrap.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/jquery.placeholder.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/jquery.easing.1.3.js"}}"></script> <script type="text/javascript" src="{{asset "js/jquery.appear.js"}}"></script> <script type="text/javascript" src="{{asset "js/counter/jquery.countTo.js"}}"></script> <script type="text/javascript" src="{{asset "js/counter/init.js"}}"></script> <script type="text/javascript" src="{{asset "js/jquery.browser.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/snap.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/waypoints.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/waypoints-sticky.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/ct-mediaSection/jquery.stellar.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/ct-mediaSection/init.js"}}"></script> <script type="text/javascript" src="{{asset "js/charts/Chart.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/charts/init.js"}}"></script> <!--Flexslider below--> <script type="text/javascript" src="{{asset "js/flexslider/jquery.flexslider-min.js"}}"></script> <script type="text/javascript" src="{{asset "js/flexslider/init.js"}}"></script> <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script> <!--This is main files--> <script type="text/javascript" src="{{asset "js/main.js"}}"></script> <!-- Google Maps --> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="{{asset "js/gmaps/gmap3.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/gmaps/init.js"}}"></script> <!--This is for picture--> <script type="text/javascript" src="{{asset "js/magnific-popup/jquery.magnific-popup.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/magnific-popup/init.js"}}"></script> <!-- Contact form validation --> <script type="text/javascript" src="{{asset "form/js/contact-form.js"}}"></script> <!--This is ghost slider--> <script type="text/javascript" src="{{asset "js/mb-ghost-slider.js"}}"></script> <!--Files needed for portfolio--> <script type="text/javascript" src="{{asset "js/portfolio/jquery.isotope.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/portfolio/imagesloaded.js"}}"></script> <script type="text/javascript" src="{{asset "js/portfolio/infinitescroll.min.js"}}"></script> <script type="text/javascript" src="{{asset "js/portfolio/init.js"}}"></script> <script type="text/javascript" src="{{asset "js/uniqueTags.js"}}"></script> <script type="text/javascript" src="{{asset "js/less.min.js"}}"></script> </body> </html> |
The most important pages in ghost are home.hbs and index.hbs. The pages are almost the same. Below you can see how looks like the structure of those pages:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!-- This is home.hbs page--> {{!< default}} <!-- If you would like to have a push effect, just change a class to ct-pageWrapper ct-intro--push--> <!-- If you would like to have a slice effect, just change a class to ct-pageWrapper ct-intro--sliced--> <!-- If you would like to have a flexslider effect or particles effect, just change a class to " "--> <div id="ct-js-wrapper" class="ct-pageWrapper ct-intro--push"> <header class="ct-pageHeader ct-pageHeader--motive ct-pageHeader--hasDescription ct-u-paddingBoth10"> <div class="container ct-u-triangleBottomLeft"> <div class="row"> <div class="col-md-8"> <h1 class=" ct-fw-600 ct-u-colorWhite"> Welcome<sup><i class="fa fa-paper-plane"></i></sup> </h1> </div> <div class="col-md-4"> <span class="ct-u-size20 ct-u-colorWhite"> Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat. </span> </div> </div> </div> </header> {{!>simply-slider2}} <!--This is simply slider, tis is the same slider like in page-office.hbs file--> {{!> flexslider-effect}} <!--This is the big slider on the main side of tha page, if you want to enable the effect just remove ! and change the wrapper class to " "--> {{!> slice-effect}} <!--this is slice effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--sliced and add this class ct-intro-content below --> {{!> push-effect}} <!--this is push effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--push and add this class ct-intro-content below--> {{!>particles-effect}} <!--This is the particles effect, if you want to enable the effect just remove ! and change the wrapper class to " "--> <!--If we use a effect like slice or push, all the content must be in this section--> <!--If you have to use a effect like above , you have add this class ct-intro-content--> {{>blog_infinity}} <!--Here you can eneable infinity blog, This type of blog is different than else, so it must be activate here--> <div class="ct-u-paddingBoth100 ct-u-diagonalBottomRight"> <div class=""> <!--THIS EFECT IS ONLY FOR THE PUSH AND SLICE EFFECT, IF YOU WANT TO USE PARTICLES YOU MUST DELETE THIS CLASS--> <div class="container"> <div class="row"> {{!> blog_default}} <!--if you want to have a default blog on your page--> {{!> blog_secundary}} <!--if you want to have a secundary blog on your page--> {{!> blog_masonry}} <!--if you want to have a blog small on your page--> </div> </div> </div> </div> {{> footer}} </div> |
This is index.hbs page. Here you can set the four types of blog and the effect for second,3,4..n pages of blog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- This is index.hbs page--> {{!< default}} <div id="ct-js-wrapper" class="ct-pageWrapper"> {{>main-header}} {{>blog_infinity}} <!--Here you can eneable infinity blog, This type of blog is different than else, so it must be activate here--> <div class=""> <!--If you have to use a effect like above , you have add this class ct-intro-content--> <div class="ct-u-paddingBoth100 ct-u-diagonalBottomRight"> <div class="container"> <div class="row"> {{!> blog_default}} <!--if you want to have a default blog on your page--> {{!> blog_secundary}} <!--if you want to have a secundary blog on your page--> {{!> blog_masonry}} <!--if you want to have a blog small on your page--> </div> </div> </div> {{> footer}} </div> </div> |
Author page in ghost is the page has information about the author, locatiom, posts… Below you can see the structure of the page:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<link rel="stylesheet" type="text/css" href="{{asset "css/author_style.css"}}"/> {{!< default}} <div id="ct-js-wrapper" class="ct-pageWrapper"> {{>main-header}} <div class="ct-u-paddingBoth100 ct-u-diagonalTopLeft ct-u-diagonalBottomRight"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> {{#author}} <section class="author-profile2 inner2"> {{#if image}} <figure class="author-image2"> <div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div> </figure> {{/if}} <h1 class="author-title2">{{name}}</h1> <h2 class="author-bio2">{{bio}}</h2> <div class="author-meta"> {{#if location}}<span class="fa fa-home fa fa-lg"></span> {{location}}{{/if}} {{#if website}}<span class=""><a href="{{website}}">{{website}}</a></span>{{/if}} <span class="author-stats" style="padding-left: 10px;"><i class="fa fa-bar-chart fa fa-lg"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span> </div> </section> {{/author}} {{! This is the post loop - each post will be output using this markup }} </div> {{>loop}} </div> </div> </div> {{> footer}} </div> |