Flexipost Bootstrap Template

Thank you for purchasing the Flexipost Bootstrap template and the confidence you have placed in Dart Simple Solutions.
In this document, you will find an in-depth description of all Flexipost features and functions. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online for you free of charge on our website at http://doc.dartsimple.com/flexipost-bootstrap.html

Developer website: http://dartsimple.com
Customer service: http://dartsimple.com/contact-us/

 

File Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

.
├── assets/
├── css/
│   ├── main.css
├── images/
│   ├── blog-sidebar/
│   ├── homepage/
│   ├── icons/
│   └── socials/
│   └── Blog_Post-A-Vs-B-Comparison/
│   └── Blog_Post-Top-10-Table/
├── js/
│   ├── app.js
├── 404.html
├──about-hero-video.html
├──about-slider.html
├──about-video.html
├──Blog_Post-A-Vs-B-Comparison.html
├──Blog_Post-A-Vs-B-Comparison_2.html
├── Blog_Post-Classic-Image.html
├── Blog_Post-Classic-Typography.html
├── Blog_Post-Classic-Video.html
├── Blog_Post-Gallery.html
├── Blog_Post-Rating.html
├── Blog_Post-Slider.html
├── Blog_Post-Top-10-Narrative.html
├── Blog_Post-Top-10-Table.html
├── blog-default.html
├── categories.html
├── contact-map-container.html
├── contact-map-wide.html
├── faq.html
├── homepage-cta-slider.html
├── homepage-hero-slider.html
├── homepage-hero-video.html
├── homepage-multipost-slider.html
├── homepage-sidebar-2.html
├── homepage-sidebar-3.html
├── homepage-social.html
├── homepage-video.html
├── index.html
├── profile.html
├── Search_Classic-Sidebar.html
├── Search_Previews.html

 

Let’s take a look a public directory structure

Folder Name

Description

Assets

Contains various assets used by the template

Plugins

These are javascript plugins which are used only in various pages of the template

Css

Stylesheet css files

Images

Images

Js

JavaScript files

 

HTML Structure

Markup Customization And Highlights

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

We have 3 styles of sidebar and header

The hamburger menu opening is implemented on bootstrap technology.
Menu icon(hamburger):

<button class="menu-toggler" id="menu">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</button>

There is a menu list that you can change here:

<ul class="nav navbar-nav">
  <li><a href="javascript:void(0)">Home</a></li>
  <li><a href="javascript:void(0)">Features</a></li>
  <li class="dropdown"><a class="dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Life<i class="fa fa-chevron-down"></i></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:void(0)">Life 1</a></li>
      <li><a href="javascript:void(0)">Life 2</a></li>
      <li><a href="javascript:void(0)">Life 3</a></li>
      <li class="divider" role="separator"></li>
      <li><a href="javascript:void(0)">Life 4</a></li>
      <li class="divider" role="separator"></li>
      <li><a href="javascript:void(0)">Life 5</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0)">About Me</a></li>
  <li><a href="javascript:void(0)">Contact</a></li>
</ul>

<!--/.navbar-nav-->

 

Logo image

Similar to as a normal colored page header, you will have to change a logo image in .navbar-brand. For example for desktop:

<a class="logotype" href="/">
	<div class="logo"><img src="./images/logo-purple.svg" alt="logotype"></div>
	<div class="text"><span>Flexi Post</span></div>
</a>

And for mobile:

a class="logotype mobile-logotype" href="/">
	<div class="logo"><img src="./images/logo-purple.svg" alt="logotype"></div>
	<div class="text"><span>Flexi Post</span></div>
</a>

 

Left Sidebar

The left part of the menu which has 3 different style

<asideclass="sidebar style1">
…..
</aside>

 

Hero Block

Block above the content that contains sliders, video

<main>
<divclass="slider">
…..
</div>
<main>

 

Main Content Section

This section contains the main content of the page: post list, search result, single post content, etc.

