Introduction

How to get started with MarketSpot Template!

This guide will help you get started with MarketSpot! All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to info@codenpixel.com

Preview

You purchased and downloaded template? Then, you probably want to also see it working live in your browser. There are a few things you need to do before getting started:

HTML files

Copy HTML-Template files and uplaod to your server.If you need to customize template reffer to this section

Build tools

There are a couple of things you need to make sure are set up on your machine before running the commands in your terminal.

Installing Node.js

In order to use our build tools you will need to download and install Node.js. If you do not have Node.js installed already, you can get it by downloading the package installer from the official website. Please download the stable version of Node.js (LTS).

Download Node.js

Installing Gulp

After Node is installed on your system you can now proceed to Gulp installation. To do that simply run the command below in your terminal. This will install Gulp globally. 

                                     npm install gulp-cli -g

Important

If you are using MacOS please use sudokeyword in the command because they need administrator rights to install Gulp globally.

Package management

Now open the terminal and cdto your project’s root. Once the path of your workflow is changed you have to install all the packages needed. You can do this with NPM or Yarn. 

                                     npm install

Unzip your theme and open your command line, making sure your command line prompt is at the root of the unzipped theme directory.

Note

All npm libraries that are used in the Front template can be seen in the package.jsonfile.

Gulp

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

Commands

Compile and watch the SCSS/JS/HTML, use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file. 

                                     gulp dev

For production we set a Gulp command that will compile and minify the CSS and JS files ready to be included in your project 

                                     gulp prod

Files

  • 📁 dist- Generated production files
  • 📁 node_modules- Directory where npminstalls dependencies.
  • 📁 data- Directory json files.
  • 📁 partials- HTML partial files.
  • 📁 pages- HTML pages.
  • 📁 layouts- HTML layouts folder.
  • 📁 src
    • 📁 assets
      • 📁 fonts- Icon fonts
      • 📁 img- Images
      • 📁 js- Theme js files
      • 📁 scss- SCSS source for theme
      • 📁 vendors- Third party plugins like jquery,bootstrap etc...
  • 📄 gulpfile.js- All the build commands
  • 📄 package.json- List of dependencies and npm information
  • 📄 .gitignore- Hide all unnecessary files from Git

Panini

We use Panini for working with HTML partials.A super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.

Panini isn't a full-fledged static site generator—rather, it solves the very specific problem of assembling flat files from common elements, using a templating language.

Lear more about how it works here

Cutomization

Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.

SCSS

To learn more click here to see the official documentation.

Customizing SCSS

There are 2 basic ways to customize your theme...

The most flexible way to edit the theme CSS or to add your own code and components to use SCSS. As mentioned before, there are two files already prepared for your changes - _user-variables.scssand _user.scss.

To configure the theme, e.g. to change colours for some elements, to change font sizes, etc., use _user-variables.scss. Any variable from scss/bootstrap/_variables.scssor scss/modules/_variables.scsscan be overridden here with your own value.

To add your own CSS code, declare it in the _user.scssfile.

To compile the SCSS, you can use the gulpfile.jsincluded in this theme (recommended) or you can download an app for your OS and compile it that way. In case you would be using an app, don’t forget to add vendor prefixes to your code too (done by Autoprefixer in the Gulp ).

CSS method

If you prefer to work with template as a static source and not to use Gulp or Sass, you will need to add your custom CSS through a separate CSS file. For this use, there is a blank custom.cssfile in the CSS folder.

Note:When you update MarketSpot template, make sure you have backup of your filesand not to override the user’s custom file, that may contain styles you have created already.

You just need to link custom.cssat the end of <head>tag of each page. See example below: 

                                         <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />

Fonts

By default, MarketSpot uses the Google fonts. In case, If you want to change font to any other Google fonts, Please have a look in the head part of the webpage and you will find this tag: 

                                 <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,400,600,700,800,900&display=swap" rel="stylesheet">

To change the font, first go to Google fonts, choose your desired font and use the generated code.

If you have a need to use custom fonts, Remove above section completely and visit Self Hosted Fonts

Sliders

Swiper - is the free and most modern mobile touch slider. See Swiper slider example code below:

See Swiper documentationfor more info and tutorial

Swiper slider setting can be found in custom.jsfile. You can customize as per your need OR you can use any demos from swiper slider demos.

Font Icons

Theme use Line Awesome.

Line Awesome consists of ~1380 flat line icons that offer complete coverage of the main Font Awesome icon set. This icon-font is based off of the Icons8 Windows 10 style, which consists of over 4,000 icons, so be sure to check that out if you need more specific icons.

Plase visit LineAwesome how to for more info.

Colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Soft Colors

.bg-primary-alt
.bg-secondary-alt
.bg-success-alt
.bg-danger-alt
.bg-warning-alt
.bg-info-alt
.bg-dark-alt

Bootstrap?

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

Best way to learn more is to over to their Getting Started page to learn on how to work with bootstrap. Their setup guide is indeed a host of useful information - links to CDNs, explanations on how to install with Bower, npm, and Composer, information on integration with Autoprefixer and LESS, a bunch of templates, licenses, and translations .

Use any component in here.

Important

Head over to bootstrap components page for code snippets

Buttons examples

MarketSpot includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.. 

<button type="button" class="btn btn-primary">Primary</button>                                     <button type="button" class="btn btn-secondary">Secondary</button>                                     <button type="button" class="btn btn-success">Success</button>                                     <button type="button" class="btn btn-danger">Danger</button>                                     <button type="button" class="btn btn-warning">Warning</button>                                     <button type="button" class="btn btn-info">Info</button>                                     <button type="button" class="btn btn-light">Light</button>                                     <button type="button" class="btn btn-dark">Dark</button>                                     <button type="button" class="btn btn-link">Link</button>

Soft color buttons 

<button type="button" class="btn btn-primary-alt">Primary</button>                                         <button type="button" class="btn btn-secondary-alt">Secondary</button>                                         <button type="button" class="btn btn-success-alt">Success</button>                                         <button type="button" class="btn btn-danger-alt">Danger</button>                                         <button type="button" class="btn btn-warning-alt">Warning</button>                                         <button type="button" class="btn btn-info-alt">Info</button>                                         <button type="button" class="btn btn-light-alt">Light</button>                                         <button type="button" class="btn btn-dark-alt">Dark</button>                                         <button type="button" class="btn btn-link-alt">Link</button>

Round buttons

Fancy rounded buttons? Add .btn-pillfor nice rounded style. 

<button type="button" class="btn btn-pill btn-primary">Primary</button>                                             <button type="button" class="btn btn-pill btn-secondary">Secondary</button>                                             <button type="button" class="btn btn-pill btn-danger">Danger</button>                                             <button type="button" class="btn btn-pill btn-warning">Warning</button>                                             <button type="button" class="btn btn-pill btn-info">Info</button>                                             <button type="button" class="btn btn-pill btn-light">Light</button>                                             <button type="button" class="btn btn-pill btn-white">White</button>                                             <button type="button" class="btn btn-pill btn-dark">Dark</button>                                             <button type="button" class="btn btn-pill btn-outline-success">Success</button>                                             <button type="button" class="btn btn-pill btn-outline-danger">Danger</button>

FAQs

  1. Why there are no images that were in live demo?

    All images are only for demonstration purpose, however you can re-download them from sites we have listed in Credits section.

  2. Can you help with some custom work?

    Yes.My hourly rate is $45 !

Credits

All images are only for demonstration purpose, however you can re-download them in sites below.

Unsplush
jQuery
CSS and Fonts

Changelog

v1.1.0 - Mart 2020
  • Initial Release