Drupal Theming and Design: A Minimalistic Approach
Lately, I've been devoting much of my free time to developing better methods of Drupal theming to achieve streamlined processes, simplicity and minimalistic code. I'm getting away from the default code bloat or "Divitis" that Drupal can sometimes present. In this article, I'll write about some of the methods and tools I've been using. This won't be a step by step tutorial per se but just a little smattering of tidbits and snippets.
Test Case
The test case for all this is a new site I've been working on to showcase my photography. Photography is a serious passion for me and in the past year, I've had my work licensed by Land of Nod, a subsidiary of Crate and Barrel as well as some other companies. I decided I really wanted a clean and elegant site to show off my work that was responsive and modern looking with a "Flat UI" look and feel.
Inspiration
In the process of designing and developing the new site, I realized early on that the that some of the Drupal modules available would not fit my needs exactly or there simply were none written. It dawned on me that I could really use any jQuery plugin I wanted as long as my markup was bare bones basic; ah therein lies the rub. I would then be able to use drupal_add_js and drupal_add_css to pull in the plugins I wanted.
Try, Try again...
My main focus has been on creating elegant photo grids primarily using Drupal Views that resize effortlessly for different devices. I first tried the Views Isotope module (based on jQuery Isotope by Metafizzy) but disliked that it was really tricky to control as isotope was doing a lot of heavy lifting with jQuery to resize things and it just didn't seem to be elegant enough. I also tried Views Responsive Grid but that turned out to be inelegant as well. I discovered it was really important to be able to use media queries and pure CSS for grid resizing and only add in JQuery for filtering. I've gone a little against the grain here as I'm not doing pure masonry but I wanted a grid that had some white space and looked evenly spaced and moreover filled the entire width of my layout, in my case I'm using Nathan Smith's recent foray into the responsive grid game, Unsemantic.
New design concept for High Rock Photo
It's all in the settings
Views 3 for Drupal 7 has a nifty "Style Settings" UI interface. The first thing I do for any field is to check all three boxes, "Customize field HTML", " Customize label HTML", and "Customize field and label wrapper HTML". I can then set all those elements to "None." This essentially eliminates tons of divs and spans from your views output. Then in my custom Views template, I can do something like:
<li class="mix <?php print $fields['term_node_tid']->content ?>">
<a
href="<?php print $fields['path']->content ?>"
class="mix-image-link"
style="opacity: 1;"
>
<img
src="<?php print $fields['field_blog_hero_image']->content ?>"
alt="<?php print $fields['title']->content ?>"
/>
</a>
</li>
… and it outputs:
<a
href="/blog/163-freeway-park-san-diego"
class="mix-image-link"
style="opacity: 1;"
>
<img
src="/sites/default/files/styles/gallery_thumb/public/img_1352-edit_7.jpg?itok=abUIeZ5X"
alt="The 163, Freeway in the Park, San Diego"
/>
</a>
As you can see, the rendered markup is pretty simple. In addition, I'm also using Semantic Views and Image URL Formatter. The latter is a key module as it allows you to get an exact image path to a specific Image Style within Views and it's one of my new favorites in my site building / theming toolbox. So when I use:
<img src="print $fields['field_blog_hero_image']->content ?> etc...
… that's already been set in Views to output only the text path to a specific image style. One could theoretically point to an adaptive image style as well for responsive designs. This mark up is far better than the typically dozens of divs that a default view will output.
Get 'Griddy' With it
For the image grids themselves, I've gone back to basics by simply using text-align: justify. Barrel, a NYC design firm, published a nice blog post about this method. In my case I set text-align: justify for the Views Rows' parent container and then go back to an old standard which also uses display: inline-block for the Views rows themselves.
This actually works out much better for responsive grids rather than floating elements. Using Barrel's method, I found it fit nicely into my custom Views template and they were extremely helpful with some questions I had about incorporating this with dynamic data templates such as those typically used in Drupal.
For the filtering, I'm using one of Barrel's new plugins called MixItUp. It's similar to jQuery Isotope but for me it's much more minimalistic and really only focuses on the filtering and not layout.
Semantics...
As far as my work goes from this project incorporating Unsemantic, I've essentially written a custom Drupal theme based on it and am incorporating some of what I've done as a 2.x branch for my Bamboo Theme on drupal.org. This is in part as I had lots of people who loved the 1.x branch but felt it was limited to not being a wider width for desktop and widescreen layouts.
What's cool about Unsemantic is that it's all percentage based within so all you need to do is set a max-width and boom, you're set to go with your custom responsive grid layout. Once again, I can't stress the importance of paying attention to and listening to your users, they are very important and I wrote about that recently. In this case, they got me thinking about how I wanted to approach my new photo site project.