Introduction

Currently, there a lot of 3rd party Bootstrap themes and tools for creating them. Any 3rd party Bootstrap theme can be easily imported to your AngularJS & Bootstrap project. Bootstrap UI themes vary in their complexity and number of files. Some themes contain only one CSS file, while others can consist of multiple CSS, JavaScript and font files.

There are few ways to import a Bootstrap theme into the project:

• By creating new CSS and JavaScript assets:
  • Click CREATE NEW > CSS and upload required CSS files.
  • Click CREATE NEW > JavaScript and upload required JavaScript files.
• By uploading the CSS, JavaScript and fonts to the source:
  • Switch to Source and upload required CSS files to WEB_RESOURCES > css. Go to  App settings > General and define the path to the uploaded files.
  • Create a fonts folder under WEB_RESOURCES and upload required fonts there.
  • For JavaScript, go to WEB_RESOURCES > libs, create a folder with a name according to the theme name, and upload JavaScript files there. The go to the App Settings > Resources tab, and define the path to the uploaded files under External resources.

• By providing a link to the CDN:
  • Go to App settings > General and add a link to the resource. Resource will be uploaded every time during app load, so use this approach only for development purposes and don’t forget to upload all the resources directly to the app when going live.

Before you start, please, check the theme author’s license and, if needed, contact the owner.

Importing UI themes

Creating a new CSS asset

The first (and most recommended) option to add a theme is to create a new CSS asset (CREATE NEW > CSS).

Now, as an example, let’s create a CSS file with Bootswatch – the resource with free themes for Bootstrap:

1. Choose the theme on https://bootswatch.com/ and select the version you prefer (full or minimized) by clicking on its link:

2. Then, in the Appery.io Visual Editor, perform CREATE NEW > CSS:

3. Enter a name for the CSS, choose Upload from file, and locate the previously downloaded CSS:

4. Now, see the changes by clicking TEST:

In this case, the link attribute in App settings is added by the system automatically:

Similarly, the Tag Editor automatically modifies/deletes appropriate link tags for newly modified/deleted custom CSS assets.

The reverse is not true.

Adding a theme to the source as zip bundle

When adding a more complex theme that consists of multiple files, it’s more convenient to upload them using the Source tab. You can upload the whole theme at once as zip bundle if you want to see what the theme is more quickly. By using following approach, you still should add the links to the uploaded resources in App settings.

1. Go to https://github.com/FezVrasta/bootstrap-material-design, download ZIP and unzip it (if you haven’t done this in the previous section).

2. Go to bootstrap-material-design-master/bootstrap-material-design-master/dist of the downloaded theme, and pack three folders to one archive – css, fonts and js:

3. In the app builder, go to Source > WEB_RESOURCES and create two new folders: themes > material-design.

4. Upload the zip you created in step 2 as ZIP bundle to this folder – the files will be automatically extracted:

5. Now, switch to to the App Settings tab in the Project.

6. Under the Resources tab, for External resources, add (for all resources, specify External lib for Type, Enabled and Global checkboxes checked):

• jquery - //code.jquery.com/jquery-1.10.2.min.js
  This is a link to jQuery CDN. The library will be downloaded each time during app load so you should upload to the app directly when going live.
• ripples - ../themes/material-design/js/ripples.min.js
• material - ../themes/material-design/js/material.min.js

7. Then, go to the General tab and add the following Custom tags (as links):

• href="themes/material-design/css/roboto.min.css" rel="stylesheet"
• href="themes/material-design/css/material.min.css" rel="stylesheet"
• href="themes/material-design/css/ripples.min.css" rel="stylesheet"

Make sure to place these .css files in the end of the list, after bootstrap.css:

This theme should be initiated, read on to learn how.

Adding arrive.js to automatically init theme

The Bootstrap Material-Design theme supports arrive.js to automatically initiate itself without the need for executing $.material.init(); on each page. Instead, $.material.init(); should be triggered only on the index page.

1. Go to  the following resource https://github.com/uzairfarooq/arrive and download a .zip file.

2. In the Appery.io App Builder, click CREATE NEW > JavaScript. Select Upload from file and locate arrive.min in arrive-master/minified of downloaded .zip. Click Create JavaScript:

3. Now go to to the App Settings > Resources and switch Type for arrive to External lib (it will be listed under Internal resources). Also, check Shim and select jquery dependency by clicking “Deps” for arrive.

4. For ripples and material libraries, check Shim and set the jquery and arrive dependencies in the pop-up, leaving Shim exports and Shim init code fields empty:

The External resources view should look like the following:

5. Then, under Project, for index page in the ng-init section, you need to run the following code:

As a result, JavaScript adds simple ripples to button click actions:

You can skip the JavaScript part and add only CSS and fonts.

Adding theme resources to the source

The following approach is a little more complicated and time-consuming than uploading the whole theme in one folder, but guarantees a correct project structure. If your theme decision is final, it’s recommended to adhere to the following structure.

The following approach shows how to initiate the theme without arrive.js.

1. Go to https://github.com/FezVrasta/bootstrap-material-design, download the ZIP and unzip it.

2. Upload three .css files from the bootstrap-material-design-master > dist > css folder on your drive (css/roboto.min.css, css/material.min.css, css/ripples.min.css) to WEB_RESOURCES > css under the Source tab of the Editor:

3. Create the fonts folder on the main level and upload the contents of the fonts folder from bootstrap-material-design-master > fonts folder:

4.  In the libs folder, create the material folder and upload js/ripples.min.js and js/material.min.js files from the bootstrap-material-design-master > dist > js folder on your drive  to the newly created folder:

5. Now, switch to to the App Settings tab in the Project.

6. Under the Resources tab, for External resources, add (for all resources specify External lib for Type, Enabled and Global checkboxes checked):

• jquery - //code.jquery.com/jquery-1.10.2.min.js
  This is a link to jQuery CDN. The library will be downloaded each time during app load so you should upload to the app directly when going live.
• ripples - ../libs/material/ripples.min.js
• material - ../libs/material/material.min.js

The path for resources now begins with ../libs  instead of  ../themes/material-design because the JavaScript files are in the ../libs folder.

For ripples and material libraries, check Shim and set the jquery dependencies in the pop-up, leaving Shim exports and Shim init code fields empty:

The External resources view should look like the following:

7. Go to the General tab and add the following Custom tags (as links):

• href="css/roboto.min.css" rel="stylesheet"
• href="css/material.min.css" rel="stylesheet"
• href="css/ripples.min.css" rel="stylesheet"

Make sure to place these .css files at the end of the list, after bootstrap.css.

8. Then, under Project,  for every screen (including the index page) in the ng-init section, you need to run the following code:

9. To do so, switch to the SCOPE tab and click Edit located next to the init function:

10. In the field provided, enter the code shown above:

Make sure you repeat this action for all the app pages.

Adding a theme using CDN

Of course, you can use a CDN as a source for the link. But in this case, the resource will be uploaded every time during app load, so use this approach for development purposes only, and don’t forget to upload all the resources directly to the app when going live.

1. For example, open http://www.bootstrapcdn.com/#bootswatch_tab and choose the theme you like.

Then, locate the link to the theme and copy it:

2. Now, switch to the Tag Editor, click Add, and insert the copied link:

3. Now, look at the result: