SooperThemes Drupal Themes

The goal of our latest redesign was to create a new home for our products and customers that is both inspiring to new visitors and familiar to our 1000 existing customers. We fine-tuned our color scheme and made our site look more inviting by widening the layout and adding beautiful photography.

The website first launched in 2007 and has since used Drupal 5, Drupal 6, Ubercart, Drupal 7, and Commerce. In the past years, we learned that these e-commerce solutions took a lot of time to customize and maintain. Therefore, we simplified our site by only offering subscriptions that give the user access to download everything we have to offer. We use the Recurly module to manage e-commerce transactions, and we use roles and permissions for access control.

Drupal CMS Bootstrap distribution

We boosted our development significantly by basing it on our own Glazed theme, which includes the open source Drupal distribution, which provides the backend architecture to our theme and its content types. After running the CMS Bootstrap installation profile, all the groundwork was done. We had a fully functioning blog, contact form, WYSIWYG editor with Media library, and a portfolio module that could be used as a showcase section for client projects.

CMS Bootstrap also configures Fences, HTML5 Tools, and the Metatag module to render your website with clean and SEO optimized code.

Custom Entities and the Model Entity module

An important aspect of our site is managing domain name licenses. Customers with a subscription can create domain name licenses, so we have a record of which websites are legitimately using our designs. Domain name licenses only need 2 pieces of information: an owner and a domain name. This simplicity makes domain licenses into good candidates for using a custom entity type rather than a custom node type. While custom entities are not as easy to add as custom content types, the Model Entities module provides a template that provides a lot of important groundwork, including create/edit/storage functionality and views integration.

Data-Driven Design: A/B Testing the Hero Image

At SooperThemes we believe in conversion-oriented data-driven design. After we had picked a beautiful stock photo to serve as the hero image for our homepage, someone pointed out an article claiming that stock photos are a conversion-killer. Since stock photos are a common feature in hero sections we were skeptical but we set out to put this claim to the test. An up close and personal photo of yours truly was created for use in the homepage.

We use a machine learning algorithm for all our testing and it's currently showing a 15% lower bouncerate for the personal photo compared to the stock photo. The test data is teaching us a lesson in creative direction and web design. This is a great result but I have to admit it's very awkward looking at a large portrait of yourself each time you view your homepage. The personal photo probably adds trust to your website: personal photos are authentic and make you personally accountable for your website.

Designing and Building Pages with Glazed Theme

The visual drag and drop site-building experience in Glazed theme is not just for building static pages. It integrates with Drupal blocks and views, and it can be used to build dynamic pages and dashboards. The innovations decimate the time it takes to build small business website. This new approach lets focuses more on design, creative direction, and personalization.

10 years ago, a Drupal developer wrote a blog post called Neutered Nodes: CCK's Dark Secret. There has always been resistance to the automation of our jobs. Today, the work that has gone into CCK and, previously, flexinode, has resulted in the powerful Entity API. Development automation is what makes Drupal awesome.

The new website was designed and developed in the browser, using views and the drag and drop tools that are built into our Glazed theme. This proved to be a much more efficient workflow than designing comps in Photoshop, converting the comps to HTML/CSS templates, and then producing a custom theme to integrate all the frontend code with the Drupal backend.

Even the dashboard was created as a drag and drop page. In this page, we added a view that loaded all our designs and the premium download links that go with the designs. The view is a responsive Bootstrap 3 grid view, and it can be positioned freely within the layout of our drag and drop page. Then, we added some user blocks to the sidebar with information from the users' account. Later, the dashboard evolved with content we could easily add anywhere in the page with the drag and drop builder. Without needing a code editor, we could add documentation links, YouTube tutorials, and extra content that became available as the first clients were using our new theme. What is so powerful is the combination of drag and drop editing with the dynamic views and blocks that are provided by Drupal and available as drag and drop components.

Using Drush and Custom Scripts to Provide an Interface to Customize Our Installation Profile