<main>
<divclass="news-container">
…..
</div>
</main>

 

Blog Right Sidebar

The right side of the menu, which contains various widgets

<main>
<divclass="widgets-sidebar">
…..
</div>
</main>

 

Comments Section

This block contains comments

<divclass="comments-block">
…..
</div>

 

Footer Section

The bottom of the page

<footerclass="footer">
…..
</footer>

 

CSS Structure

You are often able to further customize the template by enabling or disabling many of Flexipost's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in Flexipost follows below:

<!-- Styles-->
<link href="css/main.css" rel="stylesheet">

 

Files

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Flexipost is no exception to this rule. Full list of stylesheet files is available below for your review.

Stylesheets listing

 

File Name

Description

bootstrap.min.css

Default bootstrap style

bootstrap-select.min.css

Bootstrap styled selects

owl.carousel.css

Owl carousel plugin default stylesheet

owl.theme.css

Owl carousel plugin theme stylesheet

jquery.mCustomScrollbar.css

Custom scrollbar plugin

font-awesome.css

Font awesome icons

main.css

The main stylesheet which contains almost everything that the template is styled upon

photoswipe.css

Opens image in lightbox

default-skin.css

Color theme for Photoswipe

 

Plugin Initialization

<!— Bootstrap —>
<link href="./assets/plugins/bootstrap/dist/css/bootstrap.min.css"rel=«stylesheet">
<!— Bootstrap Select —>
<link href="./assets/plugins/bootstrap-select/dist/css/bootstrap-select.min.css"rel=«stylesheet">
<!— Font Awesome Icons —>
<link href="./assets/plugins/font-awesome/css/font-awesome.min.css"rel=«stylesheet">
<!— Custom Scrollbar —>
<link href="./assets/plugins/jquery.mCustomScrollbar/jquery.mCustomScrollbar.css"rel=«stylesheet">
<!— Owl carousel —>
<link href="./assets/plugins/owl.carousel/dist/assets/owl.carousel.min.css"rel="stylesheet">
<!— Owl theme —>
<link href="./assets/plugins/owl.carousel/dist/assets/owl.theme.default.min.css"rel="stylesheet">
<!— Photoswipe Gallery —>
<link href="./assets/plugins/photoswipe/dist/photoswipe.css"rel=«stylesheet">
<link href="./assets/plugins/photoswipe/dist/default-skin/default-skin.css"rel="stylesheet">
<!— Date Range Picker —>
<link href="assets/plugins/calentim-daterangepicker/build/css/calentim.min.css"rel="stylesheet">
<!— preloaderDK —>
<link href="assets/plugins/preloaderDK/preloaderDK.css"rel="stylesheet">
<!— Main Style —>
<link href="css/main.css"rel=«stylesheet">

 

Customization

Base-sizing library

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customization power with just a few classes added to a certain block or element.

  • A brief list of class groups inside:
  • Margin classes
    Example: mt-20 (margin-top:20px), ml-40 (margin-left:40px), mr-60 (margin-right:60px), mb-80 (margin-bottom:80px)
    Example on small screens: mt-sm-20 (margin-top:20px), ml-sm-40 (margin-left:40px), mr-sm-60 (margin-right:60px), mb-sm-80 (margin-bottom:80px)
  • Negative Margin classes (left, right, top, bottom)
    They are named “mnl-10” or “mnl-md-10” (margin negative left or margin negative top etc.)
  • Padding Classes (left, right, top, bottom)
    Named “pb-10” or “pb-xs-10” (padding bottom)
  • Font-sizes-presets (fs-small, fs-xxl etc.)
    For smaller screens: fs-sm-small, fs-sm-xxl .
  • Height Sizing Presets
    These are height values from 10 to 10 to set responsive height to a block.
    Example: hsize-110 or hsize-160 etc.
    Example for smaller screens: hsize-md-110 or hsize-sm-110 or hsize-xs-110
  • Float & Float Clearing Presets
  • Width presets
  • Button Padding classes
  • Column list reset class
  • Text align class

