Introduction

Get started with Replacer theme

This manual will help you launch and customize the theme. Here you will find all stuff you need about files, source codes, build tools and the PUG template engine, but if you have any questions or feedback, feel free to write us to [email protected]

Built on near-vanilla Bootstrap

Replacer uses Bootstrap components to the fullest! We didn't code new CSS styles if Bootstrap already had the solution, so the theme loads quickly and easy to customize, and in many cases, you won't need to read more documentation than necessary, and all new components are described right here

Quick start

If you don’t have enough time you can use Replacer theme without deep customization, just use compiled HTML & CSS files, but if you need to go deeper you should do the following:

1. Download and unzip the theme to your directory
2. Open terminal and make sure you have node.js installed by using the following command: node -v
3. If you don’t have node.js installed, so just visit nodejs.org to download it
4. Install Gulp by run: npm install gulp-cli
5. Go to the directory where you placed the theme and run: npm install
6. After all run gulp to start a development server with the live reload in a browser tab, watching and compiling files

Pug

Pug is a powerful template engine used in Replacer to make partials for easy development, it supports variables, mixins, templates and etc. Pug has a clean, whitespace sensitive syntax for writing HTML, look at a simple example:

// you can use mixins or templates
mixin custom_button(text, style)
	a.btn.mr-2(href="#", class= style)= text
+custom_button('Primary', 'btn-primary')
+custom_button('Gray', 'btn-gray')
// or just standard syntax
a.btn.btn-secondary-light.text-secondary(href="#")
	| Secondary light

<div class="bg-white p-3 rounded rounded-bottom">
	<a class="btn mr-2 btn-primary" href="#">
		Primary
	</a>
	<a class="btn mr-2 btn-gray" href="#">
		Gray
	</a>
	<a class="btn btn-secondary-light text-secondary" href="#">
		Secondary light
	</a>
</div>

The gulp task is also used to watch and compile Pug files. To learn more about Pug visit pugjs.org

File structure

• css - compiled CSS files
• html - compiled HTML files
• images - all photos, illustrations, icons and other graphics
• js - JavaScript files
• pug - Pug sources
• scss - SCSS sources
• webfonts - FontAwesome font files
• gulpfile.js - All Gulp commands for watching and compiling
• package.json - npm dependencies

Customizing

If you are limited in time or you need minor customizing you can use Replacer styles as is, just edit compiled css/theme.css file, but the preferable way is to edit and compile SCSS files, the main SCSS files to edit are scss/_theme-variables.scss and scss/_theme-core.scss. For more information about customizing in Bootstrap visit getbootstrap.com/docs/4.5/getting-started/theming/