Documentation | Letstart | Corporate Single Page Website Template

Introduction

Letstart is a responsive HTML template that is based on the CSS framework Bootstrap 4 built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Letstart and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme email at template Template Monster support ticket.

Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

Letstart/

app ├──

assets ├──

├── dist/

```
├── css
```
```
├── js
```

```
├── fonts/
```
```
├── images/
```
```
├── vendors/
```
```
├── scss/
```

```
HTML files
```

```
Documentation
```
```
gulpfile.js
```
```
package.json
```

Installation

You need to install ruby and compass as Dependencies for this project if you want to customize it. To do this, you must have Node in your computer.

Compilation of scss files using GULP and RUBY

Install ruby on rails here install ruby on rails
Install bellow dependencies using ruby command line
gem install sass
gem install compass-core
compass watch to compile scss files

Compilation of scss files using install Gulp

Compilation of scss files using gulp
Install node.js here - Install Node
Install bellow dependencies using node command line
npm install -gulp
npm install -gulp-sass
npm install -gulp-concat
npm install -gulp-watch
npm install -gulp-contact-css

SCSS site is a great place to get information on installing SCSS if you need more information.

How to use library functions

Some plugin difficult to use don't worry we are giving the example with good text.

How to use GULP

GULP is a task runner for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

How to use it:

Install all the dependencies that is required for the project like

npm install -gulp
Make gulpfile.js
Define task in gulpfile.js


                gulp.task('watch', ['browserSync', 'sass'], function (){
                    gulp.watch('app/assets/scss/**/*.scss', ['sass']); 
                    gulp.watch('app/*.html', browserSync.reload); 
                    gulp.watch('app/assets/dist/js/**/*.js', browserSync.reload); 
                });

How to use jQuery validation library

jQuery Validation is a jQuery plugin that makes simple clientside form validation easy, whilst still offering plenty of customization options.

How to use it:

Add following things in your <HTML>

<script src="/path/jquery.validate.min.js"> <script> <script src="/path/additional-methods.min.js"> <script>

Add plugin call in script tag


                $(formID).validate({
                    focusInvalid: false,
                    rules: {
                        'validation-email': {
                            required: true,
                            email: true
                        },
                        'validation-name': {
                            required: true,
                        },
                        'validation-subject': {
                            required: true,
                        },
                        'validation-message': {
                            required: true,
                        },
                        'validation-required': {
                            required: true
                        }
                    },

                    // Errors
                    errorPlacement: function errorPlacement(error, element) {
                        var $parent = $(element).parents('.form-group');

                        // Do not duplicate errors
                        if ($parent.find('.jquery-validation-error').length) { return; }

                        $parent.append(
                            error.addClass('jquery-validation-error small form-text invalid-feedback')
                        );
                    },
                    highlight: function (element) {
                        var $el = $(element);
                        var $parent = $el.parents('.form-check');
                        if ($parent.length > 0) {
                            $parent.addClass('is-invalid');
                        }
                        else {
                            $el.addClass('is-invalid');
                        }
                        // Select2 and Tagsinput
                        ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') {
                            $el.parent().addClass('is-invalid');
                        }
                    },
                    unhighlight: function (element) {
                        $(element).parents('.form-check').removeClass('is-invalid');
                    }
                });

How to use owl carousel library

Owl Carousel is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

How to use it:

Add following things in your <HTML>

<link rel="stylesheet" href="/path/owl.carousel.min.css" >

<script src="/path/owl.carousel.min.js"> <script>

Add plugin call in script tag


                $(classname).owlCarousel({
                    items: 3,
                    dots: false,
                    autoplay: true,
                    nav: false,
                    smartSpeed: 800,
                    margin: 30,
                    loop: true,
                    responsive: {
                    // breakpoint from 0 up
                        0: {
                            items: 1
                        },
                        // breakpoint from 480 up
                        480: {
                            items: 1
                        },
                        // breakpoint from 768 up
                        768: {
                            items: 2
                        },
                        1100:{
                            items: 3
                        }
                    },
                });

How to use photoswipe library

Photoswipe is a photo slider library.

PhotoSwipe requires predefined image dimensions

How to use it:

Add following things in your <HTML>

<link rel="stylesheet" href="/path/photoswipe.min.css" >

<script src="/path/photoswipe.min.js"> <script>

Add plugin call in script tag


                var items = [],
                $pswp = $('.pswp')[0],
                $folioItems = $('.filtr-item');

                // get items
                $folioItems.each(function (i) {

                    var $folio = $(this),
                        $thumbLink = $folio.find('.grid-image > a'),
                        $title = $folio.find('.grid-title'),
                        $caption = $folio.find('.pswp-caption'),
                        $titleText = '<h4>' + $.trim($title.html()) + '</h4>',
                        $captionText = $.trim($caption.html()),
                        $href = $thumbLink.attr('href'),
                        // $size = $thumbLink.data('size').split('x'),
                        $width = 1140,
                        $height = 700;

                    var item = {
                        src: $href,
                        w: $width,
                        h: $height
                    }

                    if ($caption.length > 0) {
                        item.title = $.trim($titleText + $captionText);
                    }

                    items.push(item);
                });

                $('.filtr-item .grid').on('click', function (e) {
                    e.preventDefault();
                    var options = {
                        index: parseInt($(this).parent().attr("data-index")) - 1,
                        showHideOpacity: true
                    }
                    // initialize PhotoSwipe
                    var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
                    lightBox.init();
                });

How to use shuffle.jS library

Shuffle JS is masonry with filteration of data. You can categorize, sort, and filter a responsive grid of items.

How to use it:

Add following things in your <HTML>

<script src="/path/suffle.min.js"> <script>

Add plugin call in script tag

var Shuffle = window.Shuffle;
                var shuffleInstance = new Shuffle(document.querySelector('.filtr-container'), {
                    itemSelector: '.filtr-item',
                    sizer: '.work-nav',
                });

                $(".work-nav .control").on("click", function () {
                    shuffleInstance.filter($(this).attr('data-filter'));
                    $('.work-nav .control').removeClass('filtr-active');
                    $(this).addClass('filtr-active');
                });

How to use Counter js library

Counter library used for the make counter animation.

How to use it:

Add following things in your <HTML>

<script src="/path/waypoints.min.js"> <script>

<script src="/path/jquery.counterup.min.js"> <script>

Add plugin call in script tag


                                        if($('.counter').length){
                                            $('.counter').counterUp({
                                                delay: 10
                                            });
                                        }

How to use ScrollIt js library

ScrollIt library used easy to make scrolling pages.

How to use it:

Add following things in your <HTML>

<script src="/path/scrollIt,min.js"> <script>

Add plugin call in script tag


                                $.scrollIt({
                                    upKey: 38,             
                                    downKey: 40,           
                                    easing: 'linear',      
                                    scrollTime: 600,       
                                    activeClass: 'active', 
                                    onPageChange: null,    
                                    topOffset: 0           
                                });

04 Plugins / Images

Simple Line Icon
Font Awesome
Bootstrap
Animate CSS
HTML5SHIV
Respond JS
jQuery
jQuery Validation
Owl Carousel
Photoswipe
Shuffle JS
ScrollIt JS
Moment JS
Waypoints JS
Counter JS
Pixabay for Image

05 Support

If you have any questions or need help, Feel free to generate ticket on Template Monster. Reply times can be up to 24 / 72 hours Monday to Sunday. Please be patient when posting an issue as i work (IST+00:00) time zone.