We highly recommend you taking a thorough look overall in the stylesheet while keeping in mind what’s inside and what you can use from it.

Use of these presets is demonstrated below for your convenience.

<div class="mt-100 mt-sm-50">
	This block will have a 100px margin-top (on any resolution)
	Also because mt-sm-50 is added, the top margin becomes 50px on resolutions smaller than 992px
</div>

or:

<h3 class="fs-xxl fs-xs-small">
	This heading has 36px by default (because of the fs-xxl class) but on mobile devices (767px and smaller) the font-size will become 16px. We solved both mobile layout problems and also reduced several lines of code.
</h3>

 

Main.css stylesheet

This is the main stylesheet which contains almost everything that the template is styled upon. Please keep in mind that Ii will surely update the template so, so we highly recommend that you don't edit this file. instead, please add your own CSS code into custom.css stylesheet. It’s very important not to overwrite your work.

The template itself serves as a database of examples of HTML markup and CSS styles applied. In the styles menu pages you can see there is a number of examples of the classes and styles added to the page elements. Please review the file extensively to gain a thorough understanding of its contents before making changes. If you don’t time for such review, you may opt in favor of a simpler copy/paste of the code from existing HTML files and then debugging styles using the Chrome Developer Tools.

 

JavaScript Structure

JS plugins are initialized and can be edited in the lower part of the code for each HTML file.

<!— JavaScript —>
<!— IE console.log fix —>
<script src=‘assets/plugins/consoleFix.js'></script>
<!— jQuery —>
<script src='assets/plugins/jquery/dist/jquery.min.js'></script>
<!— IE fix placeholders in inputs and textarea —>
<script src=‘assets/plugins/placeholder.js'></script>
<!— Main Plugins —>
<script src='assets/plugins/bootstrap/dist/js/bootstrap.min.js'></script>
<script src='assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js'></script>
<script src='assets/plugins/modernizr.js'></script>
<script src='assets/plugins/jquery.mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js'></script>
<script src='assets/plugins/owl.carousel/dist/owl.carousel.min.js'></script>
<script src='assets/plugins/owlcarousel2-thumbs/dist/owl.carousel2.thumbs.min.js'></script>
<script src='assets/plugins/bootstrap-validator/dist/validator.min.js'></script>
<script src='assets/plugins/photoswipe/dist/photoswipe.min.js'></script>
<script src='assets/plugins/photoswipe/dist/photoswipe-ui-default.min.js'></script>
<script src='assets/plugins/isotope/isotope.pkgd.min.js'></script>
<script src='assets/plugins/isotope/isotope.layoutModules.js'></script>
<script src='assets/plugins/jquery.touchSwipe.min.js'></script>
<!— Moment —>
<script src=‘assets/plugins/moment/min/moment.min.js'></script>
<!— Date Range Picker —>
<script src='assets/plugins/calentim-daterangepicker/build/js/calentim.min.js'></script>
<!— Images Loaded —>
<script src=‘assets/plugins/imagesloaded.pkgd.min.js'></script>
<!— Appear —>
<script src=‘assets/plugins/appear.min.js'></script>
<!— Semantic UI Sticky —>
<script src='assets/plugins/semantic-ui-sticky/sticky.min.js'></script>
<!— Baron Scroll —>
<script src='assets/plugins/baron/baron.min.js'></script>
<!— WOW Animation Trigger —>
<script src=‘assets/plugins/wow.min.js'></script>
<!— Smooth Wheel —>
<script src=‘assets/plugins/jquery.smoothwheel.js'></script>
<!— Google Maps Api —>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCvpH7_ggEW5MYLRO8EN1BbJak4u2uIvaA'></script>
<script src='js/app.js'></script>

 

IE Compatibility

Our projects are designed to accommodate large audiences with varied preferences, so we adapt every template to ensure correct display even in older browser versions, such as IE8 and others. To ensure proper display of your website in older browsers, please check that the below snippet of code to facilitate compatibility with older browsers:

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]>

