RantFever 4

I pontificate but not in the pejorative sense of the word.

Theming: When LESS Is More

Posted 3 April 2013
Written by Abinadi Ayerdis
Category PyroCMS

Four themes came with my PyroCMS by default. I liked them. They were good. Still, you can't just leave the default theme. Even though the default themes look good, you don't want to look like every other default Pyro install out there.

A default situation

I began with the minimal theme. It had the fewest styles, so I copied the folder and named my new theme "rantstyle." It used 960gs as a base to the CSS. I blew away the stylesheets to start over from scratch.

There are only a few basic files needed to make a theme in PyroCMS. There is a theme.php file that has the basic theme info: who created it, what version it is, urls, etc. There is also a views folder where the layout of the site is held. It is a templating system that uses handlebars to embed or import what they call partials. So I can create a default layout that has the basic html structure I want and then insert a { { theme:partial name="metadata" } } to include anything I have in the metadata partial, which, in my case, is everything that would go in the <head> element.

As I learn more about PyroCMS, I like the simple design. Things seem to make sense so far.

LESS v. SASS

I knew that I wanted to use Twitter Bootstrap. It provides a lot of functionality and responsive design. Using it right out of the box has the same downside as using a default Pyro theme: it will look the same as every other Twitter Bootstrap site. That meant I would need to customize it.

As long as I was going to be customizing it, I thought I should jump on the CSS preprocessor bandwagon. That meant choosing between LESS and Sass. While Twitter Bootstrap was designed with LESS, there is also a Sass version of it. As I researched it, there didn't seem to be much of a benefit going either way. In the end, I opted to go with LESS as my IDE could compile it already and that meant I wouldn't have to install Ruby.

A swing and a hit

Having chosen LESS, I started trying to learn it. I went with a couple of tutorials: verekia.com and lesscss.org. Between variables and mixins, I really like LESS.

My IDE, PhpStorm, watches the less files for changes and automatically compiles them to css as they change. It is so handy. Everyone should do that. Then, I deploy to production using GIT, and I'm a happy man.

Comments

There are no comments

Posting comments after three months has been disabled.