Charming Pro Documentation

Getting started with Charming Pro

Charming Pro is essentially a Bootstrap 4 theme and a set of HTML templates and assets. It builds on top of an open source, customized version of Bootstrap 4 called Charming and adds additional components and styles.

Being built on top of Bootstrap 4, Charming supports all features of Bootstrap 4 as well. This documentation mainly describes new and altered components from standard Bootstrap 4. For more information on the base framework, make sure to have a look at the Bootstrap 4 documentation.

Package contents

File/Folder Description
dist/ Charming core. Contains Charming Pro and Bootstrap 4 files.
examples/ Contains standalone example sites built with Charming Pro
modules Contains the open-source Charming theme which Charming Pro builds upon
scss/ Charming Pro SCSS sources
gulpfile.js Gulp file to facilitate a custom build. More info
package.json Package file for easy installation of build dependencies with npm

Installation and starter template

To use Charming Pro on your website, you must include charming-pro.scss, jquery.js, popper.js, bootstrap.js and charming-pro.js (or their respective minified versions). Here’s a minimal starter template that includes those files.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Lato font from Google webfonts -->
    <link href="https://fonts.googleapis.com/css?family=Lato:400,900,700,400italic"
          rel="stylesheet">

    <title>Charming Pro Site</title>

    <!-- Icon fonts as required -->
    <link rel="stylesheet" href="modules/pe-icon-7-stroke/Pe-icon-7-stroke.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- Charming Pro CSS -->
    <link rel="stylesheet" href="charming/dist/css/charming-pro-green.min.css">
  </head>

  <body>
    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script src="charming-pro/dist/js/charming-pro.min.js"></script>
  </body>
</html>