Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Integrate Bootstrap Theme in Phoenix Framework

I have been building a Meteor app and decided to ditch it in favor of phoenix. The problem I am having is trying to integrate a pre-made Bootstrap theme with my app. I need to be able to control the load order of the CSS, Sass, and JavaScript. In Meteor you put the load order in a package.json file and build a custom package for it. Also, you don't have to include import statements in your HTML. So my specific questions are these:

How do I control the load order of the files?

Where should all the JavaScript, CSS, Sass, and images files go? (I'm guessing in the static vendor directory?)

I do need to include the import statements in the HTML files correct?

This theme is pretty big with a bunch of JavaScript files, font awesome, Bootstrap CSS, custom CSS, Sass, images, and the kitchen sink.

like image 857
ceero Avatar asked Dec 08 '15 02:12

ceero


People also ask

What is Bootstrap integration?

Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.

Is bootstrap a framework or template?

Bootstrap is a free front-end framework that makes web development much easier and more efficient. Bootstrap is also considered one of, if not the most widely used HTML, CSS, and JavaScript frameworks for creating mobile-friendly and responsive websites.

Is Tailwind like bootstrap?

Bootstrap is a component-based framework, which means it comes with prebuilt components and includes other utilities for layering displays, spacing, etc. Tailwind, on the other hand, CSS is a utility-first framework. Using Tailwind CSS is akin to writing regular CSS. Unlike Bootstrap, it has no prebuilt components.


1 Answers

In Phoenix this can be accomplished like so:

You'll want to include the sass-brunch package in your package.json file and run npm-install e.g.

{
  "repository": {
  },
  "dependencies": {
    "brunch": "^1.8.5",
    "babel-brunch": "^5.1.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.8.10",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  }
}

Now you'll change your app.css located web/static/css/app.css file to app.scss. From here import all of your css/sass files (I personally add bootstrap to the vendor folder under css web/static/vendor/css/bootstrap.scss) e.g.

@import "../vendor/css/bootstrap";

This next part might be the part that you had trouble figuring out, as I =o). What you do for javascript files is require them in your brunch-config.js file like so:

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js",
      order: {
        before: [
          "web/static/vendor/js/jquery.min.js",
          "web/static/vendor/js/bootstrap.min.js",
          "web/static/vendor/js/scripts.js"
        ]
      }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "deps/phoenix/web/static",
      "deps/phoenix_html/web/static",
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true
  }
};
like image 107
Donovan Dikaio Avatar answered Sep 28 '22 18:09

Donovan Dikaio