CODEWITHSUNDEEP
angularbootstrap-4angular6
Jamie Bisotti
Jamie Bisotti

Reputation: 2675

How to incorporate a purchased theme in an Angular 6 + Bootstrap 4 app

I’ve been a backend developer for ages, but am very new to the frontend. I’ve been learning Angular 6 and Bootstrap 4 over the last several weeks for a project at work.

I have a basic Angular 6 application setup and I’m successfully using Bootstrap 4, with the default theme/style. To get where I am currently, I did the following:

  1. Created the Angular project via ng new project-name --style=scss –routing, so I have a src/styles.scss file
  2. The src/styles.scss file contains:
    • @import "~bootstrap/scss/bootstrap"; // Bootstrap 4 and it's defaults
  3. The angular.json file contains the following, under projects.architect.build.options: "styles": [ "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

It has been decided to use the Maisonnette theme to give the app a more “enterprise-y” look. We have purchased the theme, and I’ve downloaded and expanded the .zip file… and now I’m lost. I’m not sure:

  1. What part(s) of the .zip I need to copy into my project
  2. Where in my project I need to copy them
  3. What Angular 6 config files I need to update to get it to use Mainsonnette.

It feels like this should be dead simple and there should be tons of examples to be found with Google, YouTube, and/or StackOverflow. However, I’ve had no luck in finding any. Everything seems to be about tweaking the default theme with some variables; not about a wholesale replacement.

Any help would be greatly appreciated.

Thanks.

Upvotes: 2

Views: 2160

Answers (1)

Jamie Bisotti
Jamie Bisotti

Reputation: 2675

After some trial-and-error, and re-reading the docs several times, I came up with something that appears to be working for a minimal installation/usage for the Mainsonnette theme. I won't guarantee it is the correct way to do it though.

I had assumed themes would be pretty standard, and there would be a single set of steps required to incorporate any theme, but apparently I was mistaken. I now believe the first several steps below outline what will be necessary for any theme; however, the contents of what needs to be specified in each file will vary by theme. The final step is likely optional, depending on the theme.

Good luck.

  1. I copied the contents of the unzipped theme's dist/html/assets/css/ folder into my Angular app's src/assets/maisonnette/css/ folder.
    • You can omit the themes sub-folder if you do not want/need them.
  2. I copied the following from the unzipped theme's dist/html/assets/img/ folder into my Angular app's src/assets/maisonnette/img/ folder (you should replace these with appropriate versions of your own logo):
    • logo.png
    • logo-2x.png
    • logo-inv-2x.png
  3. I copied the following from the unzipped theme's dist/html/assets/js/ folder into my Angular app's src/assets/maisonnette/js/ folder:
    • app.js
    • app.min.js
  4. I copied the following from the unzipped theme's dist/html/assets/lib/ folder into my Angular app's src/assets/maisonnette/lib/ folder:
    • bootstrap/
    • jquery/
    • open-sans/
    • perfect-scrollbar/
    • raleway/
    • stroke-7/

  5. I updated src/styles.scss to look like this:

    // The Maisonnette theme dependencies
@import "assets/lib/stroke-7/style.css";
@import "assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css";

// The Maisonnette theme itself (includes BS4 CSS)
@import "assets/css/app.min.css";

  6. In angular.json, I updated projects...architect.build.options.scripts to look like this: 

    "scripts": [
  "src/assets/maisonette/lib/jquery/jquery.min.js",
  "src/assets/maisonette/lib/perfect-scrollbar/js/perfect-scrollbar.min.js",
  "src/assets/maisonette/lib/bootstrap/dist/js/bootstrap.bundle.min.js",
  "src/assets/maisonette/js/app.min.js"
]

  7. In index.html, I placed the following JavaScript at the bottom of the body tag:

    <!-- Initialize Maisonnette theme -->
<script type="text/javascript">
  $(document).ready(function(){
    //initialize the javascript
    App.init();
  });
</script>

Upvotes: 5

Related Questions