This guide will help you get started with Craftum - Architecture agency HTML Template, including how to run, customize, update, and integrate your theme/template!
To get started with the template:
- Download and install Node.js and Gulp. To install Node visit https://nodejs.org/en/. To install Gulp, run the following command:
npm install --global gulp-cli.
- Unzip the template folder.
- Open your command line, and navigate to the root directory of your theme/template (
use cd /path/to/templateon macOs or
pushd /path/to/templateon Windows).
- In the command line, run the following command to install the theme/template dependencies:
- To launch your project on a development server run the following command:
npm run dev
Open your browser to your local server’s address (i.e. open Chrome to
Edit source files and preview changes instantly with live reload. Any changes made to the source files will be compiled as soon as you save the file.
To generate the distribution files for your theme/template, run the following command:
npm run build
If you prefer not to use the command line, grab the ready-to-use HTML/CSS/JS files included in the source files.
HTML starter template
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Theme CSS --> <link href="/assets/css/theme.min.css" rel="stylesheet" /> <!-- Your CSS --> <link href="/path/to/styles.css" rel="stylesheet" /> <title>Hello, world!</title> </head> <body> <!-- Bootstrap Bundle with Popper --> <script src="https://firstname.lastname@example.org/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous" ></script> </body> </html>
Here's the theme/template structure:
├── dist/ ├── node_modules/ ├── src/ │ ├── assets/ │ │ ├── css │ │ ├── favicon │ │ ├── fonts │ │ ├── images │ │ ├── js │ │ └── scss │ └── index.html ├── gulpfile.js └── package.json
dist folder contains the generated distribution files.
node_modules folder is the directory where npm installs dependenices (by default the folder is not included).
src folder contains all source files for the theme/template.
index.html file is the entry file.
gulpfile.js file is the configuration file used to compile SCSS into CSS, combine all component JS files and compress them and reload the browser when you change an HTML/SCSS/JS file.
package.json file contains meta data about your app and list of dependencies to install.
Customizing your Bootstrap theme/template
There are 2 basic ways to customize your theme/template:
1. Using SCSS
This is more versatile and sustainable way to customize your theme/template, but requires the gulp/webpack compilation steps outlined above. The 2 major benefits of this strategy are using variable overrides to easily customize theme/template styles, plus you never have to touch Bootstrap's source, meaning future updates will be much, much, simpler. There are 2 provided files located in the
assets/scss folder that make this strategy simple to implement:
_user-variables.scss: This file can be used to override Bootstrap core and theme/template variables for customizing elements that have been tied to variables.
_user.scss: This file can be used for writing your custom SCSS that will be compiled alongside Bootstrap and the theme/template core files.
2. Using CSS
If you plan on using the theme/template "as is", or only need limited customization, you will need to add custom CSS through a separate CSS file alongside the
theme.min.css file in the
You just need to link custom.css at the end of
<head> tag of each page and start adding CSS you want to add or edit. See example below:
<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
Changing the color scheme
We understand your need of changing the theme/template color scheme at ease so we've got you covered. Whether you want to work with SCSS or CSS, both methods are described below. Please note we highly recommend to go with SCSS method.
Customize global colors via Sass variables
In case you want to create your own color scheme - the fastest and painless way to do that is via Sass variables.
Simply copy necessary variable from
src/scss/_variables.scss file and paste to
src/scss/_user-variables.scss, then compile new
theme.min.css file by using Gulp.
// -------------------------------------------- // Variables // -------------------------------------------- $primary: red; // theme colors map $theme-colors: (); $theme-colors: map-merge( ( "primary": $primary, "white": $white, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark, "orange": $orange, "purple": $purple, "blue": $blue ), $theme-colors );
Gulp must be running in your system to compile this, so after saving
_user-variables.scss file, Gulp will compile the same and you will see the new color scheme.
By using this method, You have to change color codes only at one place and all your website color shades will be set properly.
Replace global colors in CSS
This is the hardest way to do things done. It is not recommended but if you prefer vanilla CSS you can replace all color hex values inside
dist/css/theme.min.css with your own using "find and replace" panel of you code editor.
By default, the theme/template uses Google Fonts. In case you want to change the font to any other Google fonts, please have a look in the head part of the webpage and you will find these tags:
<!-- Google Font --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
To change the font, first go to Google Fonts, choose your desired font and use the generated code.
After changing the fonts you then need to update the font families in
_variables.scss or override them in
// Font Families $font-family-base: 'Roboto', sans-serif; $font-family-heading: 'Heebo', sans-serif;
Vendor prefixes are not used inside the SCSS source files. Instead we use Autoprefixer to handle intended browser support via CSS prefixes. After compilation CSS styles are passed through Autoprefixer to add necessary vendor prefixes. As you know vendor prefixes are important to ensure cross-browser compatibility of latest CSS3 features.
Customize browser support via Autoprefixer settings
Autoprefixer is an integral part of the Gulp / Node building process. So to customize its settings you need to go to
package.json and find the
"browserslist" array. It's currently set to Bootstrap 5's default list of browsers.
For more information about available Browserlist options visit https://github.com/browserslist/browserslist.
Sources and Credits
Plugins, Libraries and Frameworks
Icon Fonts/Icon Packs
- Boxicons - https://boxicons.com/