Radio Liferay Episode 47: Chema Balsas and Emil Öberg on Themes and Frontend Development

  Another Devcon conversation - make sure not to miss this event next year! I grabbed Chema Balsas, Software Engineer at Liferay Spain, and Emil Öberg, Consultant at Monator Technologies, a Liferay Partner Company in Sweden. This is a three-way conversation with Chema Balsas and Emil Öberg that we had during Liferay's Devcon 2014. Chema had a Theme-Workshop (sorry, no recording) and Emil a presentation on Rapid Frontend Development, so it made sense to talk to both of them as their experience overlaps. Speaking of experience: Chema is a Software Engineer in Liferay Spain, Emil is a Consultant at Monator Technologies, a Liferay Partner Company in Sweden.

We're trying to bridge the gap and discuss visual topics, e.g. themes, in an audio format:

  • the qualities of Liferay
  • UX (user experience) and UX guidelines
  • Building themes
  • How to start new theme projects
  • Emil's github repository
  • The problem with people like me doing frontend design
  • SASS, LESS
  • New themes coming to marketplace
  • Disabling Bootstrap and the future plans with it
  • Best practices on editing/creating themes, how to update servers and test
  • Sublime, Webstorm, Brackets
  • Developing a Toolchain, ROI
  • Upgrading themes to new versions of Liferay (see also Episode 38)
  • and probably more topics that I forgot to add to these shownotes.

Follow @RadioLiferay, @jbalsas, @emiloberg and @olafk on twitter.

You'll find this episode - and make sure that you don't miss any of the future episodes - by subscribing to  http://feeds.feedburner.com/RadioLiferay. You can also subscribe on itunes.: Just search for "Radio Liferay" or just "Liferay" in the podcast directory. If you like this, make sure to write a review for the podcast directory of your choice - or leave your feedback on www.liferay.com/radio.

Or just download the MP3 here:

download audio file

Blogs
Hello Olaf, hello Chema, hello Emil,

thank you for this interesting episode of Radio Liferay.

In the episode you said that Emil uses a Base Template for each new Theme they develop. Is that Template available somewhere? I did not find it on Emil's github repositories.

Regards,
Hi!

To say that I've a base template for every new theme is a little bit stretching it.

When we start developing a new theme we always start from a previous project. As we always are learning new things and always get a little bit better, most of the time we start by cloning the last project we worked on. And then we just remove the things which are specific for the previous project. It just takes me a couple of minutes.

The thing which allows us to work this way is that we adhere to the "Atomic design" principle ( http://bradfrost.com/blog/post/atomic-web-design/ ). Take a look at this screenshot of a project of ours https://dl.dropboxusercontent.com/u/3378286/sample-theme.png (This is the source, so this is before the precompiler compile the scss into css, concatenate and minify the js, and make sprites out of images. A few files are censored as this is a client project). Lets say we aren't using maps in project, then I'll just delete the _map.scss file.

Another thing which makes us work this way is that all variables such as colors, fonts etc are set in the _variables.scss file, making it easy to change for a new client.

But no, sorry, I don't have a totally blank theme to show you.