MICROFLAT

This is the template help documentation file. Please search this before contacting the Chicle Support. Note that we do not support template customizations beyond it's original functionality & appearance.

Live Template Demo

“Microflat” Documentation by “Chicle Design” v1.0.2

By: Chicle Design
Email: chicle@chicle.eu

Thank you for purchasing this template. 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. Thanks so much!


Microflat built with Bootstrap 3. Sleek, intuitive, and powerful mobile-first front-end framework.



1. Getting Started

1.1 Included Files

After downloading the theme package open the folder named “Pinto Package (Version)” and un-zip the folder, if it is not already so. Inside the package you will find the following files:

  • Help
  • Licensing
  • Template
    • index file
    • image folder
    • font icons folder
    • css folder
    • javascript folder

1.2 Edit & Upload

Edit the file index.html and FTP upload the contents of the folder template to your server.


2. Slider

2.1 Slit Slider

Microflat includes Slit Slider, a slideshow with a twist: when navigating the slides, the current one will be "cut open" into two slices and moved away, revealing the next or previous slide.


3. Image Captions

3.1 Caption Hover Effects

Template includes Caption Hover Effects to create some subtle and modern caption 7 type hover effects.


4. Lightbox Gallery

4.1 Pretty Photo

Microflat includes Pretty Photo a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere.


5. Retina Displays

This template is fully compliant with retina standards to look sharp on any display.

5.1 Retina.js

Each graphical asset has an associated retina image that should be modified when customizing assets in this template. You will find these retina assets in their respective image locations.

This template is retina.js ready - which means that any image will be replaced by a retina image if you’ve uploaded one into the same directory & have appended the “@2x” to the end. Example: logo@2x.png will replace logo.png


6. Files & Sources

6.1 HTML Files

  • Index.html (One Page Template)

6.2 CSS Files

These are the primary CSS files used for general front-end styling. Use these to customize your template even further.

  • Bootstrap.css (Primary Stylesheet)
  • Slit-slider.css (Slider Stylesheet)
  • Slit-slider-custom.css (Custom Slider Stylesheet)
  • Component.css (Gallery Captions Stylesheet)
  • PrettyPhoto.css (Lightbox Gallery Stylesheet)
  • Font-awesome.css (Icon Set Stylesheet)

6.3 Javascript Sources

These are the Javascript files included or modified to work with in this template.

  • Bootstrap.js (Primary Javascript)
  • jquery.slitslider.js (Slider)
  • Slit-slider-custom.js (Custom Slider)
  • Modernizr.custom.js (Gallery Captions)
  • Toucheffects.js (Gallery Captions)
  • Jquery.prettyPhoto.js (Lightbox Gallery)
  • Jquerry.scrollTo.js (Smooth Scroll)
  • Retina.js (Retina Ready)


7. Icons.

Microflat includes the popular Font Awesome - The complete set of 369 Icons in Font Awesome 4.0.3.

7.1 Icon set.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

