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.
- Click
- By uploading the CSS, JavaScript and fonts to the source:
- Switch to
Source
and upload required CSS files toWEB_RESOURCES > css
. Go toApp settings > General
and define the path to the uploaded files. - Create a
fonts
folder underWEB_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 theApp Settings > Resources
tab, and define the path to the uploaded files underExternal resources
.
- Switch to
- 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.
- Go to
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:
1 |
$.material.init(); |
As a result, JavaScript adds simple ripples to button click actions:
You can skip the JavaScript part and add only
CSS
andfonts
.
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:
1 |
$.material.init(); |
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: