What's your workflow like?

[Robby]

Hey guys, just curious what everyones work flow is like? I’ve been actively trying to speed up my development process lately, as well as keep things organized and easy to use. So what tools do you use? What’s your process like?

So for me I’m generally doing front-end and taking a psd mockup to html/css/js.

I start with copying my boilerplate project folder which already has all my directories, and stater files in it.

This includes a grunt file that has libsass, concat, copy, uglify, imagemin, connect and watch. This takes care of a bunch of little tasks I used to do manually.

Lately I’ve been working on a lot of “modern” websites that use a bunch of CSS3 so I started using Bourbon. This is amazing I’m sad I was so late to integrate it.

I usually create a git repo next and push every time I finish a section/module (this has saved me a bunch of times)

After that I generally slice the PSD up collecting all the images I’ll need.

Next I’ll be in Illustrator and create SVG’s for all the icons I’ll need.

Then I’ll finally start coding. I do everything out of sublime text with no special plugins or anything. I split me SCSS and JS files by module.

Now your turn!

[nixnerd]

I have a bash script that creates a project dir for me. All it does is create a dir with an empty index.html, script.js and assets subdir. Then, it runs ‘compass create’ so I can have all my necessary SCSS files. Lastly, it pulls the newest normalize.css via wget.

At this time I generally do an initial commit.

From there, I design in-browser (which isn’t always the best choice). I start with a general wireframe and start to play with colors. Then, I fine tune things as I go.

Beyond that, I try to work in a modular way as much as possible.

As far as any special tools… I use basically none, save for Compass/SASS/SCSS. I use Vim as my text editor.

[nixnerd]

Here’s a screenshot of my actual workflow:

[Steven]

This is something I’ve been trying to refine for the past year or so. As I’ve been getting back into more web design/development at my work, I’ve been able to actually take the time to get up to speed on things like SCSS, Git, and Grunt.

I almost always work with WordPress as my “backend”, so what I usually do is start with my mockup in Photoshop and after a while start working on a static html page to work out my markup and css. In my home folder I have a dir called “Sites” and in there are all my individual project dirs. Then inside each project I have an “assets” and “www” dir, to help separate project/client assets from my repos.

I’ve tried a number of times to write up my own grid and very light framework. I usually run into something that I need from Zurb’s Foundation and I just say screw it and go back to that.

Once I have things like my homepage and other pages laid out I’ll install a local WP site using MAMP.

At this point I should have made a number of commits, but I’m still working on drilling the idea of frequent commits into my head. I’m the only one who touches this stuff at work, so it can be easy for me to fall into a “maverick” state of mind and fly by the seat of my pants for a while.

As far as my grunt file, I usually just copy my package.json and gruntfile.js from an older project and update anything that needs updating in them.

I wonder if any of you know of an easy way to help automate the process of creating local WP installs. To this point I either copy or clone WP’s core files, create a db in MAMP, and do the install.

[nixnerd]

I wonder if any of you know of an easy way to help automate the process of creating local WP installs.

@Steven if you use a Mac… just write a bash script for it.

[Alen]

I wonder if any of you know of an easy way to help automate the process of creating local WP installs.

You have things like wp-cli.org. Or you could pull WordPress directly from github:

git clone --branch 4.2.2 --depth 1 https://github.com/WordPress/WordPress.git

I just added my Vagrant script to GitHub if anyone is interested. If you’re not using Vagrant, refer to the scripts and modify as you like.

Alen

[Author]

Posts