"Dzl" Drupal Twitter Bootstrap Theme

Free Open Source Drupal Twitter Boostrap Theme
Services Involved: 
Rating: 
Your rating: None Average: 5 (2 votes)

"Dzl" Drupal 7 Bootstrap 3 Theme

At X Generation Network, we have been finding ourselves working on Twitter Bootstrap based Drupal 7 web sites more and more as time progresses.

We live in a fast paced, rapidly evolving digital world and the web sites and web based applications we create need to be "responsive" and adapt to any screen size they are viewed on. They also need to be rock solid for reliability and resilient to hacking attempts, something which Drupal is quite good at when configured correctly and properly updated.

Drupal and Twitter Bootstrap together can provide an incredibly powerful content management system (CMS) based responsive / adaptive web service.

In our search to find the best approach to do speedy and solid responsive web development in Drupal for our clients, we have utilized many different base themes. Some of them have been great and some of them have been challenging to deal with as the sites we build grow and have new requirements.

One of the biggest challenge in doing responsive / adaptive web development in Drupal 7 is getting Drupal's automated, non-responsive code output out of the way so we can produce clean responsive friendly output. We have found good success with some of the modules we have listed on this page, specifically some of the responsive add on modules for Views in resolving these issues when doing complex views.

Ultimately, the theme base should be as clean as possible to help relieve the issues too.

Given this desire for a "clean" base, we recently have fallen in love with "Tweme", a very clean "Ultra lightweight Bootstrap theme for Drupal" by Anton Staroverov.

After building a few web sites on Tweme, we decided what we would really like is more flexibility with the theme. Specifically, we were seeking alternative options for logo placement, increasing the navigational menu size, and enhanced region support for more complex layouts.

This lead us to "forking" the Tweme codebase and starting off on our own, producing a new theme more custom tailored to our needs and desires.

In proceeding down this path, we decided we would share our efforts to enhance the theme with the online community as we felt others would benefit from it's release.

We have also created a list of the modules we frequently use and some additional web resources we thought would be helpful to others on this page.

The theme has many regions which auto collapse to provide plenty of layout options to designers. As an example, when you do not have any blocks assigned to any of the sidebar's the main content area will fill in and take over that region of display automatically.

In a similar fashion, the top "Header" region does not display by default in "Dzl", as there are often times we do not want a jumbotron or lead in area in this region. To utilize the header section, all you need to do is place a block in the region and assign it to whatever page you desire it to show up on.

1/20/16 Update - New Year - New Fixes for Additional Support

  1. Added navigation bar CSS / LESS adjustments - placing navbar "fixed top" now pushes down logo & top region properly without overlap
  2. Added override.css file for bootstrap overrides
  3. Added IE9 graceful downgrade for Animate.css
  4. Disabled animate.css for smaller resolutions

Below is the resulting layout of the "Dzl" Theme demonstrating the available regions we felt were helpful to provide more flexibility in theme development.

Desktop / High Resolution

Tablet / Mid Resolution

Smartphone / Low Resolution

 

Much respect due to Anton Staroverov for the amazing work on Tweme!

About Us

XGeneration Network has been helping connect community and create online experiences since 1998. 

We have been very grateful to be able to work with many amazing artists, communities, universities, as well as many different diverse companies & start up's along our journey.

With experience come real world knowledge, we have watched the internet and technology grow from a new fun new cutting edge tool to becoming an almost irreplaceable part of our everyday lives, often being directly involved in that cutting edge as web innovators.

We believe in making information accessible to everyone on all devices, all of the time, enabling quick and easy access to important information from anywhere in the world. 

Our Latest Tweets

Follow Us

Twitter icon
Facebook icon