ArchiaDocumentation

Theme version:1.0.0Changelog
  • Bootstrap 5
  • HTML
  • Javascript
Table of Contents

This guide will help you get started with Archia - Architecture Agency Bootstrap Template, including how to run, customize, update, and integrate your theme/template!

Getting Started

To get started with the template:

  1. 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.
  2. Unzip the template folder.
  3. Open your command line, and navigate to the root directory of your theme/template (use cd /path/to/template on macOs or pushd /path/to/template on Windows).
  4. In the command line, run the following command to install the theme/template dependencies:
npm install
Note:if you receive error messages while trying to run the npm install command, you may need to install Git on your device first. You can download Git on the Git website.

Compiling

  1. To launch your project on a development server run the following command:
npm run dev
  1. Open your browser to your local server’s address (i.e. open Chrome to localhost:3001).

  2. 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.

  3. 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:

index.html
<!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>
  <!-- Vendor JS -->
  <script src="./assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
	<!-- Main JS -->
	<script src="./assets/js/main.js"></script>
  </body>
</html>

File Structure

Here's the theme/template structure:

├── dist/
├── node_modules/
├── src/
│   ├── assets/
│   │   ├── css
│   │   ├── favicon
│   │   ├── fonts
│   │   ├── images
│   │   ├── js
│   │   └── scss
│   └── index.html
├── gulpfile.js
└── package.json

The dist folder contains the generated distribution files.

The node_modules folder is the directory where npm installs dependenices (by default the folder is not included).

The src folder contains all source files for the theme/template.

The index.html file is the entry file.

The 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.

The 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 dist/assets/css directory.

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/theme/_variables.scss file and paste to src/scss/_user-variables.scss, then compile the 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.

Fonts

By default, the Archia theme uses FontShare Fonts. In case you want to change the font to any other FontShare font, please have a look in the main scss file - main.scss and you will find these imports:

// 1. Fonts
@import "https://api.fontshare.com/v2/css?f[]=switzer@600,700,400,500&display=swap";

To change the font, first go to FontShare, 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 _user-variables.scss file.

// Typography

$font-family-sans-serif: "Switzer", sans-serif;
$headings-font-family: "Switzer", sans-serif;
$display-font-family: "Switzer", sans-serif;

Browser Support

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

Fonts

Icon Fonts/Icon Packs

Graphic Assets