Startbox

Getting Started

This is an HTML template. To get started you need only Browser to run HTML files. Better upload files to the web server and run the site there.

To customize the template you can edit CSS and HTML files. Also if you are a developer, there are available source files SCSS, JS and HTML (Pug/Jade). All used plugins added from npm.

For each page available blank CSS file for your customizations. See it here – assets/css/custom.css.

Files Structure

• /startbox/dist – main template folder with all files to getting started:
• *.html – all html files;
• assets/img/ – all images used in template (minified);
• assets/css/ – main template css files;
• assets/js/ – main template js files;
• assets/vendors/ – 3rd-party plugins;
• /startbox/src – source files for developers:
• assets/img/ – all images used in template (not minified);
• assets/scss/ – SCSS source files;
• assets/js/ – JS source files ;
• assets/vendors/ – 3rd-party plugins;
• docs – docs source files (Pug/Jade);
• *.pug, html/, mixins/, partials/, template-parts/ – PUG source files (Pug/Jade);
• /startbox/* – system files for development;

Development

Startbox template is developer-friendly and contains source files + gulp tasks.

Make sure, that we will not help you with any troubles that you faced with source builds, so if you don’t have any experience with npm and gulp, please first learn more about these tools. These sources only for developers.

Requirements

1. Node.js and npm – https://nodejs.org/en/

Getting Started

• Unzip downloaded template and open /startbox/ folder
• Install all node packages: npm install
• Run gulp development
• Your site is now viewable at this URL: http://localhost:3000
• To create compressed, production-ready assets run gulp production. This will delete everything in the dist folder and recreate all of your complied files. Never make updates directly into the dist folder as these files get overridden each time.

development and production tasks will build files to /dist/ folder.

Topbar Navigation

HTML example:

Main Navigation (top)

HTML example:

Main Navigation (right)

HTML example:

Footer

Default Dark

HTML example:

Default White

HTML example:

Minimal Dark

HTML example:

Accordion

Bootstrap documentation

HTML example:

Background

HTML example:

Badge

A small count and labeling component.

HTML example:

Brand

A simple brand component to easily add brand images of the same size.

Additional classes: .brand-sm.

HTML example:

Button

Link & Clean

Video Button

Sizes

HTML example:

Category

HTML example:

Circle Icon

Additional classes: .circle-icon-sm.

HTML example:

Feature

HTML example:

Feedback

Anthony Allison

Senior Marketing Specialist, Unvab Inc.

“ Is don"t lights appear fifth face heaven. Night spirit shall tree of Life over, unto in earth second. First, two waters, female. ”

HTML example:

Form

Input styles - .form-control-style-1, .form-control-style-2, .form-control-style-3.

Style 1

Additional classes: .form-control-white and .form-control-gray.

Style 2

Additional classes: .form-control-white.

Style 3

Additional classes: .form-control-white.

HTML example:

Gallery Item

• .image-link - class for enable popup gallery.
• .video-link - set the image height in percent or pixels.

Galleries are created by adding the .gallery-wrapper class to the parent container.

HTML example:

Industry

Industry

HTML example:

List

Use .active class for highlight an icon.

HTML example:

Member

Mary Carroll

Senior Web Developer

HTML example:

Nav

Bootstrap documentation

Additional classes: .nav-opacity and .nav-no-opacity.

Gap classes: .nav-no-gap, .nav-gap-sm, .nav-gap-md and .nav-gap-xl.

HTML example:

Nav Tabs

Page Navigation

HTML example:

Pricing

HTML example:

Process Step

HTML example:

Review

HTML example:

Service Box

Additional classes: .service-box-sm.

HTML example:

Service Card

Consulting

Stars life that waters firmament our created you.

HTML example:

Service Case

Project Engineering

Beast whose. You"ll may fruit don"t deep abundantly own void.

HTML example:

Service Line

Additional classes: .service-line-sm.

HTML example:

Shape

The jarallax plugin is used.

HTML example:

Countdown

This attribute data-due-date="..." can be one of the following:

• YYYY/MM/DD
• MM/DD/YYYY
• YYYY/MM/DD hh:mm:ss
• MM/DD/YYYY hh:mm:ss

HTML Example:

Magnific Popup

JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.

Plugin documentation.

HTML example:

Isotope

HTML Example:

Show on Scroll

A lightweight and simple script performs the action of appearing an element during page scrolling.

Additional attributes:

• Duration (milliseconds) - data-show-duration="500"
• Delay (milliseconds) - data-show-delay="100"
• Distance (px) - data-show-distance="30"
• Position (default: bottom) - data-show-origin="left" - top | right | bottom | left

HTML Example:

Swiper

See inside the template for more examples.

Additional classes:

• Horizontal - .swiper-full-horizontal

Additional attributes:

• data-swiper-loop - boolean
• data-swiper-effect - "slide", "fade"
• data-swiper-freeMode - boolean
• data-swiper-grabCursor - boolean
• data-swiper-autoHeight - boolean
• data-swiper-parallax - boolean
• data-swiper-center - boolean
• data-swiper-slides - number
• data-swiper-pagination - boolean
• data-swiper-autoplay - number
• data-swiper-speed - number
• data-swiper-gap - number
• data-swiper-breakpoints - example "1200: 2, 600: 1" = 1200(breakpoint): 2(slides), 600(breakpoint): 1(slides)

Plugins

• Magnific-Popup - https://github.com/dimsemenov/Magnific-Popup
• Bootstrap - https://getbootstrap.com/
• Imagesloaded - https://github.com/desandro/imagesloaded
• Isotope-layout - https://isotope.metafizzy.co/
• Jarallax - https://github.com/nk-o/jarallax
• jQuery - https://jquery.com/
• jQuery-Countdown - http://hilios.github.io/jQuery.countdown/
• jQuery-inview - https://github.com/protonet/jquery.inview
• Object-fit-images - https://github.com/bfred-it/object-fit-images#readme
• Swiper - https://swiperjs.com/

Images

Images

• https://www.pexels.com/
• https://unsplash.com/
• https://freebiesbug.com/

Illustrations

• https://www.freepik.com/

Other

Icons

• https://www.flaticon.com/
• https://feathericons.com/
• https://icons.getbootstrap.com/

Fonts

• https://fonts.google.com/

Helper Classes

Utilities:

• .highlight - animated underline.
• .no-transform - disable CSS transform.
• .z-index-1 - sets the z-index property value to 1.
• .z-index-n1 - sets the z-index property value to -1.

Font:

• .font-size-13 - sets the font size to 13px.
• .font-size-14 - sets the font size to 14px.
• .font-size-15 - sets the font size to 15px.
• .font-size-18 - sets the font size to 18px.
• .fw-medium - sets the font weight to medium (500).

Text Colors:

• .text-accent-1 - sets the text color to $color-accent-1.
• .text-hover-accent-1 - sets the text hover color to $color-accent-1.
• .text-accent-2 - sets the text color to $color-accent-2.
• .text-hover-accent-2 - sets the text hover color to $color-accent-2.
• .text-accent-3 - sets the text color to $color-accent-3.
• .text-hover-accent-3 - sets the text hover color to $color-accent-3.
• .text-gray-light - sets the text color to $color-gray-light.
• .text-gray - sets the text color to $color-gray.
• .text-gray-dark - sets the text color to $color-dark.
• .text-gray-darker - sets the text color to $gray-600.

Background Colors:

• .bg-linear-gradient - sets the background linear gradient between #FFF5EB and #F4F2F9.
• .bg-accent-1 - sets the background color to $color-accent-1.
• .bg-accent-2 - sets the background color to $color-accent-2.
• .bg-accent-3 - sets the background color to $color-accent-3.
• .bg-dark-light - sets the background color to $color-dark-light.
• .bg-gray-light - sets the background color to $color-gray-light.
• .bg-gray - sets the background color to $color-gray.
• .bg-gray-op20 - sets the background color to $color-gray with 20% opacity.
• .bg-gray-dark - sets the background color to $color-dark.
• .bg-gray-darker - sets the background color to $gray-600.

Border Colors:

• .border-gray - sets the border color to $gray-500 with 30% opacity.

Utils

Image Height

• Add data-img-height to element which contains an image.
• Add style="--img-height: 100%;" attribute to this element.

Half Section Divider

• Add .half-section-block class to element which will divide two sections.
• Add data-prev-id to this element which contain unique class to the previous section.
• Add data-next-id to this element which contain unique class to the next section.

Figma

Startbox was designed in Figma. Please use the link to download an unofficial Figma file that can be useful to rough out new pages or modify existing ones.

Thank You!

Thanks for using Startbox. We take great pride in creating solid templates and strongly believe in robust customer service practices. Should you have a question that neither this documentation file nor Bootstrap's forums can resolve and we’ll do our very best to assist you.

We hope you will enjoy using it for your next project!