<!-- Used to fix visual bugs in older IE browsers to help them make their life easier. -->

<!-- This is making bootstrap working on IE browsers that doesn’t support it. -->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!—-[if get IE 6]>
<script src="assets/plugins/HTML5shiv.js"></script>
<script src="assets/plugins/respond.min.js"></script>
<![endif]>

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- Personal Meta tags-->
<meta charset="UTF-8">
<meta name="title" content=«">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
<!-- Meta descriptions-->
<meta name="keywords" content="premium template, ds template, dart simple">
<meta name="description" content="Dart Simple Solutions - Premium template">
<!-- Restrict google from scanning info from Dmoz or YahooDir-->
<meta name="robots" content="noodp,noydir">
<!-- Author markup-->
<meta name="author" content="Dart Simple Solutions - Premium Wordpress template">
<meta name="copyright" content="Dart Simple Solutions">

 

Bootstrap Framework

To ensure our templates are 100% responsive, we use Bootstrap grid and framework

 

Template Customization

Additionals style modifications

We regularly update and expand our templates with additional useful CSS classes. Flexipost includes base-sizing.css file, which contains many useful features to help you customize your website and even create additional HTML blocks.

Height Class Presets

These height classes are all in pixels and they can be adjusted in increments of 10, beginning with 0 and ending with 700px. These heights are generally added to the page-header block, which will use your predefined height. The classes are:

.hsize-full {height:100% !important;} /* full height */
.hsize-reset {height:0 !important;} /* height zero */
.hsize-10 {height:10px;}
.hsize-20 {height:20px;}
...
.hsize-100 {height:100px;}
.hsize-110 {height:110px;}
.hsize-120 {height:120px;}
...
.hsize-200 {height:200px;}
.hsize-210 {height:210px;}
.hsize-220 {height:220px;}
...
.hsize-300 {height:300px;}
.hsize-310 {height:310px;}
.hsize-320 {height:320px;}
...
.hsize-400 {height:400px;}
.hsize-410 {height:410px;}
.hsize-420 {height:420px;}
...
.hsize-500 {height:500px;}
.hsize-510 {height:510px;}
.hsize-520 {height:520px;}
...
.hsize-600 {height:600px;}
.hsize-610 {height:610px;}
.hsize-620 {height:620px;}
...
.hsize-700 {height:700px;}

 

Breakpoint classes listed below are being used to facilitate valid responsive layout on smaller devices:

  • .hsize-md-10 or hsize-md-190 or hsize-md-380 for medium screens (1200px) and below, (covering both small and extra small.)
  • .hsize-sm-10 or hsize-sm-90 or hsize-sm-380 for small screens (991px) and below, (covering extra small too.)
  • .hsize-xs-10 or hsize-xs-90 or hsize-xs-380 for extra small screens (767px) and below.

You can thus enjoy different heights for each breakpoint (and for each different device), like class=”hize-290 hsize-md-150″, meaning it’s 290px in height on large desktops and 150px on medium and smaller screens.

Width Classes

Width classes presets are only added as percentages and range from 10 to 100% until full width. The classes are:

.w-10 {width:10% !important;}
.w-15 {width:15% !important;}
.w-20 {width:20% !important;}
.w-25 {width:25% !important;}
.w-30 {width:30% !important;}
.w-35 {width:35% !important;}
.w-40 {width:40% !important;}
.w-45 {width:45% !important;}
.w-50 {width:50% !important;}
.w-55 {width:55% !important;}
.w-60 {width:60% !important;}
.w-65 {width:65% !important;}
.w-70 {width:70% !important;}
.w-75 {width:75% !important;}
.w-80 {width:80% !important;}
.w-85 {width:85% !important;}
.w-90 {width:90% !important;}
.w-95 {width:95% !important;}
.w-100 {width:100% !important;} /* full width */
.w-init {width:initial !important;} /* initial width */

 