fa-rub
fa-ruble (alias)
fa-rouble (alias)
fa-pagelines
fa-stack-exchange
fa-arrow-circle-o-right
fa-arrow-circle-o-left
fa-caret-square-o-left
fa-toggle-left (alias)
fa-dot-circle-o
fa-wheelchair
fa-vimeo-square
fa-try
fa-turkish-lira (alias)
fa-plus-square-o
fa-adjust
fa-anchor
fa-archive
fa-arrows
fa-arrows-h
fa-arrows-v
fa-asterisk
fa-ban
fa-bar-chart-o
fa-barcode
fa-bars
fa-beer
fa-bell
fa-bell-o
fa-bolt
fa-book
fa-bookmark
fa-bookmark-o
fa-briefcase
fa-bug
fa-building-o
fa-bullhorn
fa-bullseye
fa-calendar
fa-calendar-o
fa-camera
fa-camera-retro
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-certificate
fa-check
fa-check-circle
fa-check-circle-o
fa-check-square
fa-check-square-o
fa-circle
fa-circle-o
fa-clock-o
fa-cloud
fa-cloud-download
fa-cloud-upload
fa-code
fa-code-fork
fa-coffee
fa-cog
fa-cogs
fa-comment
fa-comment-o
fa-comments
fa-comments-o
fa-compass
fa-credit-card
fa-crop
fa-crosshairs
fa-cutlery
fa-dashboard (alias)
fa-desktop
fa-dot-circle-o
fa-download
fa-edit (alias)
fa-ellipsis-h
fa-ellipsis-v
fa-envelope
fa-envelope-o
fa-eraser
fa-exchange
fa-exclamation
fa-exclamation-circle
fa-exclamation-triangle
fa-external-link
fa-external-link-square
fa-eye
fa-eye-slash
fa-female
fa-fighter-jet
fa-film
fa-filter
fa-fire
fa-fire-extinguisher
fa-flag
fa-flag-checkered
fa-flag-o
fa-flash (alias)
fa-flask
fa-folder
fa-folder-o
fa-folder-open
fa-folder-open-o
fa-frown-o
fa-gamepad
fa-gavel
fa-gear (alias)
fa-gears (alias)
fa-gift
fa-glass
fa-globe
fa-group (alias)
fa-hdd-o
fa-headphones
fa-heart
fa-heart-o
fa-home
fa-inbox
fa-info
fa-info-circle
fa-key
fa-keyboard-o
fa-laptop
fa-leaf
fa-legal (alias)
fa-lemon-o
fa-level-down
fa-level-up
fa-lightbulb-o
fa-location-arrow
fa-lock
fa-magic
fa-magnet
fa-mail-forward (alias)
fa-mail-reply (alias)
fa-mail-reply-all
fa-male
fa-map-marker
fa-meh-o
fa-microphone
fa-microphone-slash
fa-minus
fa-minus-circle
fa-minus-square
fa-minus-square-o
fa-mobile
fa-mobile-phone (alias)
fa-money
fa-moon-o
fa-music
fa-pencil
fa-pencil-square
fa-pencil-square-o
fa-phone
fa-phone-square
fa-picture-o
fa-plane
fa-plus
fa-plus-circle
fa-plus-square
fa-plus-square-o
fa-power-off
fa-print
fa-puzzle-piece
fa-qrcode
fa-question
fa-question-circle
fa-quote-left
fa-quote-right
fa-random
fa-refresh
fa-reply
fa-reply-all
fa-retweet
fa-road
fa-rocket
fa-rss
fa-rss-square
fa-search
fa-search-minus
fa-search-plus
fa-share
fa-share-square
fa-share-square-o
fa-shield
fa-shopping-cart
fa-sign-in
fa-sign-out
fa-signal
fa-sitemap
fa-smile-o
fa-sort
fa-sort-alpha-asc
fa-sort-alpha-desc
fa-sort-amount-asc
fa-sort-amount-desc
fa-sort-asc
fa-sort-desc
fa-sort-down (alias)
fa-sort-numeric-asc
fa-sort-numeric-desc
fa-sort-up (alias)
fa-spinner
fa-square
fa-square-o
fa-star
fa-star-half
fa-star-half-empty (alias)
fa-star-half-full (alias)
fa-star-half-o
fa-star-o
fa-subscript
fa-suitcase
fa-sun-o
fa-superscript
fa-tablet
fa-tachometer
fa-tag
fa-tags
fa-tasks
fa-terminal
fa-thumb-tack
fa-thumbs-down
fa-thumbs-o-down
fa-thumbs-o-up
fa-thumbs-up
fa-ticket
fa-times
fa-times-circle
fa-times-circle-o
fa-tint
fa-toggle-down (alias)
fa-toggle-left (alias)
fa-toggle-right (alias)
fa-toggle-up (alias)
fa-trash-o
fa-trophy
fa-truck
fa-umbrella
fa-unlock
fa-unlock-alt
fa-unsorted (alias)
fa-upload
fa-user
fa-users
fa-video-camera
fa-volume-down
fa-volume-off
fa-volume-up
fa-warning (alias)
fa-wheelchair
fa-wrench
fa-check-square
fa-check-square-o
fa-circle
fa-circle-o
fa-dot-circle-o
fa-minus-square
fa-minus-square-o
fa-plus-square
fa-plus-square-o
fa-square
fa-square-o
fa-bitcoin (alias)
fa-btc
fa-cny (alias)
fa-dollar (alias)
fa-eur
fa-euro (alias)
fa-gbp
fa-inr
fa-jpy
fa-krw
fa-money
fa-rmb (alias)
fa-rouble (alias)
fa-rub
fa-ruble (alias)
fa-rupee (alias)
fa-try
fa-turkish-lira (alias)
fa-usd
fa-won (alias)
fa-yen (alias)
fa-align-center
fa-align-justify
fa-align-left
fa-align-right
fa-bold
fa-chain (alias)
fa-chain-broken
fa-clipboard
fa-columns
fa-copy (alias)
fa-cut (alias)
fa-dedent (alias)
fa-eraser
fa-file
fa-file-o
fa-file-text
fa-file-text-o
fa-files-o
fa-floppy-o
fa-font
fa-indent
fa-italic
fa-link
fa-list
fa-list-alt
fa-list-ol
fa-list-ul
fa-outdent
fa-paperclip
fa-paste (alias)
fa-repeat
fa-rotate-left (alias)
fa-rotate-right (alias)
fa-save (alias)
fa-scissors
fa-strikethrough
fa-table
fa-text-height
fa-text-width
fa-th
fa-th-large
fa-th-list
fa-underline
fa-undo
fa-unlink (alias)
fa-angle-double-down
fa-angle-double-left
fa-angle-double-right
fa-angle-double-up
fa-angle-down
fa-angle-left
fa-angle-right
fa-angle-up
fa-arrow-circle-down
fa-arrow-circle-left
fa-arrow-circle-o-down
fa-arrow-circle-o-left
fa-arrow-circle-o-right
fa-arrow-circle-o-up
fa-arrow-circle-right
fa-arrow-circle-up
fa-arrow-down
fa-arrow-left
fa-arrow-right
fa-arrow-up
fa-arrows
fa-arrows-alt
fa-arrows-h
fa-arrows-v
fa-caret-down
fa-caret-left
fa-caret-right
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-caret-up
fa-chevron-circle-down
fa-chevron-circle-left
fa-chevron-circle-right
fa-chevron-circle-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-chevron-up
fa-hand-o-down
fa-hand-o-left
fa-hand-o-right
fa-hand-o-up
fa-long-arrow-down
fa-long-arrow-left
fa-long-arrow-right
fa-long-arrow-up
fa-toggle-down (alias)
fa-toggle-left (alias)
fa-toggle-right (alias)
fa-toggle-up (alias)
fa-arrows-alt
fa-backward
fa-compress
fa-eject
fa-expand
fa-fast-backward
fa-fast-forward
fa-forward
fa-pause
fa-play
fa-play-circle
fa-play-circle-o
fa-step-backward
fa-step-forward
fa-stop
fa-youtube-play
  • All brand Icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
