My new Joomla web design and development workflow with Twitter Bootstrap and Github
In the past couple of months I did a lot of work in integrating the awesome Twitter Bootstrap into my Joomla website and probably into my workflow. With the help of Font Awesome some final touches were added, but the site is not finished and will evolve continuously.
Transforming the site into responsive design
Responsive Web Design is getting a lot of attention lately. The technique has its good and bad characteristics, but I’ll live that discussion for another post. At work I was introduced to Twitter Bootstrap, the framework from the guys that made Twitter. Bootstrap is:
Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
It can be a time saver, especially with the designs for the most common UI elements.
I like to make custom designs and Bootstrap offers an option to build your own custom grid. I made use of that option and created a custom grid for my website. The integration of Bootstrap was achieved with Alternative layout overrides, module overrides and menu item overrides.
Changing from CSS to LESS, the dynamic stylesheet language
I think LESS should be the default choice in every web development workflow. Although SASS is more powerful, I did start to learn LESS, which is easier to transition to from CSS. If you are interested about the comparison between LESS and SASS you should check out this great article from Chris Coyier at CSS tricks.com.
But do not be scared, LESS is just CSS with much more power. You can save your color palette in variables or mixins and use them across the site to be consistent. There is also an awesome app out there. You just create a style.less file and include it in the app. The app has to be running and each time you save the .less file it exports the changes to a CSS file, that can be automatically minified. You can still use the css file for the website and work in the less file when programming. There is also a JavaScript plugin less.js that let’s you use .less files directly in the browser.
Using Github for revision control
If Github is not the default tool in you workflow start using it. It is hard to explain all of the benefits. Developers that know how to use git, use the Terminal for the commands. But for the ones that are not so comfortable with the Terminal, there is an app available. The app is great, useful and has a gorgeous UI design.
There is only one trouble with using Github and CMS systems like Joomla or WordPress, and that is the database management. You can’t have revisions of the MySQL database, and Joomla saves all of the settings inside it. I get around this with copying the content manually from my local server to the live one. You can also export and import the database. It would be nice if there would be a simpler solution for doing this, but for now this is the only option.
But as far as the code goes, Github is your tool to use, if you make mistakes it can be easily undoable. It can also be a great tool when collaborating with other programmers.
Conclusion
The blog post is really a change in my workflow when creating custom Joomla template designs.
- With LESS the css code gets cleaner and easier to read through.
- The code is hosted on Github where you can see the changes and commit new ones.
- Using Twitter Bootstrap dramatically saves you time and offers also responsive design for your project.