Additional breakpoint classes are available for smaller devices. For example:

  • .w-md-10 or w-md-90 for medium screens (1200px) and below, covering both small and extra small.
  • .w-sm-10 or w-sm-90 for small screens (991px) and below, covering extra small too.
  • .w-xs-10 or w-xs-90 for extra small screens (767px) and below

Please recall that you can have different widths for each breakpoint, such as,class=”w-90 w-md-50″ which means it’s 90% in width on large desktops and 50% (half) on medium and smaller screens.

Text Align Presets

Text align presets are left, right and center

The classes are:

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

Further breakpoint classes are available for small and extra-small devices. For example:

.text-xs-center {text-align: center;}
.text-xs-right {text-align: right;}
.text-xs-left {text-align: left;}

Positions Presets

Positions presets can be used to set element’s position.

The classes are:

.pos-init {position: initial !important;}
.pos-fixed {position: fixed !important;}
.pos-abs {position: absolute !important;}
.pos-rel {position: relative !important;}

 

You can also set positions even on responsive breakpoints as you’ll see below.

.pos-xs-fixed {position: fixed !important;}
.pos-sm-abs {position: absolute !important;}
.pos-md-rel {position: relative !important;}

 

Lists with columns:

A list can be divided into multiple columns by simply adding the attribute data-columns=”#”. For example a list with 3 columns looks like this:

<ul data-columns="3">
	<li>...</li>
	....
</ul>

 

Now, if you want to reset the list on smaller screens in a responsive solution, the list can be reset with the classes .list-col-reset-md .list-col-reset-sm .list-col-reset-xs

For example:

<ul class="list-col-reset-sm" data-columns="3">
	<li>...</li>
	....
</ul>

 

In the example above, the list will reset itself (no columns) when the screen width reaches the sm breakpoint which is 991px.

Float & Float clearing classes:

The following code is from Bootstrap library but is very useful to know.

.pull-left {float:left}
.pull-right {float:right}
.pull-none {float:none !important;} /* not in bootstrap, added in this template */

Example for small device breakpoint:

.pull-none-sm {float:none !important;}

You can also clear the floats even on responsive breakpoints:

.cleft-sm {clear:left;}
.cright-sm {clear:right;}
.cboth-sm {clear:both;}
.clear-init-sm {clear:initial;}

And, for example, on medium breakpoint see below.

.cleft-md {clear:left;}
.cright-md {clear:right;}
.cboth-md {clear:both;}
.clear-init-md {clear:initial;}

 

Button Paddings

There are 3 padding classes for buttons: .mid-padding .big-padding and .long-padding. They’re commonly used whenever a button should break the pattern of standard button.

Although it’s rarely the case, buttons can also be resized with responsive breakpoints. For example: .btn.mid-padding-md, .btn.big-padding-md or .btn.long-padding-xs (and so on)

.btn.mid-padding-md {padding: 10px 20px; line-height:1;}
.btn.big-padding-md {padding: 15px 30px; line-height:1;}
.btn.long-padding-md {padding-left: 30px; padding-right:30px;}

 

Border Radius

There are border radius classes for all elements: .br.

For example:

.br-md-0 {border-radius:0 !important;}
.br-md-1 {border-radius:1px !important;}
.br-md-2 {border-radius:2px !important;}
.br-md-3 {border-radius:3px !important;}
.br-md-4 {border-radius:4px !important;}
.br-md-5 {border-radius:5px !important;}

They go from 0 to 20 and 30, 40, 50 after. You can use them with adaptive classes.


Opacity

This class sets opacity

.op-md-0 {opacity:0 !important;}
.op-md-1 {opacity:0.1 !important;}
.op-md-2 {opacity:0.2 !important;}
.op-md-3 {opacity:0.3 !important;}
.op-md-4 {opacity:0.4 !important;}
.op-md-5 {opacity:0.5 !important;}
.op-md-6 {opacity:0.6 !important;}
.op-md-7 {opacity:0.7 !important;}
.op-md-8 {opacity:0.8 !important;}
.op-md-9 {opacity:0.9 !important;}
.op-md-10 {opacity:1 !important;}

 

