Blog | Howard Tyson | A Responsive Drupal theme in 50 lines of code or less Right now everyone wants a good mobile experience for their site and that is sparking discussions about what theme you can and should use to make your site accessible to the mobile world. At Zivtech, we feel that we have outgrown starter themes because we spend more time overriding than using them (especially in D7 since a lot of the great Zen stuff is baked right in). The other day I got to thinking, just what would it take to build a responsive theme for Drupal from scratch. Is it so complicated that we need systems upon systems to handle it? You probably guessed, my answer is no. Susy Grid systems have been around for quite a few years now but the advent of Sass makes them a whole new ball game. Sass is all about making CSS as terse as humanly possible, so a major feature is having simple functions that you can pass variables to (called mixins) for generating all of your CSS quickly and easily. Introducing Tony Step by step Now lets take a tour of the code: Here we set the stage.
Zen | Drupal Theme Zen is a powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Stark. This theme has fantastic online documentation and tons of helpful code comments in its PHP, HTML, CSS and Sass. At many points in my Drupal career I’ve loved, leaned on & learned from the Zen theme. The theme “Zen” turned out to be the public favorite and won the “Best Drupal Theme” title. - Award announcement for the Drupal Hall of Fame Award by Packt Publishing Zen now comes in two flavors! Documentation The Zen theme is wonderfully documented. drupal.org/documentation/theme/zen 7.x-5.x features at a glance: Note: There seems to be a conflict between some host installations of the SiteZen site builder and the Zen directory name which causes broken tabs, css files to be "not found", and other issues. Please contribute your ideas in the issue queue.
7 Steps to Building a Responsive Theme in Drupal 7 | UniMity Solutions Pvt. Ltd Steps to build your responsive drupal 7 theme 1) Understand your design and decide on the breakpoints. 2) Start with your theme info file name = RoboSmart description = A responsive mobile-first layout for a corporate site. version = VERSION core = 7.x stylesheets[all][] = css/style.css< 3) Create HTML5 pages for each unique page in your website. Based on the grid system and the nature of your design, download grids from Start with the mobile design and move the way up for all the breakpoints. Validate the outline your page generates using an outliner. 4) Segregate the styles for the different breakpoints using media queries. Multifile option: Embed your media queries in the .info file Single file option: Write media queries inline in css files media all and (min-width: 461px) and (max-width: 900px) { //embed styles here } 5) Embed viewport & other mobile/handheld device specific meta tags in the html.php.tpl file 7) Test your theme in a default Drupal installation.
Drupal Base Theme Review Lately it seems there has been a lot of activity with Drupal base themes. Old favorites are being overhauled to adapt to changing techniques and standards. New options are popping up as well, looking to solve old problems in new ways. For those that aren't familiar with base themes, the idea is pretty simple. A base theme takes care of many of the common tasks - page layouts and CSS resets, for example - that are involved in creating a Drupal theme. Theme developers and designers can then create a sub-theme that builds on top of the base theme, thus saving a whole lot of work. To put this review together, I set up a test site on my local machine and installed a sub-theme for each of the seven base themes I decided to include. I hope to update this resource from time to time, so if you know of a base theme or an important point regarding one of these themes that I've left out, please leave me a note in the comments. Zen As far as base themes go, Zen is the Big Kahuna. AdaptiveTheme Omega
Building Responsive Websites with Drupal Theming the Comment block in Drupal 7 Ever wondered how you can modify the way the default Comment block outputs the list of comments? In this article I’m going to show you how to override theme_comment_block() in order allow you to display these comments however you want. If you look into comment.module (look but don't touch), you’ll notice that the Comment block content is given by the theme_comment_block() function: function comment_block_view($delta = '') { if (user_access('access comments')) { $block['subject'] = t('Recent comments'); $block['content'] = theme('comment_block'); return $block; }} So this is what you need to override. function theme_comment_block() { $items = array(); $number = variable_get('comment_block_count', 10); foreach (comment_get_recent($number) as $comment) { $items[] = l($comment->subject, 'comment/' . ...and then make the modifications you want. So let’s break this theme function down a bit. Now, I did 2 things for my purpose. And that is pretty much it.
6 Free Responsive Themes for Drupal 7 Mobile. Are we still designing for mobile? Only? Thus i think we are moving out of this intermediate phase in which we have separate layouts for smartphones and we are rapidly going into the next one: responsive layouts that look good on any screen size. Related Articles:15 Beautiful Responsive Themes for Drupal 77 modules to help with your Drupal responsive design However, it has come to my attention that there aren’t so many free Drupal themes that respond to different screen sizes. Professional Created by Pradeep Saran, Professional is a pretty simple looking theme, much like a crisp and technical blog. It also has a nicely done drop-down menu which looks professional and a typography that draws from Google Web Fonts. And yes, it is responsive. So feel free to check it. Premium Responsive From the same creator, Pradeep Saran, comes Premium Responsive. It has a nice typography and also an attractive looking drop-down menu. So definitely check it out! FontFolio Responsive Business Skeleton
British Medical Journal - bmj.com bmj.com before Drupal Between 1998 and November 2011 bmj.com ran on an old custom made proprietary platform made up of JavaServlets and CGI based application and templating systems. It served the BMJ well but was expensive to maintain, and updating the site with new features was often difficult. In 2009 we decided to migrate bmj.com to a platform that would make it easier to adopt new cutting edge technologies and integrate more seamlessly to other services and BMJ Group product sites. We wanted a platform that allowed us to address business requirements more efficiently and add new features and functionalities quickly. After a careful analysis of leading open source content management systems, we selected Drupal 6. The challenge The BMJ’s huge online archive dates back to 1840 when the weekly print journal launched. The core team Overview of the HighWire infrastructure Project management We used Agile to manage the development of this project. Source control management Configuration management
Absolute Beginners Guide to Drupal Training Details Date: Monday, March 19, 2012 Session Time: 9:00am-6:00pm Room: 206 Breakfast and Lunch will be provided. Need more info? Check out the Training 101 page for more! Do you want to learn Drupal? Do you want to learn how to run a Drupal site professionally? Do you want to get your questions answered by Drupal experts? The Absolute Beginners Guide to Drupal is for you! The course is aimed at getting Drupal novices up to speed as quickly as possible. Who will gain the most from this course? Individuals wanting to learn Drupal best practices. What will you learn? You'll learn how to build a Drupal website, from content and user organization, to working with modules and themes. Our teaching style is entirely hands-on. Here is the class syllabus: Part 1: Introduction to Drupal: What? What will you receive during the course? Pre-requisites for the course There are no pre-requisites for this class. Class Trainer #1: Steve Burge Steve is the founder of Open Source Training.
40 Best Drupal Responsive Themes Free and Premium Built a website with Drupal CMS, each Responsive Drupal Theme has flexible design that adapts for different types of screen resolutions. The new modern drupal 7 themes are always come with fully responsive layout design to fix all screen solution and support both computer, tablets, smartphone. So this post we commit to collection best responsive drupal theme with free and premium version to help easy to find professional drupal themes for create any kind of websites for business purpose. All these templates and themes are high quality and professional that it is very useful and save you lots of time with your web design project without reinventing the wheel . There are more premium drupal themes that you can find more themes that you may like as such as themeforest.net or templatemonster.com and you also can download more free drupal themes form siteground.com Free Drupal eCommerce Theme Demo More Info Metro-Blocks – Multi-Purpose Drupal Theme Demo More Info Demo More Info Demo More Info
AT Commerce AT Commerce is fresh, professionally designed theme for eCommerce sites with baked in support for the Commerce module and Ubercart. Mobile eCommerce is supported using responsive design methods, so your online store will display and work across mobile channels without any extra work or effort. There are many settings that allow you to modify the design, color and layout - this gets you up and running quickly while allowing you to re-brand the design to your requirements without any coding. The demo is currently using the "Blue Pearl" color scheme. AT Commerce is a sub-theme - you must install Adaptivetheme 7.x-2.x to run this theme. Features include: Color Settings AT Commerce uses the color module (like Bartik and Garland). Superfish Module and Drop menus This theme supports the Superfish module. Responsive Slideshow AT Commerce has baked in support for a lightweight responsive slideshow - it works in mobile! Adaptivetheme Base Sub-theming or Simple modifications Support