Is This How The Pros Do It? (Porting a Template to Phoenix)

Hi Folks,

Today, I spent a long time porting a template (you can find the template here) to work with my app. It ended up being very much error driven development, in that I would load the page, see what assets were broken / missing, and try to put them in the right place. Being a conscientious developer, I want to ask you folks if this is a decent way to do things.

Here’s what I did, in essence:

First, I removed the default stuff. I deleted web/static/assets/images/phoenix.png; deleted the contents of web/static/css/phoenix.css, and I overwrote templates/layout/app.html.eex, leaving in the eex.

Second, I added the CSS files into web/static/css. The css files were not minified, so, following the guide on static assets, I put them anywhere but web/static/assets so that brunch could uglify them. The snippet of what my brunch config file looked like is below:

    stylesheets: {
      joinTo: "css/app.css",
      order: {
        before: [
          "web/static/css/normalize.css",
          "web/static/css/bootstrap.css",
          "web/static/css/jquery.fancybox.css",
          "web/static/css/flexslider.css",
          "web/static/css/styles.css",
          "web/static/css/queries.css",
          "web/static/css/etline-font.css",
          "web/static/css/animate.css",
          "web/static/css/font-awesome.css",
        ],
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },

Then, I added the images and fonts. These assets do not need to be processed, so I added them to web/static/assets/images/ and web/static/assets/fonts, respectively.

Then, I added the Javascript files. I put these files in web/static/vendor/js, so that they are not wrapped up in modules and they are executed without having to do any more work. It was important to make sure that the files were loaded in a particular order, so I again modified my brunch configuration:

    javascripts: {
      joinTo: "js/app.js",
      order: {
        before: [
          "web/static/vendor/js/jquery-1.11.2.min.js",
          // "web/static/vendor/js/retina.js",
          "web/static/vendor/js/jquery.fancybox.pack.js",
          "web/static/vendor/js/bootstrap.min.js",
          "web/static/vendor/js/scripts-min.js",
          "web/static/vendor/js/jquery.flexslider-min.js",
          "web/static/vendor/js/classie.js",
          "web/static/vendor/js/jquery.waypoints.min.js",
        ]
      }
    },

Along the way, I also took care of loose ends, mostly by pointing code that used relative URLs for images / fonts to the right place.

Did I take any wrong turns here? Again, it all seems to work fine, but I was wondering if I’m creating some maintenance problems down the line.

Thanks!

1 Like