There are so many Drupal theme frameworks and opinions out there. How do you decide which is the best Drupal framework for your next project? So for your convenience, this article lists down the most popular Drupal theme frameworks used by front-end developers… and help you pick the best!

What is a Framework?

Frameworks are used to devise the sub-themes having all the latest functionality and designs. In technical language, a Framework is a universal, piece of reusable software to develop software applications, products, and solutions. Long years back, developers use to write the same code again and again for same basic things while creating web applications. Then, the question aroused why to rewrite the lengthy codes to perform the same silly tasks. So the frameworks became the new programming language to save time and increase reusability and Drupal theme frameworks are one of them. Frameworks provide minimum styling and have a great modification scope ahead.

Drupal theme frameworks are the blank canvas where all the functionality resides to provide a starting point to a theme developer. With this, general placement and formatting of basic Drupal elements become feasible. It supports different column layouts, a 12 column grid, a list of CSS utility classes, clean and simplified code and file structure, HTML5 structural markup etc.

Why use a Framework for Drupal?

By adopting a Drupal theme framework, you will have more time and energy to focus on the integrations of themes, like the future of components and much larger issues. Integrating an external framework is an excellent way not only to reduce both our technical and maintenance burdens but also give an opportunity to transform the first visual impression of Drupal. You can find free Drupal themes at Templatetoaster website maker. You may read about how to add Recaptcha in Drupal.

List of Best Drupal Theme Frameworks

There are many Drupal theme frameworks available. Here at TemplateToaster Drupal Theme Builder , some of the major frameworks are going to be covered.

1. Zen

Zen is one of the best Drupal theme frameworks. It is a modern, powerful, HTML5 based starting theme with component-based CSS. Has a lot of helpful code comments in JavaScript, PHP, HTML, CSS, and Sass. It has many wonderful features as follows

  • Zen’s default layout is responsive and mobile-first with a fluid grid system. This layout is 1,3, or 5-column grid. But one Sass variable allows you to change the number of columns as per your needs.
  • All of Zen’s CSS are reusable components. Each of these element gets its own component and CSS class names. All Zen templates show semantic HTML5 markup. Zen finally removes the field.tpl markup nightmare with fence module and directs to select the right HTML5 element.
  • Follows Drupal 8’s BEM naming convention.
  • Zen includes a KSS-based living style guide. It reveals that how your actual CSS works on your Drupal site.
  • Zen no longer uses the slower Ruby Sass/Compass toolset to build CSS. The team has developed a Gulp.js task runner. It utilizes the zippy libSass with compilations speeds.
  • Zen now includes the Gulp task runner to make things easier as a front-end developer. While developing, just type gulp watch and it will watch and compile your Sass. It also links your Sass and JavaScript for coding and syntax errors, builds your style guide. Finally, it launches BrowserSync so you can test against multiple devices at once.
  • Zen featured a new Sass plugin, Zen Grids. It is used to easily build complex responsive grid layouts.
  • Includes Normalize CSS.
  • It is a huge add-on that extremely well-documented PHP, CSS, and Sass source files are available with Zen. You’ll find best practices tips for Drupal-specific code & web development.
  • This framework offers easy swapping of the layout with a separate layout CSS/Sass file.
  • Zen uses the Drush command to create sub-themes.
  • It has built-in RTL language support.

Zen includes a full complement of ARIA roles and Sass mixins for the element-invisible styling with a Skip-link.

2. Boilerplate

The Boilerplate Drupal base theme is based on excellent HTML5 Boilerplate front-end template. It has a clean responsive design based on Panopoly distribution with heavy SASS support. It provides a 24 column adaptive fluid grid and media queries and stylesheets for mobile devices.

HTML 5 elements provide it a greater reusability for future. HTML5 elements support all the major browsers except IE. Modernizr.js fixes so that the layout elements in HTML5 are now usable in IE.

The box-sizing:border-box method allows not to include the Padding or Border in width calculations. It means if you say 100px, the width is 100px regardless the padding and border.

Three default responsive layouts are

  • <480 – iPhone.
  • 480-800 – netbooks/tablets.
  • 800 – PCs.

jQuery.Mobile Dropdown module takes the elements in any used element. Then, converts them to a drop down that moves to the top of the page. So, it automatically handles the navigation in mobiles.

It also has many features like Zen wireframing, Zen editable blocks, Zen breadcrumb. Zen wireframing is to look all the layout items on the page. Zen editable blocks are used to set the contextual links for block editing. Zen breadcrumb is to make breadcrumbs easy to handle and Console.log() to protect from IE errors. It proves to be a good Drupal theme framework.

3. Fluid Baseline Grid