Z-index classes

Z-index classes set z-index

.z-md-0 {z-index: 0 !important;}
.z-md-1 {z-index: 1 !important;}
.z-md-2 {z-index: 2 !important;}
.z-md-3 {z-index: 3 !important;}

 

Resets Classes

Resets classes are for resetting different styles

/* Resets */
.bd-md-0 {border:0 !important;}
.bg-trans-md {background:transparent !important;}
.l-md-0 {left:0 !important;}
.r-md-0 {right:0 !important;}
.b-md-0 {bottom:0 !important;}
.t-md-0 {top:0 !important;}
.lower-case-md{text-transform: initial !important;}

 

Margins and Paddings

Inside css/base-sizing.css you will find a number of predefined classes. Below we describe margins and paddings.

Predefined classes for margins and paddings are necessary to ensure consistency in spacing while providing customers with sufficient flexibility.

Settings for left/right margins, paddings and negative margins are available in the following increments:

5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px
60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px

In addition to the above values, top and bottom margins and paddings can be also set to 200px and 250px.

Sample code for margins:

Top: mt-##, example classes: mt-20, mt-40, mt-100 etc.
Bottom: mb-##, eg: mb-20, mb-40, mb-100 etc.
Left: ml-##, eg: ml-20, ml-40, ml-100 etc.
Right: mr-##, eg: mr-20, mr-40, mr-100 etc.

Sample code for paddings:

Top: pt-##, example classes: pt-20 , pt-40, pt-100 etc.
Bottom: pb-##, eg: pb-20, pb-40, pb-100 etc.
Left: ml-##, eg: pl-20, pl-40, pl-100 etc.
Right: pr-##, eg: pr-20, pr-40, pr-100 etc.

Negative margins can be used for extra complex structures and layouts. As follows from their name, these negative margins will add spaces reversely.

Sample code for negative margins:

Top: mnt-##, example classes: mnt-20 , mnt-40, mnt-100 etc.
Bottom: mnb-##, eg: mnb-20, mnb-40, mnb-100 etc.
Left: mnl-##, eg: mnl-20, mnl-40, mnl-100 etc.
Right: mnr-##, eg: mnr-20, mnr-40, mnr-100 etc.
Auto: mg-auto

 

Responsive Layout

To facilitate fully responsive layout, we've introduced extra breakpoint classes that will take over when pages are viewed in certain resolutions.

For example, with large screens just leave the default class, eg: class="mt-100", which will add a top margin of 100px automatically.

For other screens, add the screen’s breakpoint classes, which are: md (medium devices), sm (small devices), xs (extra small devices), which can be combined for greater flexibility:

For medium screens and below: use mt-md-100, for example, class="mt-100 mt-md-60", which means that a 60px top margin will take over the default 100px margin whenever browser width is set to 1200px.

For small screens and below: use mt-sm-100, for example class="mt-100 mt-md-60 mt-sm-40", which means that a 40px top margin will take over the default 100px margin whenever browser width is set to 991px.

For extra small screens and below (eg smartphones): use mt-xs-100, for example class="mt-100 mt-md-60 mt-sm-40 mt-xs-20", which means that a 20px top margin will take over the default 100px margin whenever browser width is set to 767px.

 

Typography Classes

We pay special attention to typography. In our opinion, it is one of the key qualities of an effective template. Flexipost comes with a truly impressive package of typography elements, which we cover below.

A number of predefined classes can be found inside the CSS/base-sizing.css stylesheet.

Font sizing:

Because there’s a wide variety of popular headings and custom font sizes, we've added predefined sizing classes as follows.

