Documentation
Download Now

Overview

Everthing you need to know to get up and running with Looper.

Intro

Hi there! Thank you for using Looper Theme! This theme build on top of latest Bootstrap 4 to help you speed up your project. Rather than focusing on pixels, you can focus on application logic. This theme has been lovingly and carefully crafted by Me—Beni Arisandi with focus on simplicity, user experience, interactions and flows. Since this theme is based on Bootstrap, you can does everything that Bootstrap itself does. There are also a lot of custom and new components with usage example on Demo Pages, and easy to use build tools.

To get better result, please familiarize your self with following:

  • If you are not familiar with Bootstrap. Please get an overview of Official Bootstrap Documentations including markup, styles, components, features and everthing that bootstrap does.
  • Explore the Looper Demo page (especially on Interfaces section) to familiarize your self with existing components and plugins which you can incorporate into your designs.
  • Review the Looper Pages section, each pages provides reusable class and components. You can minimalize your custom styles by understanding the flows.
  • Considering about limitation; Since this theme based on Bootstrap please see Browsers and Devices that are supported by Bootstrap.

For more explanation about using Looper, theming and custom build, read through the docs. Please let me know about your pain-point with Looper and how we can make it better for you.

For me, writing in english is 10x more harder than writing in code. I apologize for any typo and grammar, both on Demo Pages and this Documentation.

Contents

Once downloaded, unzip the compressed folder. On top level directory structure of Looper Theme, you'll see something like this: 

looper-v1.4.2/
├── dist/
├── src/
├── .babelrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── gulpfile.js
├── package-lock.json
├── package.json
└── README.md

Dist

The dist directory is where all compiled files goes. The easiest way to using this theme is copying the assets folder in this directory to your existing project. This directory also contains the docs folder. See our Gulp tasks for more information about how this directory was created.

Src

The src directory is where all Source Files are located, including demo files, data generator, snippets, assets, and docs.

Quick Start

Be sure you have minimal requirement with the latest version of Looper template. After copying the assets folder in dist directory to your existing project, then following steps below:

HTML5 doctype

Looper utilizing certain HTML and CSS elements that requires a applications. So make sure that you use it at your project documents. 

<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta tag

Looper is mobile first design, so you should include the responsive viewport meta tag to your <head> 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Stylesheets

All css files that you get are the result of compilation of SCSS files. We have divided it into small pieces which are easy to customized.

Below is required css that you need to include into your project: 

<!-- BEGIN PLUGINS STYLES -->
<!-- plugins styles goes here -->
<!-- END PLUGINS STYLES -->

<!-- BEGIN THEME STYLES -->
<link rel="stylesheet" href="assets/stylesheets/theme.min.css" data-skin="default">
<link rel="stylesheet" href="assets/stylesheets/theme-dark.min.css" data-skin="dark">
<link rel="stylesheet" href="assets/stylesheets/custom.css">
<!-- Disable unused skin immediately -->
<script>
  var skin = localStorage.getItem('skin') || 'default';
  var disabledSkinStylesheet = document.querySelector('link[data-skin]:not([data-skin="'+ skin +'"])');

  // Disable unused skin immediately
  disabledSkinStylesheet.setAttribute('rel', '');
  disabledSkinStylesheet.setAttribute('disabled', true);

  // add loading class to html immediately
  document.querySelector('html').classList.add('loading');
</script>
<!-- END THEME STYLES -->

<!-- BEGIN PAGE LEVEL STYLES -->
<!-- styles for specific page goes here -->
<!-- END PAGE LEVEL STYLES -->

You should put the css files in the order above. You don't need to include bootstrap.min.css as we already have it in theme{-*}.min.css file. If you consider to write your own styles, then custom.scss file is a great place to go. Feel free to remove custom.css from your markup if you don't need it.

Javascript

Below is required JS files that you need to add to your markup when using Looper. 

<!-- BEGIN BASE JS -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/popper.js/umd/popper.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- END BASE JS -->

<!-- BEGIN PLUGINS JS -->
<script src="assets/vendor/stacked-menu/js/stacked-menu.min.js"></script>
<!-- END PLUGINS JS -->

<!-- BEGIN THEME JS -->
<script src="assets/javascript/theme.min.js"></script>
<!-- END THEME JS -->

<!-- BEGIN PAGE LEVEL JS -->
<!-- your js for specific page goes here -->
<!-- END PAGE LEVEL JS -->

Our theme.js is writed in ES2015 class. Looper also provide blank template that you can use to write your own scripts (just duplicate and rename it) or you can use your own style.

Keep in mind that (sometimes) your scripts may not always be executed after the theme is completely ready, you might need to observe the `theme:init` event to make sure your scripts are executed after the theme is ready. 

$(document).on('theme:init', () => {
  // write your script here
})

Starter template

Put it all together and your pages should look like this: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- BEGIN PLUGINS STYLES -->
    <!-- plugins styles goes here -->
    <!-- END PLUGINS STYLES -->

    <!-- BEGIN THEME STYLES -->
    <link rel="stylesheet" href="assets/stylesheets/theme.min.css" data-skin="default">
    <link rel="stylesheet" href="assets/stylesheets/theme-dark.min.css" data-skin="dark">
    <link rel="stylesheet" href="assets/stylesheets/custom.css">
    <!-- Disable unused skin immediately -->
    <script>
      var skin = localStorage.getItem('skin') || 'default';
      var disabledSkinStylesheet = document.querySelector('link[data-skin]:not([data-skin="'+ skin +'"])');

      // Disable unused skin immediately
      disabledSkinStylesheet.setAttribute('rel', '');
      disabledSkinStylesheet.setAttribute('disabled', true);

      // add loading class to html immediately
      document.querySelector('html').classList.add('loading');
    </script>
    <!-- END THEME STYLES -->

    <!-- BEGIN PAGE LEVEL STYLES -->
    <!-- styles for specific page goes here -->
    <!-- END PAGE LEVEL STYLES -->

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="app">
      Hello, world!
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- BEGIN BASE JS -->
    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/popper.js/umd/popper.min.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    <!-- END BASE JS -->

    <!-- BEGIN PLUGINS JS -->
    <script src="assets/vendor/stacked-menu/js/stacked-menu.min.js"></script>
    <!-- END PLUGINS JS -->

    <!-- BEGIN THEME JS -->
    <script src="assets/javascript/theme.min.js"></script>
    <!-- END THEME JS -->

    <!-- BEGIN PAGE LEVEL JS -->
    <!-- your js for specific page goes here -->
    <!-- END PAGE LEVEL JS -->
  </body>
</html>