Our goal with the CMS Bootstrap Distribution that backs all our products was to provide autonomous CMS features that can be used together, or separately, or plugged into any existing website. It proved to be very challenging to manage all configuration in such a way that dependencies didn't get tangled across components, but the result is a truly modular Drupal distribution. The nice thing about a 'modular' Drupal distribution is that it's totally modular. Rather than downloading everything and the kitchen sink it supports partial installation of the distribution.

Since the Drupal.org distributions repository is not yet capable of distributing custom installation profiles, we had to build our own interface. Using a set of custom shell scripts, PHP scripts, and a Drupal module, we built a tool to generate custom installation profiles based on our CMS Bootstrap distribution. This may sound complicated, but in practice, provides the simple feature of letting users click the features they want to use, and a shell script will download all module dependencies, libraries, and configuration and neatly package it in a single file:

Customize Drupal CMS Bootstrap

When a user selects the components and theme, our software checks if a cached installation profile is available. If it is not, a "Start build" button is offered and the software will start assembling dependencies in the background. In the timeframe of about a minute, the server downloads modules from Drupal.org, downloads libraries such as CKEditor and Plupload, fetches the theme of choice, and assembles an installation profile that configures this collection of modules. During installation, a fully functional website with demo content is being prepared. All blocks that come with the CMS features will be mapped to the regions in the theme of choice. This service is completely free and does not require the user to register at sooperthemes.com.

Inside Glazed Theme: Drag and Drop Elements and Frontend Architecture

Glazed Theme Demo Site

If you're launching a website today, and it's not completely mobile friendly, you're going to disappoint at least 50% of your visitors. That's why we chose to build the Glazed theme completely with and around Bootstrap 3.

Bootstrap 3 is a well-documented front-end framework that provides a clear strategy to tackle the multi-device problem. It comes with a large set of tools, helper classes, and interactive components. If you would like to learn more about the work that went into Bootstrap integration, I wrote a Tutorial that covers the modules that were used:
About Bootstrap 3 in Drupal CMS Bootstrap

While Bootstrap is the core of our frontend strategy, Glazed theme provides a lot more. The total value proposition rests on 3 pillars:

Pillar #1: Glazed Templates and Theme Settings

The theme, itself, provides many important interface components, including the header, menu, page title, etc. All these components are customizable in the theme settings form. The theme settings also provide configuration to the Bootstrap 3 layout. We set the grid system to be completely flexible, with configurable gutters and base width. We also gave the theme settings a big UX make-over, replacing form elements with sliders and switches.

Pillar #2: Our Drag and Drop Builder

Most of the development automation happens thanks to the drag and drop page builder. By having a visual, frictionless tool to author designs and content right in your website, a lot of time is saved. The drag and drop interface is activated as a field formatter and can be added on any field and on any entity. Once activated, the user can build layouts, add content, load photos from the media library, and load views and Drupal blocks at the click of a mouse. Then, all elements can be dragged across the page and organised in responsive bootstrap 3 grid layouts. There is also a sidebar that provides fully editable compound elements, such as the responsive time line and pricing tables. These elements come with their own clone-able and sortable components, which make them easy to expand and customize.

Pillar #3: Drag and Drop elements

What good is a drag and drop tool if it doesn't come with ready-made elements to drop in your page? We created a collection of elements, ranging from simple buttons to complex elements, like pricing tables and motion boxes. Here are just a few examples:

• Responsive Pricing Tables
• Motion Image Box
• Circle Counter
• Responsive Time Line
• Full Width Section
• Icon Boxes

As we developed a large amount of CSS code, we grew to appreciate a more disciplined way of coding our SASS files. We decided to take inspiration from BEM (Block__Element--Modifier) to organize our .scss files, and we customized it to our needs. This is what our code looks like:

.stpe-imagebox__figure {
  &.stpe-imagebox__figure--akan {
    .stpe-imagebox__image {
      ...
    }
    .stpe-imagebox__fig-caption {
      ...

It combines the name of the module or theme that provides the element and then uses he __Element--Modifier convention to make the code instantly understandable in both the page and the scss files.

Thank you for reading our showcase. If you haven't done so already go see our new site and let us know what you think:
http://www.sooperthemes.com/#-Drupal-Themes