SCSS
Just changing a SCSS variable you can get your design. Take a look SCSS file structure.
SCSS file structure
src/
└── assets/scss/
├── base/
├── framework/
└── styles.scss
Variables
You assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they're one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.
You can find template variables in _config.scss file in scss/base/. Take a look template variables below:
// Import theme color
@import "../../../vendors/bootstrap/colors";
// Import theme typo
@import "../../../vendors/bootstrap/typo";
// Grid breakpoints for responsive
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
// Transition
$transition-short: .2s all ease;
$transition-medium: .4s all ease;
$transition-long: .6s all ease;
// Icon size
$icon-size-base: 1.25rem;
$icon-size-base-lg: 2rem;
// Image url for background image
$image-url: '../images/';
// This is primary color of this theme
$theme-primary-color: $red;
// Theme loading variables
$loader-zIndex: 1040;
$loader-width: 3rem;
$loader-border-width: .325rem;
// Header variables
$header-padding-top: 2rem;
$header-padding-bottom: 1rem;
$header-box-shadow: 0 1px .75rem .125rem rgba($black, .1);
$header-link-color: $gray-900;
// Navigation variables
$nav-item-font-size: .875rem;
$nav-item-padding-x: 1rem;
$nav-item-padding-x-sm: 2rem;
// Nav item link variables
$nav-item-link-padding-y: 1rem;
$nav-item-link-font-weight: 600;
// Nav submenu variables
$nav-sub-menu-box-shadow: 0 1px .5rem .125rem rgba($black, .05);
$nav-sub-menu-padding-y: .5rem;
$nav-sub-menu-border-radius: .25rem;
$nav-sub-menu-link-padding: .5rem 2rem;
// Has submenu link padding
$nav-has-sub-link-padding-x: 1rem;
// Submenu indicator variables
$sub-menu-indicator-padding: 3px;
$sub-menu-indicator-space-top: $nav-item-link-padding-y + .325rem;
$under-header-margin-top: 3.5rem;
$under-header-margin-top-sm: 3.625rem;
// Hamburger variables
$hamburger-width: 1.5rem;
$hamburger-height: .875rem;
$hamburger-margin-x: 1rem;
$hamburger-margin-x-sm: 2.5rem;
$hamburger-line-height: 1px;
// Hero backgrounds map
$hero-background: (
1: $image-url + 'backgrounds/hero-v1',
2: $image-url + 'backgrounds/hero-v2',
about: $image-url + 'backgrounds/about',
contact: $image-url + 'backgrounds/contact',
coming: $image-url + 'backgrounds/coming',
faqs: $image-url + 'backgrounds/faqs',
pricing: $image-url + 'backgrounds/pricing',
);
// Hero background height & width
$hero-width: 100%;
$hero-height: 100vh;
$hero-padding-top: 14rem;
$hero-padding-bottom: 8rem;
$hero-vector-width: 64rem;
// Banner height
$inner-banner-height-lg: 45rem;
// Section variables
$section-spacer-y: 6rem;
$intro-section-title-font-size-sm: 4rem;
// Section title variables
$section-title-font-size-sm: 3rem;
$section-title-line-width: 2rem;
$section-title-line-height: .25rem;
$section-title-padding-x: $section-title-line-width + 1rem;
$section-title-line-spacing-y: 1.25rem;
$section-title-line-spacing-y-sm: 1.75rem;
$section-title-margin-y: 3rem;
// Search form variables
$search-wrapper-border-radius: .5rem;
$search-wrapper-box-shadow: 0 1px .75rem .125rem rgba($black, .1);
$search-input-spacer-y: 1rem;
$search-input-spacer-x: 1.5rem;
$search-wrapper-padding: 1rem 1.5rem;
$search-button-width-sm: 10rem;
// Category title padding
$category-title-padding: 3rem 1rem 1rem;
$category-icon-width: 3rem;
// Dest card variables
$dest-font-size: .825rem;
$dest-title-padding: 1rem 1rem 3rem;
$dest-title-font-weight: 600;
$dest-content-padding: 3rem 1rem 1rem;
$dest-content-title-margin-y: .25rem;
// Blog card variables
$blog-font-size: .875rem;
$blog-title-font-weight: 700;
$blog-title-color: $headings-color;
// Testimonials variables
$test-stars: 1rem;
$test-stars-margin-y: .5rem;
$test-name-font-weight: 600;
$test-name-margin-y: .25rem;
$tech-designation-font-size: .875rem;
// App banner padding
$app-banner-padding-y: $section-spacer-y;
$app-hero-width: 600px;
// Footer variables
$footer-heading-font-weight: 700;
// Footer link variables
$footer-link-font-size: .875rem;
$footer-link-font-weight: 500;
$footer-link-margin-y: .5rem;
// Last footer variables
$last-footer-margin-y: 4rem;
$last-footer-padding-y: 2rem;
$last-footer-font-size: .75rem;
$last-footer-font-weight: 600;
// Social icon list variables
$social-item-margin-x: 1rem;
$social-font-size: 1.5rem;
// Sidebar variables
$sidebar-width: 16rem;
$sidebar-zIndex: 1039;
$sidebar-padding-y: 2rem;
$sidebar-padding-x: 2rem;
$sidebar-box-shadow: 0 1px .75rem .125rem rgba($black, .1);
$sidebar-header-padding: 1.125rem $sidebar-padding-x 2.5rem;
// Sidebar nav variables
$sidebar-nav-padding: 0 $sidebar-padding-x;
$sidebar-nav-item-padding-y: .5rem;
$sidebar-nav-item-font-weight: 500;
// Close sidebar variables
$close-sidebar-width: 1.5rem;
$close-sidebar-border-radius: .25rem;
$close-sidebar-font-size: 1.25rem;
// Nac sub menu variables
$nav-sub-menu-font-size: .875rem;
$nav-sub-menu-margin-x: 1.5rem;
$nav-sub-menu-indicator-width: .625rem;
// Overlay z index
$overlay-zIndex: 1038;
// Auth modal variables
$auth-modal-width: 440px;
$auth-modal-header-font-size: .875rem;
$auth-modal-foot-font-size: .875rem;
$auth-modal-foot-btn-margin: .5rem;
// Link variables
$link-font-size: .75rem;
$link-font-weight: 600;
// Line tabs variables
$line-tabs-nav-link-padding: 1rem 2rem;
$line-tabs-nav-link-font-size: .875rem;
$line-tabs-nav-link-font-weight: 500;
$line-tabs-nav-link-color: $gray-800;
// Work steps
$step-padding-y: 6rem;
$step-number-font-size: 1.25rem;
$step-number-font-weight: 600;
$step-number-width: 2.5rem;
$step-number-border-width: .125rem;
$step-content-padding-x: 1rem;
$step-content-padding-x-xl: 1.5rem;
// Promo video padding
$promo-padding-y: 6rem;
$promo-padding-y-lg: 10rem;
// Contact map height
$map-height-lg: 24rem;
$map-height-md: 30rem;
$map-height: 16rem;
$map-margin-top: 4rem;
// Pricing variables
$price-card-padding: 1.5rem 2rem;
$price-card-border-radius: .5rem;
$price-font-size: 2rem;
$price-card-header-margin-bottom: 1rem;
$price-text-margin-bottom: 1.5rem;
$price-text-font-size: .875rem;
$price-text-item-margin-y: .5rem;
// Coming soon timer variables
$coming-soon-timer-padding-x: 1.5rem;
$coming-soon-timer-md-padding-x: 1rem;
$coming-soon-timer-xs-padding-x: .5rem;
$coming-soon-timer-font-size: 2.5rem;
$coming-soon-timer-font-weight: 700;
$coming-soon-timer-margin-y: .25rem;
// Countdown margin
$countdown-margin-y: 2rem;
// Blog
$blog-sidebar-padding-x-xl: 6rem;
$blog-sidebar-padding-x-lg: 2rem;
$blog-sidebar-margin-top: 6rem;
$recent-post-font-size: .875rem;
$recent-post-font-weight: 600;
$recent-post-item-margin-y: 1rem;
$author-card-padding-y: 1.5rem;
$author-card-padding-x: 2rem;
$blog-paging-link-padding: 1rem;
$blog-paging-text-padding-x: 1rem;
$blog-paging-sub-title-font-size: .875rem;
$blog-paging-title-font-weight: 600;
$blog-paging-icon-font-size: 1.5rem;
// Comments
$comments-margin-top: 4rem;
$comment-head-font-weight: 600;
$comment-head-margin-bottom: 2rem;
$comment-para-margin-bottom: 1rem;
$comment-margin-top: 2rem;
$comment-media-body-padding-x: 1rem;
$commenter-name-font-size: .875rem;
$commenter-name-margin-bottom: .5rem;
// Listing
$listing-header-padding-bottom: 1rem;
$listing-header-margin-bottom: 2rem;
$listing-options-margin-top: 1.5rem;
$listing-options-font-size: 1.5rem;
$listing-options-item-margin-x: 1.5rem;
$listing-tag-font-size: .75rem;
$listing-tag-font-weight: 600;
$listing-tag-padding: .325rem .75rem;
$listing-tag-border-radius: 1rem;
$listing-content-padding: 1.5rem;
$listing-rating-width: 3rem;
$listing-rating-padding-y: .5rem;
$listing-rating-border-radius: .25rem;
$listing-rating-number-font-size: 1.25rem;
$listing-rating-number-margin-bottom: .5rem;
$listing-rating-font-size: 1.325rem;
$listing-desc-padding-x: 1rem;
$listing-desc-font-size: .875rem;
$listing-title-font-size: 1rem;
$listing-title-font-weight: 600;
$listing-title-margin-bottom: .5rem;
$listing-sidebar-margin-top: 6rem;
$listing-sidebar-padding-x-xl: 4rem;
$listing-sidebar-padding-x-lg: 2rem;
$listing-container-width-md: 45%;
$listing-container-width-lg: 50%;
$listing-container-width-xl: 55%;
$listing-container-padding: 2rem 1rem;
$listing-container-padding-md: 3rem 2rem;
$listing-container-box-shadow: 0 1px .75rem .125rem rgba($black, .1);
$listing-map-container-box-shadow: 0 .625rem 2rem 0 rgba($black, .2);
$listing-map-content: 1rem;
$listing-map-title-font-size: .875rem;
$listing-map-desc-font-size: .75rem;
/*==========================================
Google map variables
*==========================================*/
// Map zoom controls
$zoom-controls-width: 2rem;
$zoom-controls-font-size: 1.5rem;
$zoom-controls-margin-y: .25rem;
$zoom-controls-box-shadow: 0 1px .75rem .125rem rgba($black, .1);
// Map infobox
$infoBox-close-font-size: 1.5rem;
$infoBox-close-text-shadow: 0 1px 1rem rgba(0, 0, 0, .5);
// Map marker
$marker-icon-width: 1.875rem;
$marker-icon-font-size: 1.25rem;
$marker-shadow-width: 1rem;
// Map cluster
$cluster-font-size: 1rem;
$cluster-font-weight: 600;
// Verified width
$verified-width: 1rem;
// Images list
$images-list-container-font-size: .875rem;
$images-list-container-padding: $section-spacer-y 0 2rem;
$images-list-container-padding-bottom: 3rem;
$images-list-address-font-size: 1rem;
// Listing link
$listing-link-item-margin-top: 1rem;
$listing-link-font-weight: 600;
$listing-link-padding-x: 1.5rem;
// Amenities
$amenities-font-size: .875rem;
$amenities-font-weight: 600;
// Amenities item
$amenities-item-padding-y: .5rem;
$amenities-item-padding-x: 1rem;
$amenities-item-indicator-width: .5rem;
$amenities-item-indicator-border-radius: .125rem;
$amenities-item-indicator-space-top: $amenities-item-padding-y + .425rem;
$amenities-item-indicator-space-left: $amenities-item-indicator-width * 2;
// Price list
$price-list-item-padding-y: .75rem;
$price-list-title-margin-bottom: .25rem;
$price-list-title-font-weight: 600;
// Dashboard
$dashboard-padding-x: 2rem;
$dashboard-content-margin-top: 4rem;
// Dashboard sidebar link
$dashboard-link-sidebar-item-margin-top: .25rem;
$dashboard-link-sidebar-link: .5rem 1.5rem;
$dashboard-link-sidebar-link-icon-size: 1.5rem;
$dashboard-link-sidebar-link-border-radius: .25rem;
$dashboard-link-sidebar-link-child-padding-x: 1rem;
// Dashboard card
$dashboard-card-margin-bottom: 30px;
$dashboard-card-icon-size: 7rem;
// Invoice
$invoice-list-font-size: .875rem;
$invoice-list-data-item-padding-x: .5rem;
$invoice-list-item-padding-y: 1rem;
$invoice-width: 50rem;
$invoice-font-size: .875rem;
$invoice-border-radius: .25rem;
$invoice-padding-y: 1rem;
$invoice-padding-x: 1.5rem;
$invoice-padding-y-sm: 2.5rem;
$invoice-padding-x-sm: 3rem;
$invoice-head-padding: 2rem 0 3rem;
$invoice-body-padding: 5rem 0 3rem;
$invoice-foot-padding: 2rem 0;
$invoice-address-title-font-weight: 600;
$repeater-list-padding-top: 2.5rem;
/*==========================================
Components variables
*==========================================*/
// Button variables
$btn-pill-border-radius: 10rem;
$btn-icon-text-padding-x: .75rem;
$btn-icon-padding-y: .565rem;
$btn-inline-margin-x: .5rem;
// Icon button variables
$btn-icon-size: 1.25rem;
$btn-icon-width: 2.5rem;
$btn-icon-size-lg: 1.5rem;
$btn-icon-width-lg: 3rem;
$btn-icon-size-sm: .75rem;
$btn-icon-width-sm: 1.875rem;
// Social button map
$btn-social: (
facebook: #1877f2,
twitter: #1da1f2,
youtube: #ff0000,
instagram: #c32aa3,
pinterest: #bd081c,
linkedin: #007bb5,
google: #ea4335,
tumblr: #35465d,
rebbit: #ff4500,
spotify: #1ed760,
apple: #000,
vimeo: #1ab7ea,
skype: #00aff0,
dribbble: #ea4c89
);
// Form control label variables
$form-control-label-font-weight: 600;
$form-control-label-font-size: .875rem;
$form-control-label-margin-y: .5rem;
// Form control icon variables
$form-control-icon-width: 2.5rem;
$form-control-icon-width-lg: 2.5rem;
$form-control-icon-width-sm: 2.5rem;
$form-control-icon-font-size: 1.5rem;
$form-control-icon-font-size-lg: 2rem;
$form-control-icon-font-size-sm: 1rem;
$form-control-padding-x-icon: $form-control-icon-width;
$form-control-padding-x-icon-lg: $form-control-icon-width-lg;
$form-control-padding-x-icon-sm: $form-control-icon-width-sm;
$custom-file-font-size: .875rem;
// Owl carousel dot variables
$owl-carousel-dots-margin-y: 1.5rem;
$owl-carousel-dot-margin: .25rem;
$owl-carousel-dot-width: .5rem;
$owl-carousel-dot-border-radius: 1rem;
$owl-carousel-dot-active-width: 2rem;
// Owl carousel nav variables
$owl-nav-font-size: 2rem;
$owl-nav-padding-x: 2rem;
// Bunch of list margin bottom
$list-bunch-item-margin-bottom: 2rem;
$list-bunch-item-margin-bottom-sm: 10px;
$image-list-item-width: 7rem;
$image-list-item-spacing: .5rem;
// Avatar variables
$avatar-border-radius: 10rem;
$avatar-size: (
xs: 1.5rem,
sm: 2rem,
md: 2.5rem,
lg: 4rem,
xl: 5.5rem
);
$avatar-name-font-size: .875rem;
$avatar-name-font-weight: 600;
// Star variables
$star-font-size: 1.5rem;
$star-color: $yellow;
// Checkbox & radio variables
$checkbox-radio-width: 1rem;
$checkbox-radio-font-size: .875rem;
$checkbox-radio-font-weight: 500;
$checkbox-radio-border-width: .125rem;
$checkbox-radio-default-color: $gray-700;
// Checkbox variables
$checkbox-border-radius: .125rem;
$checkbox-tik-padding: 1px 3px;
// Dropdown
$dropdown-box-shadow: 0 1px .75rem .125rem rgba($black, .1);
// Collapses
$collapse-padding-y: 1.5rem;
$collapse-padding-x: 2rem;
$collapse-header-title-font-weight: 600;
$collapse-header-title-color: $gray-900;
// Pagination
$pagination-margin-x: 1rem;
$pagination-font-size: .875rem;
$pagination-font-weight: 600;
$pagination-icon-size: 1rem;
// Blockquote
$blockquote-padding-y: 1.5rem;
$blockquote-padding-x: 2rem;
$blockquote-border-width: .25rem;
// noUi
$noUi-value-top: 1rem;
$noUi-vertical-height: 10rem;
$noUi-pips-horizontal-height: 3.25rem;
$noUi-horizontal-height: .25rem;
$noUi-pips-horizontal-range-height: $noUi-pips-horizontal-height + 2rem;
// noUi handle variables
$noUi-handle-height: 1.25rem;
$noUi-handle-box-shadow: 0 1px .325rem .125rem rgba($gray-900, .05);
$noUi-handle-offset: ($noUi-handle-height - $noUi-horizontal-height) * .5;
// noUi tooltip variables
$noUi-tooltip: .25rem .5rem;
$noUi-range-tooltip-padding-y: 1.5rem;
// Datetimepicker
$datetimepicker-font-size: .875rem;
$datetimepicker-th-font-weight: 600;
$datetimepicker-padding-y: .75rem;
$datetimepicker-padding-x: .5rem;
$datetimepicker-day-width: 2rem;
$datetimepicker-th-height: 1.5rem;
$datetimepicker-th-button-height: 2rem;
// Datetimepicker today
$datetimepicker-today-indicator-width: .5rem;
$datetimepicker-today-indicator-box-shadow: inset 5px 5px 8px 0px rgba($black, 0.1);;
$datetimepicker-today-box-shadow: .25rem .5rem 1rem 0px rgba($black, .1);
$datetimepicker-today-table-spacing-y: 1rem;
// Datetimepicker button
$datetimepicker-button-padding: .25rem .5rem;
$datetimepicker-button-font-size: .75rem;
$datetimepicker-button-font-weight: 600;
$datetimepicker-hour-height: 2rem;
$picker-switch-height: 2rem;
// Dropzone
$dropzone-icon-size: 2rem;
$dropzone-icon-margin-bottom: .5rem;
$dropzone-font-weight: 600;
$dropzone-border-radius: .25rem;
$dropzone-height: 10rem;
$dropzone-preview-margin: .5rem;
$dropzone-preview-image-border-radius: 1rem;
// Switch
$switch-width: 3.5rem;
$switch-height: 2rem;
$switch-slider-spacing: .5rem;
$switch-slider-width: $switch-height - $switch-slider-spacing;
When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. For that please refer Gulp build
Bootstrap
Do you have any Bootstrap related change you can implement it by changing in the scss files of the Bootstrap Vendor. You are find all Bootstrap scss files under vendors/bootstrap.
When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. For that please refer Gulp build
Javascript
For your use we are wrote some Javascript classes code in this template to make your customization easier.
| Class name | Example | Description |
|---|---|---|
.retina |
<img src="..." class="retina" /> |
Change an image in retina devices. |
.target |
<a href="#header" class="target">...</a> |
Scroll to the element. |
.date-time-picker |
<input type="text" class="date-time-picker" /> |
Use for a date time picker widget. |
.time-picker |
<input type="text" class="time-picker" /> |
Use for a time picker widget. |
.rating |
<div class="rating"></div> |
Star rating selection. |