Custom Community – SASS, LESS, Responsive Design, Grid System

Right now, we are in the chapter of responsive design, crossbrowser issues, SASS or LESS integration and questions about grid systems.

SASS vs. LESS

This was the first answer we had to find. SASS and LESS are both very similar systems to extend CSS with dynamic behavior such as variables, mixins, operations and functions. In the end you can write less code, and it is crossbrowser stable and responsive. So after analyzing quite a long time a few possibilities out there, our winner was lessphp, a compiler for LESS written in PHP written by Leaf Corcoran. And we just started to integrate LESS/lessphp into Custom Community. Thanks to Leaf Corcoran for the nice work on the lessphp module. And of course thanks for the awesome work on LESS!

More info
LESS: http://lesscss.org/
lessphp: http://leafo.net/lessphp/

Grid system

We had a look at a bunch of cool grid systems for LESS and the most interesting was definetely the Semantic Grid System by Tyler Tate.

You can set column and gutter widths, choose the number of columns, and switch between pixels and percentages. Exactly what we need for Custom Community. And it is responsive. Cheers Tyler!

The next steps

Now there is a list of questions and it’s time to find out how all the theme options can integrate nicely with LESS and the grid system. At the same time the whole CSS will be rewritten in LESS, and a lot of styles have to be merged.

Contribute

Have a look what’s going on @Github:
https://github.com/Themekraft/Custom-Community/

What do you think?

What do you think about SASS and LESS, grid systems and WordPress theming?
Let us know and leave us a comment.

  1. Profile photo of jcircle

    jcircle says:

    I think the grid system brings CC closer to a true theme framework, and not a “base layout”. The wait will be worth it.

Leave a Reply

Your email address will not be published. Required fields are marked *

3,570 Spambots Blocked by Simple Comments

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>