This Drupal framework is completely based on HTML5 file consists of some CSS and Javascript. It provides a solid foundation to design websites with ease quickly. The FBG combines principles of fluid-column layouts, baseline grids, and mobile-first responsive design. It consists of CSS normalization, beautiful typographic standards, common browser inconsistencies etc and works efficiently as a Drupal responsive framework.

It advocates creativity with its Grid system as you can create visual rhythm and structural balance with predictable patterns. Facilitates a minimal 3-column folding grid by default. It is divided into 3 portions. Each portion is 31.333% wide with 2% wide gutters between columns. It serves as a starting point and easy to work with.

The typography of FBG improves readability and creates harmony within the text. It handles everything including measure, leading, vertical rhythm, emphasis, and scale. The primary font is Georgia that can be changed. Paragraphs are set at a 16px base with 24px line height to improve the appearance of text and readability.

Normalizing CSS helps in correcting bugs, fixing browser inconsistencies and for improving usability. The FBG code is simple, lightweight, and non-obtrusive that can be easily modified. The default is based on a 3-column folding layout. 1 column for mobile devices(G1), 2 columns for tablets(G2) and 3 columns for desktops(G3) and beyond. You can add either class=”g1″, class=”g2″ or class=”g3″ to set width of a column.

The FBG is device independent and has cross-browser compatibility.

The Fluid Baseline Grid Drupal theme framework has entered its 2.x branch for Drupal 7. It has newly added features like

  • More HTML5 tags including nav, section, and sidebars.
  • Revamped Block Regions(Total-18).
  • Added Two Sidebars First (Left) and Sidebar Second (Right).
  • More Main Menu Support.
  • Header & Footer Inline Custom Menu CSS.
  • Additional Tryptych Column Block Regions.
  • Updated to Latest Respond.js version.
  • Updated link to Jquery UI 1.8.21.
  • CSS Code Cleanup.
  • Flexslider.
  • Adaptive Image Styles.

4. Arctica

If you want an easy to manage interface for responsive layouts, to optimize the experience for mobile and tablet as well as big-screen users, you can surely go for Arctica. It also makes it place to the list of the best Drupal theme frameworks. A clean and fast base theme with modern theme development features. The features of Arctica 2.0 are as follows

  • Shortcodes support usability improvements.
  • Usability improvements.
  • Better sub-theming support, example sub-theme for every theme.
  • The new improved grid system, not using grid-inner divs anymore but a border-box layout instead.
  • Lots of small bugfixes.
  • Recommend a feature for the next release.

5. Sasson

Sasson is a powerful framework for advanced Drupal theming. It is a set of clean and simple code, lightweight structure, latest technologies. It provides many advanced tools to add these, is entirely dependent upon your choice. It’s mobile friendly with responsive, content-first layout. Media queries breakpoints are configurable. It converts Drupal’s template files to HTML5 markup & makes CSS smarter with SASS & COMPASS. Sasson includes both normalize.css and reset.css. It also has an HTML5-friendly CSS Reset. Sasson has cross-browser styling compatibility improvements and other tweaks & best practices from HTML5 Boilerplate. It works as a good Drupal7 framework. It has many features like

  • Includes Susy v2.x – a powerful, semantic layout system.
  • Automatically update your browser whenever you modify your stylesheets without a page refresh.
  • Adaptive grid to set column width and gutter width.
  • Readymade sub-themes.
  • HTML5 doctype and meta content-type.
  • WAI-ARIA accessibility roles added to the primary element.
  • Responsive menus via jqueryMobileDropdown.
  • Google web-fonts support.
  • Draggable overlay image.
  • Grid background “image”, for easy element aligning, made with CSS3 and SASS.
  • Bi-directionality support for RTL and LTR.

6. Arti

If you need a strong grid layout with powerful typography and minimalist styling on nodes, comments, and menus, then Arti is an excellent theme framework. It is a great choice out of best Drupal theme frameworks, in case you need a clean and minimal Drupal theme. And it is a responsive theme so it will look great on mobile devices too. It can be used as a Drupal 7 Framework.

All in all

A Drupal theme framework provides a skeleton to your new project is built with simplicity and ease of modification in mind. Working on a Drupal theme framework not only speeds up the workflows significantly for ‘themers’, but also enable you to focus solely on building custom layouts without worrying about the setup. So, here you can see the popular Drupal frameworks and can make a choice through a similar learning curve involved in using any framework effectively. Usually, what really works for a theme framework is to have a proper workflow, timelines, and budget. TemplateToaster, a offline website builder take care of this to provide you a complete out of the box solution with its advanced features. Building a Drupal site requires you to have some knowledge of PHP, HTML etc but TemplateToaster vanishes away this need with it’s easy to drag and drop options making the process smooth.