TB Wall - Premium Drupal theme with Pinterest design

Brief Overview

This showcase is different from the others you usually see on Drupal showcase. Since the project is to create a generic theme that provide a concept design, high flexibility and easy customization ability to users; not for a specific business organization. We strive for a general method of building a site based on the predefined concept.
Inspired by Pinterest, project’s objective is building a theme that has grid layout and responsive design used for heavy-content sites. The theme has to meet high demands of site performance and multiple content type displaying. And last but not least, it must be a clean & clear design.

Why Drupal was chosen: 

First of all, most of other CMSs (specifically Wordpress & Joomla) already have various theme versions of Pinterest concept. While in Drupal due to limited number of professional theme providers, this project can be considered as one of those first initiatives bringing Pinterest layout to Drupal.
And how Drupal helps us in the project development? Absolutely it does, and does so well. Thanks to Drupal high flexibility, we are confident that our outcome would be a multi-purposed theme that users can tune in and customize as they like.
Furthermore, vast amount of Drupal third party modules make it easier for us and users to implement our ideas. For us that is a theme serving multi purpose with capability of display heavy content at optimized speed. For users it could be a scalable site, maybe some small blog to start with and then a news site when number of daily visitors reaches thousands.

Describe the project (goals, requirements and outcome): 

The objective of the project is to create a theme with creative grid layout, optimized speed performance, good usability, mobile-ready. Moreover, apart from our existing themes, this one has to be different from the rest so we can maintain the diversity and fulfill our collection.
Although the project team is small, we use Scrum to take advantage of its fast development cycle and strong adaptability to change.
In order to satisfy the requirements, we came up with a set of features that are necessary to implement:

  • Infinite scroll: improve usability, lessen interruption from clicking “Next page”
  • Lazy loading: optimize performance, also support for infinite scroll
  • Smart grid layout: depends on the defined content (each has different display dimension), providing best layout possible to keep the appearance well-organized
  • Various content appearance: size, color, badge, content types...
  • Responsive design: a must in nowadays web design since the number of users using mobile & tablets has increased rapidly
  • Social media feed: of course it’s essential
  • User interaction: comment, post articles... are common features

Challenges

There was a number of challenges in front of us to fulfill goals of the project. One of them was to create an innovative front page layout like Pinterest with full of customization for each node teaser (background, size, badge). Moreover, implementing infinite scroll was another obstacle. This feature would be used in different pages such as homepage and other categories pages. Therefore, it must be implemented in a reusable approach. Finally, pop-up content and showcase with different images were challenging as well.

Sites made with TB Wall

Below are some of our customers' sites made with TB Wall:

- http://www.seanreiser.com by Sean Reiser
- http://www.dosavannah.com/
- http://www.mediakraut.de/
- http://gffis.org/
- http://estiluz.com/

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 
  • Nucleus (base theme): This is a solid and flexible Drupal base theme which is developed by us ThemeBrain team. This base theme provides a smart grid system, flexible typography, advanced block styling, and other useful theming features. These features save us ton of time to develop a new sub-theme for TB Wall.
  • Views: one of the most powerful module in Drupal 7 community which provides ton of features to create dynamic and flexible pages and blocks.
  • Views Infinite Scroll: provides a pluggable pagers that enables view infinite scrolling, autopaging or endless pages. Combining this module with views page display will automatically load another page whenever the user reaches bottom of the page.
  • jQuery Masonry (JS libraries): is a JavaScript grid layout. It works by placing elements in optimal position based on available vertical space.
  • Superfish: One of the most popular modules which integrates jQuery plugin with Drupal menu to provide a user-friendly and stable drop-down menu with full of options to adjust animation, themes and other useful features.
  • Colorbox: a nice module which provide a light-weight customizable plugin for jQuery to show content in an overlay.
  • Gallery Formatter: This is a helpful module. It provides a CCK formatter for images field, which will turn any image field into a jQuery Gallery.
  • Taxonomy Menu: provide a useful feature to transform any of your taxonomy vocabularies into existing menus easily.
Community contributions: 

3 contributed modules was made back into the Drupal community:

Project team: 

As usual, our project team for creating a theme is lean, it consists of 1 css, 1 developer, 1 QA/QC (she was in charge of both job), 1 designer.
Time line: 6 weeks (Please find the diagram below)

TB Wall Project timeline diagram
TB Wall Article page screenshot
TB Wall Social Feed feature screenshot

Comments

Leave your questions/opinion below, we'll answer them all asap! :)

ThemeBrain - New generation of Drupal Theming

A new innovative UI module - TB Mega Menu

Well-- how can we get this theme :) ?

Dear 1kenthomas,

You can visit this link: http://themebrain.com/drupal-theme/tb-wall

Also for our other free & premium themes: http://themebrain.com/drupal-themes

We have a program that if you are building a website for non-profit/charity organizations, shoot us an email at help@themebrain.com; we can offer some discount or even give-aways.

ThemeBrain - New generation of Drupal Theming

A new innovative UI module - TB Mega Menu