Using Bootstrap themes.
There are few ways to import a Bootstrap theme into a project:
- Click CREATE NEW > CSS and upload the required CSS files.
- 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.
- 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:
- Choose the theme on https://bootswatch.com/ and select the version you prefer (full or minimized) by clicking on its link.
- Then, in the Appery.io Visual Editor perform CREATE NEW > CSS.
- Enter a name for the CSS, select Upload from file, and locate the previously downloaded CSS.
- 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 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.
- Go to https://github.com/FezVrasta/bootstrap-material-design, download ZIP and unzip it (if you haven’t done this in the previous section).
- 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.
- In the app builder, go to Source > WEB_RESOURCES and create two new folders: themes > material-design.
- Upload the zip you created in step 2 as ZIP bundle to this folder – the files will be automatically extracted.
- Now, switch to the App Settings tab in the Project.
- 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
- 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.
- Go to the following resource https://github.com/uzairfarooq/arrive and download a .zip file.
- 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.
- 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.
- Then, under Project, for index page in the ng-init** section, you need to run the following code:
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.
- Go to https://github.com/FezVrasta/bootstrap-material-design, download the ZIP and unzip it.
- 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.
- Create the fonts folder on the main level and upload the contents of the fonts folder from bootstrap-material-design-master > fonts folder.
- 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.
- Now, switch to to the App Settings tab in the Project.
- 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 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
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.
- 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.
- Then, under Project, for every screen (including the index page) in the ng-init section you need to run the following code:
- To do so, switch to the SCOPE tab and click Edit located next to the init function.
- 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. 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.
- 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.
- Now, switch to the Tag Editor, click Add, and insert the copied link.
- Now look at the result.