My design philosophy for the project I strive for is something minimal, with a subtly powerful UI. I used Sketch 2 for initial design mockups. This post will be somewhat of a living document.

For my back-end, I am using WordPress because it is amazing. On the front-end I am using jQuery, PrismJS, and csswizardry-grids.

The front-end is fairly typical so I am not putting much emphasis on that process. I built it mobile-first with responsive breakpoints for mobile, tablet (portrait and landscape), and desktop.

Build Process

I am using Compass and Sass for my CSS. Compass generates a sprite of all the various icons on the site. I used Simple Icons for the social icons. I don't use any of the vendor prefix generating mixins compass provides because I have Autoprefixer set to compile the stylesheet after Compass finishes. Here is my Gruntfile. It is pretty simple. I keep it in the root of my project.

module.exports = function (grunt) {
  // load all grunt tasks matching the `grunt-*` pattern
  require('load-grunt-tasks')(grunt);

  var globals = {
    template_url: 'app/wp-content/themes/dev-v2/',
  };

  grunt.initConfig({
    watch: {
      sass: {
        files: [globals.template_url + 'sass/*.scss'],
        tasks: ['compass'],
      },
      css: {
        files: [globals.template_url + 'css/style.css'],
        tasks: ['autoprefixer'],
        options: {
          spawn: false,
        },
      },
    },
    compass: {
      dist: {
        options: {
          basePath: globals.template_url,
          config: globals.template_url + 'config.rb',
        },
      },
    },
    autoprefixer: {
      dist: {
        options: {
          browsers: ['last 2 versions'],
        },
        files: {
          'app/wp-content/themes/dev-v2/style.css': [globals.template_url + 'css/style.css'],
        },
      },
    },
  });

  grunt.registerTask('default', ['compass', 'autoprefixer']);
};

Deployment

I am using git-deploy-php, slightly modified, to deploy the project files and the migrated version of the database. The deploy shell script I use looks very similar to this. It relies heavily on wp-cli

cd ~/Sites/devin-clark
git push
git rev-parse HEAD > REVISION
cd app
wp db export ../backup-snapshot.sql
wp search-replace devin-clark.com/ devin-clark.com/ --skip-columns=guid
wp db export ../production.sql
wp db import ../backup-snapshot.sql
rm ../backup-snapshot.sql
cd ..
php git-deploy
# Run a script on the server to import the database

And boom goes the dynamite... The files are now synced with my Git repository and the local database is migrated to the live server all in one command.

Do you have any questions? Is there anything you feel I missed or could have covered better? Let me know in the comments and I will try my best to sort it out. Thank you for reading and have a great day