.fs-micro {font-size:9px;}
.fs-xsmall {font-size:11px;}
.fs-normal {font-size:13px;}
.fs-smaller {font-size:15px;}
.fs-small {font-size:16px;}
.fs-m {font-size:18px;}
.fs-l {font-size:20px;}
.fs-xl {font-size:24px;}
.fs-xxl {font-size:32px;}
.fs-larger {font-size:42px;}
.fs-xxxl {font-size:56px;}
.fs-xxxxl {font-size:75px;}
.fs-jumbo {font-size:80px;}
.fs-huge {font-size:120px;}
.fs-crazy {font-size:200px;}

These classes can be used as follows:

<h4 class="fs-xxl"> I'm a heading and I'm 32px sized </h4>

To facilitate responsive layout and eliminate display errors between various screen sizes, we also introduced breakpoint naming as follows:

.fs-smaller {font-size:15px;}
.fs-md-smaller --//--
.fs-sm-smaller --//--
.fs-xs-smaller --//--

.fs-m {font-size:18px;}
.fs-md-m --//--
.fs-sm-m --//--
.fs-xs-m --//--

.fs-xxl {font-size:32px;}
.fs-md-xxl --//--
.fs-sm-xxl --//--
.fs-xs-xxl --//--

.fs-jumbo {font-size:80px;}
.fs-md-jumbo --//-- 
.fs-sm-jumbo --//--
.fs-xs-jumbo --//--

This ensures consistency of font sizes relative to screen sizes, while maintaining responsive typography.

For example:

<h4 class="fs-xxl fs-md-l fs-sm-small fs-xs-micro">In'm a heading, Ii normally have 32px on desktops, 20px on medium screens like big tablets, then 16px on small screens like small tablets, and 9px on tiny screens like smartphones. I'm so flexible!! </h4>

 

Credits & References

Frameworks

Twitter Bootstrap v3

http://getbootstrap.com/

jQuery

http://jquery.com/

Plugins

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

https://jquery.com/

Bootstrap

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

http://getbootstrap.com/

Bootstrap select

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.

https://silviomoreto.github.io/bootstrap-select/

Bootstrap validator

A simple and user-friendly form validator plugin for Bootstrap 3

http://1000hz.github.io/bootstrap-validator/

Photoswipe

Touch-friendly JavaScript image gallery for mobile and desktop, without dependencies. Responsive layout. Swipe and zoom gestures

http://photoswipe.com/

Moment

Parse, validate, manipulate, and display dates and times in JavaScript.

 

https://momentjs.com/

Calentim Datepicker

Calentim is a Date/Time Range Picker plugin, built using jQuery and moment.js libraries.

http://rettica.com/calentim/docs/readme.html

Owl Carousel

Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slider.

https://github.com/OwlCarousel2/OwlCarousel2

Isotope

This is a layout and sorting plugin for various usages, for example, the portfolio items or a simple gallery.

http://isotope.metafizzy.co/

Images Loaded

Detect when images have been loaded.

 

 

https://imagesloaded.desandro.com/

Appear

Track the visibility of dom elements and fire user defined callbacks as they appear and disappear.

http://creativelive.github.io/appear/

Semantic sidebar

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

https://semantic-ui.com/

mCustom Scrollbar

This is a highly customizable custom scrollbar jQuery plugin.

https://github.com/malihu/malihu-custom-scrollbar-plugin

consoleFix

Fixing console logs for IE

https://gist.github.com/peteboere/4147923

modernizr

Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.

https://modernizr.com/

HTML5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer

https://github.com/aFarkas/HTML5shiv

Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

https://github.com/scottjehl/Respond

Placeholder

Placeholders.js is a JavaScript polyfill for the HTML5 placeholder attribute. It's lightweight, has zero dependencies and works in pretty much any browser you can imagine.

https://jamesallardice.github.io/Placeholders.js/

CSS

  • Bootstrap 3 - getbootstrap.com
  • Font Awesome - fontawesome.io
  • IonIcons - ionicons.com

Images

  • Deposit Photos - depositphotos.com
  • Pixabay - pixabay.com