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 firstname.lastname@example.org
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:
Copy HTML-Template files and you are ready to go.
There are a couple of things you need to make sure are set up on your machine before running the commands in your terminal.
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).
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
If you are using MacOS please use
sudokeyword in the command because they need administrator rights to install Gulp globally.
Now open the terminal and
cd to 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.
Unzip your theme and open your command line, making sure your command line prompt is at the root of the unzipped theme directory.
All npm libraries that are used in the Front template can be seen in the
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
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.
For production we set a Gulp command that will compile and minify the CSS and JS files ready to be included in your project
- 📁 dist - Generated production files
📁 node_modules - Directory where
- 📁 data - Directory json files.
- 📁 partials - HTML partial files.
- 📁 pages - HTML pages.
- 📁 layouts - HTML layouts folder.
- 📁 fonts - Icon fonts
- 📁 img - Images
- 📁 js - Theme js files
- 📁 scss - SCSS source for theme
- 📁 vendors - Third party plugins like jquery,bootstrap etc...
- 📁 assets
- 📄 gulpfile.js - All the build commands
- 📄 package.json - List of dependencies and npm information
- 📄 .gitignore - Hide all unnecessary files from Git
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
Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.
To learn more click here to see the official documentation.
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 -
To configure the theme, e.g. to change colours for some elements, to
change font sizes, etc., use
scss/modules/_variables.scss can be overridden here with
your own value.
To add your own CSS code, declare it in the
To compile the SCSS, you can use the
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
If you prefer to work with Sell 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.css file in
the CSS folder.
Note:When you update MarketSpot template, make sure you have backup of your files and not to override the user’s custom file, that may contain styles you have created already.
You just need to link
custom.css at the end
<head> tag of each page. See
<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
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
Swiper - is the free and most modern mobile touch slider. See Swiper slider example code below:
See Swiper documentation for more info and tutorial
Swiper slider setting can be found in custom.js file. You can customize as per your need OR you can use any demos from swiper slider demos.
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.
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.
ImportantHead over to bootstrap components page for code snippets
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>
Fancy rounded buttons? Add .btn-pill for 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>
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.
Can you help with some custom work?
Yes.My hourly rate is $45 !
All images are only for demonstration purpose, however you can re-download them in sites below.Unsplush
CSS and Fonts
v1.1.0 - Mart 2020
- Initial Release