Before I start let me introduce myself. My name is Tim Hooker and I’ve been building websites for about a year now. I’d like to talk about my process in setting up a Magento development environment that allows you to simplify theming a Magento site using Gulp and Compass.
Compass is a tool for creating css using a program called Sass. It makes supporting multiple browser stacks easy. It also allows you to make multiple files for all your css. This allows you to reuse that code on other projects more easily.
Gulp is a build tool. It can do many things but I use it to look through a folder of files, find what is needed for my website, and put them in a new folder all prettied up and ready for the web. I also use it to let me see my work live in my web browser and refresh it when I make changes.
In this post, I’m just going to talk about the challenges and my thought process.
Here are the challenges and why this is worth some effort:
When you’re jumping around between directories it can get really confusing. You can easily find yourself editing the wrong files. That’s the first challenge. I’d like to put them all in one big mama folder.
- Secondly, we need focus. We have to figure out which files we need to alter and pay attention to those specific ones. Magento is a system built almost entirely on overrides of files. Out of the box, Magento already works and your theme will only override or extend the core look, feel, and functionality. So it’s like this big onion of code with layers and layers to look through.
If we’re going to be successful, we have to figure out which files to include in our big mama folder.
That said I’ve decided to pay attention to one child of the RWD theme folder which is a fully functional responsive them. That will save time. RWD has a default folder which is also not the folder I want to pay attention to. My folder will be named for my theme and essentially will override the RWD default folder. If I have a header.phtml, it will override the default header.phtml. If I don’t have one, it will fall back to that file. It also works that way for css and js. This way, when you want my files, you’ll go to RWD/mytheme both in the app/design/frontend folder and in the skin/frontend folder. This should simplify where we focus.
- The final challenge is to make this simple. Another developer needs to be able to pick this up and in about 2 minutes have it up and running without too many questions. It’s no good if this doesn’t work in a team context.
Now that we’ve gone through the challenges, I’ll talk through the process in the next post.by