Building a Theme Project

The first question that needs to be answered when using WireBootstrap with a new Bootstrap themes is how best to integrate the two. While every theme is different in some way including how assets are organized or what is included in each, there are some best practices and things to consider that have worked well in the past. These are shared here on this page.

Examples

Existing WireBootstrap theme projects are a great reference for how to go about integrating with a new theme. The WireBootstrap for Gentelella project can be download for free. This project is a TypeScript project but a theme project can also be written in plain JavaScript and include integrations with other frameworks.

Scaffolding

Start development by creating an empty page that will be used as a template for all pages in the theme project. This is usually a page with references to web frameworks such as Bootstrap and the core WireBootstrap library with an empty bodytag.

Below is an excerpt from the WireBootstrap for Gentelella empty-page.html template page.

<html>

<head>
    <!-- Bootstrap -->
    <link href="../../gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="../../gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Gentelella Theme -->
    <link href="../../gentelella/build/css/custom.min.css" rel="stylesheet">
    
    <!-- WireBootstrap -->
    <link href="../../lib/wire/wire.css" rel="stylesheet">
</head>

<body>

    !-- ********************************************************************************** -->
     YOUR CONTENT HERE
    !-- ********************************************************************************** -->
        
    <!-- jQuery/Bootstrap -->
    <script src="../../gentelella/vendors/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="../../gentelella/vendors/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
        
    <!-- WireBootstrap -->
    <script src="../../lib/gentelella/custom-wire.js" type="text/javascript"></script>
    <script src="../../lib/wire/wire.js"></script>
    
</body>

</html>

Cards/Panels

Cards or panels are a staple UI component that provide the boxed borders for most content inside of an application developed using a theme. Its a good idea to also create an empty card template for this purpose.

Below is an excerpt from the WireBootstrap for Gentelella empty-panel.html card template.

    <!-- Begin Panel -->
    <div class="x_panel">
        
        <!-- Title -->
        <div class="x_title">
  
          <!-- Title Text -->
          <h2>Title Text <small>title description</small></h2>               
  
          <div class="clearfix"></div>
        </div>
        <!-- End Title -->
  
        <!-- Begin Content -->
        <div class="x_content">

          <!-- ********************************************************************************** -->
          YOUR CONTENT HERE
          <!-- ********************************************************************************** -->
          
        </div>
        <!-- End Content -->
  
      </div>
      <!-- End Panel -->

Project

Concerns related to the theme project center mainly on the project assets relative to the theme assets. This includes both application code and references to theme files such as CSS and JavaScript libraries.

Theme Assets

Deploying assets is a little easier if the theme is open source and the theme files can be distributed with the WireBootstrap theme project. If not, the project will have to be unzipped into an existing directory containing the theme. WireBootstrap for Gentelella contains the theme assets in the download while a theme such as WireBootstrap for Color Admin needs to be unzipped into a directory containing the purchased/licensed theme.

Code

The application code for theme projects are usually written in TypeScript or plain JavaScript. There may also be server-side components written in PHP, C# or other languages needed but these would most likely be specialty features that exist outside of the theme.

Application code as JavaScript inside HTML pages is simple. Quick examples of features are great for this. However, if the goal of the project is to create a starting point for a production application, it should probably be setup up with a more modern layout with concern separation and class-based module code.

A theme project should also provide a way to serve pages. Consider the light-weigh http-server npm package for this.

Web Frameworks

Themes often offer versions for different frameworks including Angular, React, and Vue. Before creating a dedicated theme project for a specific web framework, visit the WireBootstrap Integrations page to see if there is already a technology integration available for the web framework.

Components

Most Bootstrap theme components are created by third-parties. Components such as DataTables and Select2 are included with most themes and are already available as WireBootstrap components.

However, some of the HTML components in a theme are specific to the theme. It's easy to create re-usable data-aware components from HTML and CSS in the theme in WireBootstrap. Read Building a Component for details.

Questions

If you still have questions or need help with theme integration, email us at info@wirebootstrap.com. We are happy to help.

PreviousPages NextFormatting

Last updated 2 years ago