Letstart is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is 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 Wrap Bootstrap support ticket.
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/
assets ├──
├── dist/
├── css
├── js
├── fonts/
├── images/
├── vendors/
├── scss/
HTML files
gulpfile.js
package.json
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
gem install sassgem install compass-corecompass watch to compile scss filesCompilation of scss files using install Gulp
npm install -gulpnpm install -gulp-sassnpm install -gulp-concatnpm install -gulp-watchnpm install -gulp-contact-cssSCSS site is a great place to get information on installing SCSS if you need more information.
Some plugin difficult to use don't worry we are giving the example with good text.
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
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);
});
AOS library used for the animation. Element will animate on document or window scroll.
How to use it:
Add following things in your <HTML>
<link rel="stylesheet" href="/path/aos.min.css" >
<script src="/path/aos.min.css"> <script>
Add AOS attributes in div element<div class="col-md-4 mb-30" data-aos="zoom-in" data-aos-duration="500">
Add plugin call in script tag
AOS.init({
offset: 150,
duration: 400,
easing: 'linear',
delay: 0,
once: true,
disable: 'mobile'
});
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');
}
});
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
}
},
});
If you have any questions or need help, Feel free to generate ticket on Wrap Bootstrap or gagan.uideveloper@gmail.com