Gentelella Theme on Phoenix 1.3

NOTE: Still a WIP!

This is also by no means a faithful port. Due to laziness, I've opted to not include some JS plugins such as Switchery and iCheck.

• Figure out how to extract JavaScript into its own files
• Extract Sidebar, Top Navigation, etc into partials
• Plain Page
• Login Page
• Tables Default Example with DataTable
• Form Page
• Form Wizard Page
• 404 page
• Fix static links

Starting

To start your Phoenix server:

• Install dependencies with mix deps.get
• Create and migrate your database with mix ecto.create && mix ecto.migrate
• Install Node.js dependencies with cd assets && npm install
• Start Phoenix endpoint with mix phx.server

Now you can visit localhost:4000 from your browser.

Reproducing the Steps

First, you need to install the required NPM packages in the assets directory:

cd phx_gentelella

The install the plug-ins required for Brunch:

% npm install --save-dev sass-brunch copycat-brunch

Next, install Bootstrap, JQuery and Font-Awesome:

% npm install --save bootstrap-sass jquery
% npm install --save font-awesome

Then, make your brunch-config.js look like this:

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.scss"]
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    watched: ["static", "css", "js", "vendor"],
    public: "../priv/static"
  },

  plugins: {
    babel: {
      ignore: [/vendor/]
    },
    copycat: {
      "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap",
                "node_modules/font-awesome/fonts"]
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap-sass/assets/stylesheets",
                       "node_modules/font-awesome/scss"],
        precision: 8
      }
    }
  },

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

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      bootstrap: 'bootstrap-sass'
    }
  }