GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps
API Reference

Themes

Using Bootstrap themes.

Introduction

There are currently several 3rd party Bootstrap themes and tools available to use. 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 a project:

  • By creating new CSS and JavaScript assets:
    • Click CREATE NEW > CSS and upload the required CSS files.
    • Click CREATE NEW > JavaScript and upload the 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 the required fonts there.
    • For JavaScript, go to WEB_RESOURCES > libs, create a folder with a name according to the theme name, and upload the JavaScript files there. Then go to the App Settings > Resources tab, and define the path to the uploaded files under External resources.
  • Providing a link to the CDN:
    • Go to App settings > General and add a link to the resource. The resource will be uploaded every time during an 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.

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, select 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.

📘

Note

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 a zip bundle if you want to see what the theme is sooner. By using the following approach, you should still 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 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 an 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
  1. 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.

Adding Arrive.js To Automatically Init Theme

The Bootstrap Material-Design theme supports arrive.js so that it can automatically initiate 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 find arrive.min in arrive-master/minified of the 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 arriving.
  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.
  5. Then, under Project, for index page in the ​ng-init** section, you need to run the following code:
$.material.init();

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

📘

Note

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 down​loaded each time during your 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

📘

Note

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.
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 are at the end of the list, after bootstrap.css.
  1. Then, under Project, for every screen (including the index page) in the ng-init section you need to run the following code:
$.material.init();
  1. To do so, switch to the SCOPE tab and click Edit located next to the init function.
  2. In the field provided, enter the code shown above:
$.material.init();

📘

Note

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. However, in this case, the resource will be uploaded every time the app loads, so using 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.