fa-adn
fa-android
fa-apple
fa-bitbucket
fa-bitbucket-square
fa-bitcoin (alias)
fa-btc
fa-css3
fa-dribbble
fa-dropbox
fa-facebook
fa-facebook-square
fa-flickr
fa-foursquare
fa-github
fa-github-alt
fa-github-square
fa-gittip
fa-google-plus
fa-google-plus-square
fa-html5
fa-instagram
fa-linkedin
fa-linkedin-square
fa-linux
fa-maxcdn
fa-pagelines
fa-pinterest
fa-pinterest-square
fa-renren
fa-skype
fa-stack-exchange
fa-stack-overflow
fa-trello
fa-tumblr
fa-tumblr-square
fa-twitter
fa-twitter-square
fa-vimeo-square
fa-vk
fa-weibo
fa-windows
fa-xing
fa-xing-square
fa-youtube
fa-youtube-play
fa-youtube-square
fa-ambulance
fa-h-square
fa-hospital-o
fa-medkit
fa-plus-square
fa-stethoscope
fa-user-md
fa-wheelchair




8. Elements


Microflat built with Bootstrap 3. Sleek, intuitive, and powerful mobile-first front-end framework.

8.1 Navbar


8.2 Bottoms


8.3 Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

· Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

· Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

· Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

8.4 Tables

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content

8.5 Forms

Legend
A longer block of help text that breaks onto a new line and may extend beyond one line.

$

8.6 Navs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

· Pagination


8.7 Indicators

· Alerts

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

· Labels

Default Primary Success Warning Danger Info

8.8 Progress bars

· Basic

· Contextual alternatives

· Striped

· Animated

· Stacked


8.9 Containers

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

· List groups

· Panels

Basic panel
Panel heading
Panel content
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

· Wells

Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!