Oct 13 2017
Oct 13
October 13th, 2017

Welcome to the second episode in our new video series for Emulsify. Emulsify 2.x is a new release that embodies our commitment to component-driven design within Drupal. We’ve added Composer and Drush support, as well as open-source Twig functions and many other changes to increase ease-of-use.

In this video, we’re going to teach you how to create an Emulsify 2.0 starter kit with Drush. This blog post follows the video closely, so you can skip ahead or repeat sections in the video by referring to the timestamps for each section.

PURPOSE [00:15]

This screencast will specifically cover the Emulsify Drush command. The command’s purpose is to setup a new copy of the Emulsify theme.

Note: I used the word “copy” here and not “subtheme” intentionally. This is because the subtheme of your new copy is Drupal Core’s Stable theme, NOT Emulsify.

This new copy of Emulsify will use the human-readable name that your provide, and will build the necessary structure to get you on your way to developing a custom theme.

REQUIREMENTS [00:45]

Before we dig in too deep I recommend that you have the following installed first:

  • a Drupal 8 Core installation
  • the Drush CLI command at least major version 8
  • Node.js preferably the latest stable version
  • a working copy of the Emulsify demo theme 2.X or greater

If you haven’t already watched the Emulsify 2.0 composer install presentation, please stop this video and go watch that one.

Note: If you aren’t already using Drush 9 you should consider upgrading as soon as possible because the next minor version release of Drupal Core 8.4.0 is only going to work with Drush 9 or greater.

RECOMMENDATIONS [01:33]

We recommend that you use PHP7 or greater as you get some massive performance improvements for a very little amount of work.

We also recommend that you use composer to install Drupal and Emulsify. In fact, if you didn’t use Composer to install Emulsify—or at least run Composer install inside of Emulsify—you will get errors. You will also notice errors if npm install failed on the Emulsify demo theme installation.

AGENDA [02:06]

Now that we have everything setup and ready to go, this presentation will first discuss the theory behind the Drush script. Then we will show what you should expect if the installation was successful. After that I will give you some links to additional resources.

BACKGROUND [02:25]

The general idea of the command is that it creates a new theme from Emulsify’s files but is actually based on Drupal Core’s Stable theme. Once you have run the command, the demo Emulsify theme is no longer required and you can uninstall it from your Drupal codebase.

WHEN, WHERE, and WHY? [02:44]

WHEN: You should run this command before writing any custom code but after your Drupal 8 site is working and Emulsify has been installed (via Composer).

WHERE: You should run the command from the Drupal root or use a Drush alias.

WHY: Why you should NOT edit the Emulsify theme’s files. If you installed Emulsify the recommended way (via Composer), next time you run composer update ALL of your custom code changes will be wiped out. If this happens I really hope you are using version control.

HOW TO USE THE COMMAND? [03:24]

Arguments:

Well first it requires a single argument, the human-readable name. This name can contain spaces and capital letters.

Options:

The command has defaults set for options that you can override.

This first is the theme description which will appear within Drupal and in your .info file.

The second is the machine-name; this is the option that allows you to pick the directory name and the machine name as it appears within Drupal.

The third option is the path; this is the path that your theme will be installed to, it defaults to “themes/custom” but if you don’t like that you can change it to any directory relative to your web root.

Fourth and final option is the slim option. This allows advanced users who don’t need demo content or don’t want anything but the bare minimum required to create a new theme.

Note:

Only the human_readable_name is required, options don’t have to appear in any order, don’t have to appear at all, or you can only pass one if you just want to change one of the defaults.

SUCCESS [04:52]

If your new theme was successfully created you should see the successful output message. In the example below I used the slim option because it is a bit faster to run but again this is an option and is NOT required.

The success message contains information you may find helpful, including the name of the theme that was created, the path where it was installed, and the next required step for setup.

THEME SETUP [05:25]

Setting up your custom theme. Navigate to your custom theme on the command line. Type the yarn and watch as pattern lab is downloaded and installed. If the installation was successful you should see a pattern lab successful message and your theme should now be visible within Drupal.

COMPILING YOUR STYLE GUIDE [05:51]

Now that we have pattern lab successfully installed and you committed it to you version control system, you are probably eager to use it. Emulsify uses npm scripts to setup a local pattern lab instance for display of your style guide.

The script you are interested in is yarn start. Run this command for all of your local development. You do NOT have to have a working Drupal installation at this point to do development on your components.

If you need a designer who isn’t familiar with Drupal to make some tweaks, you will only have to give them your code base, have them use yarn to install, and yarn start to see your style guide.

It is however recommended the initial setup of your components is done by someone with background knowledge of Drupal templates and themes as the variables passed to each component will be different for each Drupal template.

For more information on components and templates keep an eye out for our soon to come demo components and screencasts on building components.

VIEWING YOUR STYLE GUIDE [07:05]

Now that you have run yarn start you can open your browser and navigate to the localhost URL that appears in your console. If you get an error here you might already have something running on port 3000. If you need to cancel this script hit control + c.

ADDITIONAL RESOURCES [07:24]

Thank you for watching today’s screencast, we hope you found this presentation informative and enjoy working with Emulsify 2.0. If you would like to search for some additional resources you can go to emulsify.info or github.com/fourkitchens/emulsify.

[embedded content]

Thanks for following our Emulsify 2.x tutorials. Miss a post? Read the full series is here.

Pt 1: Installing Emulsify | Pt 2: Creating your Emulsify 2.0 Starter Kit with Drush | Pt 3: BEM Twig Function | Pt 4: DRY Twig Approach | Pt 5: Building a Full Site Header in Drupal

Just need the videos? Watch them all on our channel.

Download Emulsify

Web Chef Chris Martin
Chris Martin

Chris Martin is a support engineer at Four Kitchens. When not maintaining websites he can be found building drones, computers, robots, and occasionally traveling to China.

May 24 2017
May 24
May 24th, 2017

In the last post, we introduced Emulsify and spoke a little about the history that went into its creation. In this post, we will walk through the basics of Emulsify to get you building lovely, organized components automatically added to Pattern Lab.

Prototyping

Emulsify is at its most basic level a prototyping tool. Assuming you’ve met the requirements and have installed Emulsify, running the tool is as simple as navigating to the directory and running `npm start`. This task takes care of building your Pattern Lab website, compiling Sass to minified CSS, linting and minifying JavaScript.

Also, this single command will start a watch task and open your Pattern Lab instance automatically in a browser. So now when you save a file, it will run the appropriate task and refresh the browser to show your latest changes. In other words, it is an end-to-end prototyping tool meant to allow a developer to start creating components quickly with a solid backbone of automation.

Component-Based Theming

Emulsify, like Pattern Lab, expects the developer to use a component-based building approach. This approach is elegantly simple: write your DRY components, including your Sass and JavaScript, in a single directory. Automation takes care of the Sass compilation to a single CSS file and JavaScript to a single JavaScript file for viewing functionality in Pattern Lab.

Because Emulsify leverages the Twig templating engine, you can build each component HTML(Twig) file and then use the Twig functions include, embed and extends to combine components into full-scale layouts. Sound confusing? No need to worry—there are multiple examples pre-built in Emulsify. Let’s take a look at one below.

Simple Accordion

Below is a simple but common user experience—the accordion. Let’s look at the markup for a single FAQ accordion item component:

<dt class="accordion-item__term">What is Emulsify?</dt>
<dd class="accordion-item__def">A Pattern Lab prototyping tool and Drupal 8 base theme.</dd>

If you look in the components/_patterns/02-molecules/accordion-item directory, you’ll find this Twig file as well as the CSS and JavaScript files that provide the default styling and open/close functionality respectively. (You’ll also see a YAML file, which is used to provide data for the component in Pattern Lab.)

But an accordion typically has multiple items, and HTML definitions should have a dl wrapper, right? Let’s take a look at the emulsify/components/_patterns/03-organisms/accordion/accordion.twig markup:

<dl class="accordion-item">
  {% for listItem in listItems.four %}
    {% include "@molecules/accordion-item/accordion-item.twig"
      with {
        "accordion_item": listItem.headline.short,
        "accordion_def": listItem.excerpt.long
      }
    %}
  {% endfor %}
</dl>

Here you can see that the only HTML added is the dl wrapper. Inside of that, we have a Twig for loop that will loop through our list items and for each one include our single accordion item component above. The rest of the component syntax is Pattern Lab specific (e.g., listItems, headline.short, excerpt.long).

Conclusion

If you are following along in your own local Emulsify installation, you can view this accordion in action inside your Pattern Lab installation. With this example, we’ve introduced not only the basics of component-based theming, but we’ve also seen an example of inheriting templates using the Twig include function. Using this example as well as the other pre-built components in Emulsify, we have what we need to start prototyping!

In the next article, we’ll dive into how to implement Emulsify as a Drupal 8 theme and start building a component-based Drupal 8 project. You can also view a recording of a webinar we made in March. Until then, see you next week!

Recommended Posts

  • Webinar presented by Brian Lewis and Evan Willhite 15-March-2017, 1pm-2pm CDT Modern web applications are not built of pages, but are better thought of as a collection of components, assembled…
  • Welcome to the final post of our frontend miniseries on style guides! In this installment, the Web Chefs talk through how we chose Pattern Lab over KSS Node for Four…
  • Shared Principles There is no question that the frontend space has exploded in the past decade, having gone from the seemingly novice aspect of web development to a first-class specialization.…
Evan Willhite
Evan Willhite

Evan Willhite is a frontend engineer at Four Kitchens who thrives on creating delightful digital experiences for users, clients, and fellow engineers. He enjoys running, hot chicken, playing music, and being a homebody with his family.

Development

Blog posts about backend engineering, frontend code work, programming tricks and tips, systems architecture, apps, APIs, microservices, and the technical side of Four Kitchens.

Read more Development
May 17 2017
May 17
May 17th, 2017

Shared Principles

There is no question that the frontend space has exploded in the past decade, having gone from the seemingly novice aspect of web development to a first-class specialization. At the smaller agency level, being a frontend engineer typically involves a balancing act between a general knowledge of web development and keeping up with frontend best practices. This makes it all the more important for agency frontend teams to take a step back and determine some shared principles. We at Four Kitchens did this through late last summer and into fall, and here’s what we came up with. A system working from shared principles must be:

1. Backend Agnostic

Even within Four Kitchens, we build websites and applications using a variety of backend languages and database structures, and this is only a microcosm of the massive diversity in modern web development. Our frontend team strives to choose and build tools that are portable between backend systems. Not only is this a smart goal internally but it’s also an important deliverable for our clients as well.

2. Modular

It seems to me the frontend community has spent the past few years trying to find ways to incorporate best practices that have a rich history in backend programming languages. We’ve realized we, too, need to be able to build code structures that can scale without brittleness or bloat. For this reason, the Four Kitchens frontend team has rallied around component-based theming and approaches like BEM syntax. Put simply, we want the UI pieces we build to be as portable as the structure itself: flexible, removable, DRY.

3. Easy to Learn

Because we are aiming to build tools that aren’t married to backend systems and are modular, this in turn should make them much more approachable. We want to build tools that help a frontend engineer who works in any language to quickly build logically organized component-based prototypes quickly and with little ramp-up.

4. Open Source

Four Kitchens has been devoted to the culture of open-source software from the beginning, and we as a frontend team want to continue that commitment by leveraging and building tools that do the same.

Introducing Emulsify

Knowing all this, we are proud to introduce Emulsify—a Pattern Lab prototyping tool and Drupal 8 starterkit theme. Wait… Drupal 8 starterkit you say? What happened to backend agnostic? Well, we still build a lot in Drupal, and the overhead of it being a starterkit theme is tiny and unintrusive to the prototyping process. More on this in the next post.
[NB: Check back next week for our next Emulsify post!]

With these shared values, we knew we had enough of a foundation to build a tool that would both hold us accountable to these values and help instill them as we grow and onboard new developers. We also are excited about the flexibility that this opens up in our process by having a prototyping tool that allows any frontend engineer with knowledge in any backend system (or none) to focus on building a great UI for a project.

Next in the series, we’ll go through the basics of Emulsify and explain its out-of-the-box strengths that will get you prototyping in Pattern Lab and/or creating a Drupal 8 theme quickly.

Recommended Posts

Evan Willhite
Evan Willhite

Evan Willhite is a frontend engineer at Four Kitchens who thrives on creating delightful digital experiences for users, clients, and fellow engineers. He enjoys running, hot chicken, playing music, and being a homebody with his family.

Development

Blog posts about backend engineering, frontend code work, programming tricks and tips, systems architecture, apps, APIs, microservices, and the technical side of Four Kitchens.

Read more Development
Jan 11 2014
Jan 11

Building scalable IT system for delivery from US to Russia: Drupal, Symfony2 and Yii2 compared

I was not posting to the blog for a long time, and finally it’s time to share my…

Drupal 7 vs Symfony 2: overview after 1 year of Symfony development

We've decided to switch to Symfony2 development in July 2012, if I'm not mistaken - after 7 years of…

Aug 08 2012
Aug 08

Arbor Web Development is pleased to annouce the Barron 2.0 release for Drupal 6. We have made a ton of bug fixes, and added some new features to the theme in preparation for a Barron Drupal 7 release sometime in the near future.

The Barron theme was released by jwolf on Jan. 14th 2007. He recently gave the project to me, sk33lz, to maintain, and as I promised him, I have squashed all the existing bugs in the 6.x-1.0 release. I have even gone a step further and added some new block regions for the 2.x branch, which currently include a Tryptych block region below the Content Bottom block region. The new Tryptych block region is actually 3 new block regions next to each other broken down into thirds. That seems to be the type of block regions that site owners are looking for these days, so plan to see additional Tryptych block regions added to Barron to give more flexibilty to site owners.

The 2.0 release has already come and gone actually. I jumped the gun again in my excitement to release the theme, and forgot that the Barroness sub-theme had to be updated with the new 2.0 changes as well. After those were added to Barroness, a Barron 2.1 version was released, but shortly after that I noticed a problem with some additional CSS I had added in the 2.0 release that had to be fixed before I wrote this post. So, currently the offical release is Barron 6.x-2.2.

There are some additional feature requests from the Barron issue queue that I will be adding later on to the 2.x branch including RTL support, and better support for screen readers and other accessibility tools. Those will probably be added in the 6.x-2.3 release.

Download Baron 2.x Today!

Enjoy!

Aug 02 2012
Aug 02

A while back, we started hearing a lot of buzz about responsive Drupal themes and responsive grid layouts. At first we dove right in and found that there are a ton of different approaches to the concept, but none were as simple as we found with the Fluid Baseline Grid framework. We decided to release a Drupal 6 theme for Fluid Baseline Grid, which then led to a Drupal 7 release due to popular demand. We are please to announce a new Drupal Fluid Baseline Grid 2.0 theme today, which has many new features and fixes.

The Fluid Baseline Grid framework, out of the box, is an HTML file with some CSS and Javascript to help Normalize your styles across different devices, screen widths, and browsers. The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. Essentially, it should work on any device, and render a nice layout depending on what the screen width is of that visitor.

Our intial 1.x release of Fluid Baseline Grid, FBG, was more of a proof of concept than anything else, but we had some great feedback from the Drupal community in the FBG issue queue, which led us to do a major overhaul of the default template for version 2.x. The main addition to the 2.x branch are the sidebar block regions.

Some of the new features for Fluid Baseline Grid 2.x include:

  • Header & Footer block regions.
  • Sidebar First (Left) & Sidebar Second (Right) block regions.
  • Additional Tryptych Column block regions.
  • Overall 18 custom block regions total now!
  • Updated Respond.js library.
  • Updated Jquery UI library.
  • Some code cleanup.

The full list of Fluid Baseline Grid block regions as of 7.x-2.0 are:

  • Header
  • Highlighted
  • Branding
  • Tryptych Top Column 1
  • Tryptych Top Column 2
  • Tryptych Top Column 3
  • Highlighted 2
  • Branding 2
  • Content Top
  • Content
  • Content Bottom
  • Sidebar First (Left Sidebar)
  • Sidebar Second (Right Sidebar)
  • Tryptych Bottom Column 1
  • Tryptych Bottom Column 2
  • Tryptych Bottom Column 3
  • Footer
  • Footer Message

We feel that this update should solidify FBG as a goto responsive theme as it is easy to customize with your own CSS, and page templates. You could even follow the simple example on our Project page to create your own Fluid Baseline Grid Drupal theme that is totally custom. The possibilities are endlesss!

Just an FYI, we have yet to back-port the changes we made to the 7.x version, so stay tuned for a 6.x release soon!

We look forward to more new suggestions and hopefully less issues in the 2.x branch. Let us know if you have any specific requests or need paid support for FBG. Enjoy!

*Update 8/2/12 - It felt naked without Main Menu support, so we have released a new update, Fluid Baseline Grid 7.x-2.1, that adds Main Menu support and Custom Inline Menu support to the Header and Footer block regions.

Jul 30 2012
Jul 30

Our most popular Drupal theme, Alpine, has been hovering around the 1000 sites installed mark for a few months, but it hasn't quite broken the 1000 site threshold yet. It seems as though the 1.x branch as it was has reached it's peak. One of the additional features that we were looking to add to Alpine in the future were additional block regions. We have gone ahead and added a new Tryptych block region to the theme, which actually adds 3 new block regions below the Content Bottom region, and above the Footer region. These new block regions can extend the functionality of Alpine without interfering with your current content.

We figured that these new block regions might peak some new interest and hopefully push Alpine over the 1000 site threshold. Alpine now has 11 custom block regions for you to place your content. Since this is a fairly large change to the theme, and we made some additional changes, we have gone ahead and released our first 2.x branch for any of our themes. Alpine 2.0 is now available for download on Drupal.org.

Here is a list of the available custom block regions available for 2.x:

  • Header Content
  • Search Box
  • Left Sidebar
  • Content Top
  • Highlighted
  • Content
  • Content Bottom
  • Tryptych Column 1
  • Tryptych Column 2
  • Tryptych Column 3
  • Footer

Along with the additional block regions, we have also cleaned up some code, and minimized the size of the header image being used by converting it to a GIF instead of  PNG. Overall the image still looks fine, but has lost some of it's original definition. We were looking to try and speed up load times given some issues we had in the issue queue by Alpine theme users, and figured that the slight reduction in image quality was worth it.

We messed up a little bit on the 6.x port, and forgot to include the new header.gif image that we changed from a PNG file to save on some file size. Because of that little woops, we have a 6.x-2.1 release available.

We plan on adding additional block regions down the road in the the 2.x release along with possibly adding in some new color variations instead of just green. Stay tuned to the project page on Drupal.org for the latest releases, and feel free to create an issue for features you would like to see in future releases of Alpine, or any bugs and other issues that you find.

Thanks to all the sites that have made Alpine a successful theme project for us, and we look forward to continuing to making a better theme for you as we go. Make sure to check out our other Drupal themes including our new and improved Responsive Drupal theme, Fluid Baseline Grid 2.0.

Jan 13 2012
Jan 13

We are now developing big Drupal 7 project where users have profiles with lots of fields.
They also have a node tied to them ("My story") which is created during registration.

Initially, these were "edit my profile" and "edit my story" links which were leading to a huge forms where user was scared by amount of elements.

And that is the result of UI improvements:
Modal 1

and after clicking "Edit" near "Hobby" item...
Modal 1

So, basically, user has separate small form for photo upload, separate form for about field, and separate form for small details.

I can tell you that filling in the profile in this way feels more natural, and is much more easy and convenient . And another cool thing is that all form validation errors appear without form reload, via ajax - and you don't have to do anything to achieve that - you just need to add "use-ajax-submit" class to form submit button! To avoid misunderstanding: ajax submit is the core functionality of Drupal 7, not directly related to modal forms, but it really shines when used with them!

Research

When we realized that we need some sort of dialogs, I decided to use Colorbox module since it provides similar user experience.
But after some evaluation I realized that forms integration is not working in the right way in Colorbox. (That's also what the project page says: "The attempt to support opening various forms in a Colorbox was in hindsight never a good idea. It will most likely be completely removed from the module. Form error handling and form redirects are complicated, a lot of code would be needed to do it correctly.") - it suggests to use Modal Forms module instead.

After some issue queues reading it was clear to me that ctools dialogs are not so mature as jquery.ui.dialogs library which is included (surprise, huh?) in Drupal 7 core.
After more research I found "PHP API" for jQuery dialogs - Dialog API module.
Interesting thing is that Dialog API project page mentions CTools, too - but I couldn't find any code that uses CTools in dialog module (tell me if you find it).

So, I decided to use Dialog API module in this project. It's not very stable so I had to apply some patches from issue queue to make example modules work.

Implementation

The basic idea of making some form appear in ajax is that we create new menu item (using hook_menu) which is "ajax-aware" menu item, and then create a special link to that menu item.
So, you need your own module, and you need to know how forms are working in Drupal, to create something interesting.

Example:
Let's imagine that we want to open part of node edit form (e.g. only node body field) in dialog.

Here is the demo (I've allowed anonymous to use the link):
http://analytic7.pixeljets.com/node/11

So, in our module, we write:

Jan 11 2012
Jan 11

January 11th, 2012

1. Display Suite
DS lets you customize the output of nodes and their content fields without having to modify template files. Even clients can drag and drop fields and change how they display and are formatted. If only life were this easy!

Ben – Best thing that happened to Drupal since CCK.
Brandon – More ‘Drupal-way’ than panels.
Trent – With the pulling the node and view layout changes out of the template files, we are able to make changes to sites without having to have your desktop or laptop on hand, making Drupal content layout almost completely editable on a mobile device like an iPad or phone.
John – Powerful and versatile, and very intuitive. It’s easy for a developer to incorporate it into their workflow, and before long it’ll look like the solution to almost any problem.
Shea – Powerful and exportable. Something every developer needs.

Display Suite

2. Views 3
Views is a dynamic tool for building queries that display tables and lists of data. The third version has some amazing new abilities and enhanced user interface features.

Ben – The backbone of any Drupal site. More useful then 50% of core modules.
Brandon – They took what makes Drupal good (views 2), and made it better.
Johannes – One of the most essential contributed modules got a major upgrade!
Shea – You simply do not use Drupal without using views. If this isn’t the most useful module out there I don’t know what is.

3. Context 3
Context 3 lets you control conditions and reactions for different sections of a site like displaying a certain block on all nodes of a certain type or hiding a block when a menu or view is active. It saves developers from writing custom hooks and the interface is straight forward so the clients can use it too.

Johannes – Like Views it’s one of the modules we use on all projects for its awesomeness. Happy to see a major release last year.
Shea – Context brings logic and sense to Drupal. It is what is missing in the default blocks system.

4. Omega
Instead of creating a new theme from scratch or maintaining a custom in-house theme for a new project ImageX Media started using this theme as a base for our client themes.

Ben – Great starting theme with responsive abilities backed in. Makes theming fun even for coders.
Brandon – There is also Plink. The strength of Omega is really Delta, see Delta below.
Johannes – My highlights are that it comes out of the box with a responsive grid layout and it’s HTML 5 compliant. The maintainers put a lot of work into this over 2011.
Trent – The way Omega handles regions has been one of the greatest powers I have come to love about the theme. Being able to add a bunch of regions to the .info file, then using the theme settings to place them in what section of the page you need, then being able to change it on a specific page with Delta, the Omega helper module, is awesome. Omega and Display Suite bring the goals of a CMS to the forefront. Manage the content and layout from the administration back end, while staying exportable. Excellence.
John – Great for getting a responsive design up and running quickly.
Shea – Omega + Delta gives amazing flexibility to developers and administrators through the website UI. The work done to not only provide customizable layouts but responsive themes is impressive.

Omega Theme

5. Delta
Delta allows you, via the Context module to make duplicates of your theme settings for any context on your site. This gives you the ability for alternative layouts as a reaction in Context.

Ben – In combination with Omega a great set of tools to create theme and layout variations.
Brandon – Delta is no longer Omega-only. Extended to all themes and works extremely well together with Context.
Trent – Took a bit to get used to the concept, now I am not looking back. Layouts, grid settings, region placement and more can be set on a per Context basis.
“Shea” – Delta is to Omega as Views is to Drupal

6. Workbench
One of Drupal’s big learning curves is when you teach a content editor to ‘ignore’ all the technical stuff they get forced to see. It can be overwhelming. So Workbench tries to create a tailored interface just for content editors. Then it adds a permissions structure for editing content that matches the organizations structure. And finally Workbench tries to enable a customizable editorial workflow for moderating and publishing content.

Ben – A lot of potential but still not fully ironed out IMHO.
Johannes – It is not a complete solution, but it’s a great start to make the Drupal content editor experience much better than default.
Shea – A starting base for workflows and moderation. There is still much work needed in this module but it is probably the best choice out there for what it does.

7. CCL
The Custom Contextual Links module allows you to add your own links to the contextual drop down widgets of blocks and nodes. Drupal comes by default with contextual links and until now you would have to do some custom coding to customize this. This module gives you a nice UI to make your changes and doesn’t require PHP coding skills.

Ben – I created the CCL module to make it possible to add your own links to the contextual links widgets in Drupal 7
Shea – A somewhat unknown module that provides a simple but extremely useful bit of functionality.

8. Media
Drupal has had a tough time when it comes to managing files and media ‘assets’. Anything from ‘where do you store a file that’s referenced from the database’, ‘how do you control permissions on those files’, ‘what do you do with the file if the node it was attached to gets deleted’ and (not lastly) ‘how come I can’t reference the same file in multiple nodes’. The Media module is the latest attempt at integrating files and media in an easy to use way that makes sense to everyone. In the latest release, Media allows users to attach fields to files as you would to nodes, link to remote assets like YouTube, drag and drop upload, and even integrates with the WYSIWYG module.

Ben – Equal amount of joy and pain.
Brandon – This is awesome, disregard above. Very easy to use, Media library reduces duplicate file uploads.
Shea – I love to hate it. I want everything it has to offer but immediately want to ditch it when it starts throwing up problems. Still in its infancy stage it has the promise to be an amazing addition to Drupal. The problem is that it doesn’t always work.

9. Field Group
Field Group lets you group fields together. Great solution if you want to make horizontal tabs.

Ben – Works great in combination with DS.
Brandon – Should be in core, too key
Trent – Using Field Groups with Display Suite has become the standard for content layout. Being able to setup tabbed content, or just group content sections on a page without having to build a custom block for the styles has made this a must enable for me.
Shea – Useful for organizing fields. Handy but not a necessity.

Field Group

10. Backup and Migrate
A simple module that lets you backup the database and files, stores them on the server, lets you download so you can upload to another site or just keep warm under your pillow. This is a quick and easy way to avoid ruining a site when you want to try something new or just to keep a copy of the important stuff. Never leave home without it!

Johannes – Over the last year, we fell more and more in love with this module and it’s one of the first modules I’ll install for any projects. Besides the features described above it has also has a nice module to integrate with Dropbox.
Shea – Backup and Migrate + Amazon S3 simple storage account rules. Fast, effective, and stable backups that are extremely portable make your site recoverable and speed up the local development to development environment syncing.

Dec 19 2011
Dec 19

After being introduced to the concept of responsive web theming, I took to it like a duck in water. I was pleased with the well documented contributed Drupal base theme, Omega based on the 960.gs grid. This amazing framework provides a plethora amount of configurable options, scalability and an overall sense of structure. I will not be covering any technical space-talk or how to configure Omega in this blog. If you would like to learn more about Omega, please visit the following site for more information: http://omega.developmentgeeks.com.

After starting to dig my little themer fingers into the nuts and bolts of creating an Omega sub-theme and seeing what was possible, I noticed that I was starting to tweak this and changing that. After a while, my own little Jiminy Cricket starting saying: "Just because you can, does not mean you should." So I started to re-evaluating how I approached responsive Drupal theming.

I started asking myself pro-active questions and was pleased to know that many had an answer, it just took a little thought. Below are some general concepts that I ask myself on a regular basis when designing a responsive Drupal theme. They are designed to keep my creative brain in check, my coding fever at bay, and ultimately give our clients and their users what they need.

Purpose - To respond to specific devices or is it just for fun?

The scope of your responsive Drupal theme should encompass your target screen widths. Yes, while it IS fun to resize your browser on the largest available screen to see this super awesome functionally take place right before your very eyes, ultimately there needs to be a little more thought into what is actually taking place.

The actual purpose of a responsive Drupal theme is to ensure that your site displays as close to "natively" possible for the device that is requesting it. This means that your site’s text, graphics and layout should display the most optimal viewing experience without requiring additional input from the user (ie: such as pinch-zooming or double tapping on an iPhone to enlarge the site).

Usability - Think inside the grid please!

Do not assume that everything has to look "exactly the same", regardless of how wide your site is. Know what your users are looking for. Keep in mind the context in which they are browser your site.

Users that are browsing on smart-phones generally are looking for specific information and usually arrive at a site from one of two methods: either they typed in the URL directly or they initiated a web search where they typed in their search terms. In either case, they already did their typing. It can be somewhat unpleasant to the user viewing your site if there’s a giant search box taking an eighth of your site’s real-estate at the top. Instead offer a smaller search icon that they can tap that will show the input box, as needed.

Design - To show, hide, increase or decrease... that is the question.

You will undoubtedly be designing your responsive Drupal theme on a large screen and not on mobile phone. This is where you want to resize your browser window.

On the wider version of your site, padding and margins are often much larger. On the narrow or mobile side, try to reduce unnecessary white space as it just makes the user have to scroll more. Decrease font-sizes and images to fit within the given grid and at hand to eye reading level (you will probably need to test this on devices to be sure). Overall, just take a mental note of the transition of elements and CSS changes between the different widths your site can be displayed.

You will surely encounter a few issues from time to time where things don’t quite go as expected. Use this process to debug your theme and see what (if any) JavaScript needs to be implemented to help further your overall user experience.

Performance - May I have a smaller image please?

What images are being delivered to the user and how big are they?? There is an awesome Drupal module named Adaptive Image based on http://adaptive-images.com/ by Matt Wilcox. It works in conjunction with your theme and is more of an "under the hood" module that needs little configuration. Nonetheless, it gives your Drupal site the ability to display device appropriate image sizes. This is useful for smart-phones that may be viewing your site using cellular data and will help increase your site’s load time.

Overview

Hopefully this has given you some thought about how taking just a little time to think about what you are actually trying to accomplish with your responsive Drupal theme will benefit you in the long run.


Get Drupal help when you need it most! Find hundreds of great tutorials. Track, rate, comment and more. Create Account
Jul 15 2011
Jul 15

Recently, I blogged about Drupal's plans to integrate HTML5 into its next release. However, version 8 of Drupal is at least a year away. What's a Drupal dev to do, if they want to start using HTML5 right now? There are a variety of tools and techniques. Let's look at them.

Drupal 6 or Drupal 7 – Does it matter?

In a word, “no”. In fact, if all you want to do is use HTML5 elements on your website, you don't really need to use the Drupal tools – themes and modules – to use HTML5 on your site. All you need to do is change the doctype in your theme's page.tpl.php file from:

to

html.

Simple, eh? You can now use HTML5 tags like “<video>”, “<audio>”, “<canvas>”, etc., on your pages. For a full list of HTML5 tags and their browser compatibility see: http://caniuse.com/#cats=HTML5. If you are a more visual person, you might prefer this interactive graph by HTML5's Superman, Paul Irish.

Modernizr

Better yet, use Irish's modernizr, “an open source, MIT-licensed JavaScript library that detects (browser) support for many HTML5 & CSS3 features” (http://diveintohtml5.org/detect.html). There's a module, available for both Drupal 6 and 7. If you prefer, you can build your own modernizr script, choosing just the elements you want to use to keep your script small, download your customized library, and add it to the head of your theme's page template files with:

<script src="http://civicactions.com/blog/2011/jul/15/using_html5_with_drupal_today/(path-to)modernizr.min.js"></script>

In Drupal 6, this would be page.tpl.php and in Drupal 7, html.tpl.php. Read the full instructions here.

HTML5 Sectioning Flowchart

Semantic Elements

If you want to use HTML5 semantic elements, you do not necessarily need an HTML5 theme. You can manually replace the CSS “divs” you want to change, in your various template files, with their corresponding HTML5 elements: “<div id=”header”>” with “<header>”, “div id=”main”>” with “<section id=”main”>”, etc. Each theme will likely vary slightly, in how it implements HTML5 semantic elements. If you compare the two Drupal 6 themes, HTML5 Base and Boron, for example, you'll see that Boron turns each “block” into a “section” while HTML5 Base leaves “block” elements as “blocks”. See the handy flowchart from HTML5doctor.com, and this excellent post, also from HTML5doctor.com, for instructions on how and where to use the new semantic elements. For a more indepth discussion of HTML5 semantic elements, see http://diveintohtml5.org/semantics.

HTML5 Shiv or Shim

Last in the process of adapting your own theme for HTML5 is linking to Remy Sharp's HTML5 enabling script. What this does is get Internet Explorer to recognize HTML5 elements. All you need to do is put the following in your “<head>” element:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Tada! You've rolled your own HTML5 theme!

Once you are done, check your work via the HTML5 Outliner.

Drupal HTML5 Themes

There are many good HTML5 Drupal themes that, with the exception of implementing modernizr, have done all of the above work for you. If you want to reap the benefits of Open Source community work, use one of them – and apply the time you save bettering it, or working on some of the many modules in development for HTML5.

Currently, there are almost 600 themes for Drupal 6, and almost 200 for Drupal 7. Of these, for Drupal 6, 17 reference “HTML5”, and for Drupal 7, 20. Almost all of the HTML5-referencing themes are starter themes; that is, they are not designed to be used as is, but as bases from which to build your own theme.

Drupal 7 Themes

The most popular Drupal 7 HTML5 theme is Sky. I suspect it is most popular because it's been around, in one form or another, since 2007. I'm not saying it's not a good theme! I've used it, for Drupal 6. It's clean, attractive and can be used as is, or as a base them. It's currently maintained by the Drupal HTML5 initiative leader, Jacine.

The second most popular is AdaptiveTheme (as of today, Thursday, July 7, 2011 – yesterday, the second most popular was Omega), which, despite the name, does not in fact, appear to be “adaptive”. “Adaptive” or “responsive”, in regard to web sites, generally refers to the use of CSS3 media queries to assign different stylesheets for different sized viewports and devices. Version 7.x.2.x of AdaptiveTheme, according to this page, will incorporate media queries, but until then, there is no AdaptiveTheme Mobile sub-theme for Drupal 7. If you want to use media queries, nothing is stopping you from adding them yourself. AdaptiveTheme includes features: rounded corners settings, RDFa and microformat compatibility, “Gpanels which are drop in snippets for creating multi-column layouts (such as a 5 column footer)”, and optional settings for things like: adding “extra CSS class names via theme settings” and “SPAN elements to menu anchor text”.

Media Queries

For an excellent tutorial on media queries, see this Web Designer Wall post. Here's a simplified example of media queries in action, from another Web Designer Wall tutorial, and here's a fine collection of sites using media queries. Oh, and here's the anti-media-queries argument; namely, that media queries do not strip out large images and scripts, thus rendering your web site too large and slow for mobile devices. The answer to that, however, is to use a bit of Ye Olde Javascript.

Framework simply uses HTML5 structural markup, while Genesis is only HTML5 friendly in the latest development version.

The now fifth most popular, Omega, is interesting. Firstly, it is an “adaptive” or “responsive” theme using media queries. Secondly, it integrates with a module, “Delta, originally designed to only work with it, that, in concert with another module, Context, allows you to use “different layouts/settings for various portions of a site”. Lastly, another module, like Delta, originally designed for use only with Omega, Omega Tools, allows you to quickly develop a sub-theme using Drush. Omega is rather large: 1.1MB! You could probably throw out all but the base folder and/or a starter kit, bringing the size down to about 350K, however.

Gamma and Beta are both Omega sub-themes.

Boron is a minimalist theme based on the popular Zen. Boron also comes in a Boron for Zen flavour. Boron for Zen is only for Drupal 6.

Panels 960gs (HTML5), Zentropy and MinimalistTheme are all Boron-based. Panels 960gs incorporates the 960 Grid System and Panels module. Zentropy is based on Paul Irish's HTML5 Boilerplate, meaning it is optimized for performance and mobile, among other things you can find out about here.

LayoutStudio's HTML5 version is in process, while HTML5 Base, a promising theme by Drupal 7 base theme designer, Jen Simmons, is still only available in a development version.

Plink, like HTML5 Base, looks interesting but is still only available in a development version. Plink comes with media queries, modernizr, “baked in” LESS and a “jQuery Mobile default sub theme for use in mobile switching”.

Drupal 6 Themes

If you want to take advantage of the almost 6000 modules that exist for Drupal 6, you might want to forego Drupal 7 for now. Though it appears that there are 17 HTML5 themes for Drupal 6, many are only HTML5 for Drupal 7, or merely reference the term in their write ups. Sky, for example, is only an HTML5 theme for Drupal 7; likewise, AdaptiveTheme, Genesis and Layout Studio. Framework, Boron, Drixel 5, HTML5 Base, modernbird, Boron for Zen and Roots are HTML5. *Whoops, looks like as of today, HTML5 Base is no longer available for Drupal 6, but is available for Drupal 7; only as a development version, though.

Roots is based on HTML5 Boilerplate and appears to be well thought out.

There are many good HTML5 starter themes for both Drupal 6 and 7. It's also easy to adapt your own theme for HTML5, or to adapt an existing theme for your specific needs. There does not seem to be a strong front-runner in the HTML5 starter theme arena, comparable to the popular Zen. What HTML5 theme are you using or are you interested in? Why?

Modules

For Drupal 6, 26 modules reference “HTML5”, and for Drupal 7, 22. Many of these modules are still in development or not yet available. Let's look at what we have.

Video is the most popular “HTML5” module for both Drupal 6 and 7. It's been around (sans HTML5) since 2005. Video allows users to “upload video in any format, play video in any format “ and transcode video to the HTML5 friendly h246, Theora and VP8 codecs.

Second up is Media: Vimeo. This module extends the functionality of Embedded Media Field to allow users to embed videos from the Vimeo video service, “using HTML5 when supported”. Media: Archive provides similar functionality for audio and video served from Archive.org. The Drupal 6 version of Media: Archive doesn't appear to support HTML5. The Drupal 7 version has some HTML5 support and plugs into the Media module.

Third most used is Elements, which provides a library of form elements: tableselect, emailfield, searchfield, telfield, urlfield, numberfield and rangefields, that a developer can use in their own modules. (Note that the Drupal 7 version does not include tableselect element - this functionality is available via the Drupal 7 core.)

HTML5 Tools is a diverse set of tools to help developers HTML5-ify their site. You need to install Elements to use HTML5 Tools, whichg is comprised of itself plus a sub-module: HTML5 Forms Tools. Forms Tools overwrites Drupal default forms with their HTML5 counterparts – or will do that. Currently, only email elements on user settings and site configuration pages, the search element on the Search Module, and the search element on the Search Theme Form are ready. Follow the progress of this module here.

Plupload Integration creates multiple file upload capabilities, and utilizes an HTML5 widget if the client computer supports it.

MediaFront is a media player who's appearance can be customized without writing code. It utilizes the Jquery Open Standard (OSM) Media Player, which plays many types of media.

JPlayer integrates the jPlayer JavaScript library with CCK file fields and Views. The jPlayer JavaScript library “provides an HTML5-based player, that uses a Flash fallback.”

VideoJS (HTML5 Video Player) is another HTML5 video player that utilizes an HTML-based solution to video display: Video for Everybody, and javascript, to cover an optimal number of browsers and devices.

There are HTML5 modules, and adjustments to existing modules, in development for GeoLocation (I know, I know, not strictly HTML5!), Canvas, processing.js and websockets. There are several graphing modules in development: Visualize, GraphAPI and Rgraph. There's an HTML5 image editor module ready to go. To see all that is available for HTML5, go here.

It's an exciting space: HTML5 and Drupal. As we've seen, we don't really need HTML5 specific themes and modules to at least get started using HTML5 on our Drupal sites; however, there are many available to help us, and many more in active development. As always, along with having fun, remember to join in: create, share and help develop the modules and themes you want to see!

Mar 14 2011
Mar 14
Theme Forest City Magazine

In a word ... wow! The theme was effortless to purchase and a snap to install. Plus, since I used the City Magazine installation profile it literally took minutes to have a fully-functioning attractive Website. There are so many positive things to say about this theme it is hard to know where to begin. The theme is built on the base theme Fusion, which means you can control some important design and layout elements from the back-end.

The installation profile was loaded and configured with every module that I needed including path auto, cck, views, image cache, quicktabs, skinr, nice menus, and more. The theme creator goes by the user name "themesmania".  The theme creater included cool typography, slick "eye-candy", tricked-out blocks, and more. Take a look at the preview site at Theme Forest.

Keep in mind that not all themes at Theme Forest will be this well engineered and easy to use. This was one of the most expensive themes and was still only $40 USD. The most expensive theme for Drupal® at Theme Forest is currently $45 and the least expensive is $15 USD. 

I encourage you to use the installation profile and have some simple instructions below. 

1) Unzip the City Magazine file and upload the files in the city_magazine_install_profile folder to the server as you would with Drupal®. Go to your site and start the installation script by selecting "City Magazine". Upload files and create the database 2) Add the database information as you would with a typical installation. Database 3) To install the site exactly as you see it at Theme Forest, select RESTORE. Restore from Database 4) Finish running the installation script and when you are done this is what you see!  WOW
Jan 09 2011
Jan 09
Anton Sidashinsenior developer, Pixeljets co-founder

I'm a web developer specializing in PHP and Javascript, and Drupal, of course. I'm building Drupal projects since 2005, and I was working as full-time senior engineer in CS-Cart for a while, building revolutionary e-commerce software. In my free time, I enjoy playing soccer, building my body in gym, and playing guitar.

Drupal.org ID:

restyler
Feb 17 2010
Feb 17

I have been dreading this theme review for months. Let me explain. As a fan of the amazing and powerful CMS program Drupal&reg;, I believe that ALL theme solutions are important. For Drupal to continue to develop into a world class publishing tool for EVERYONE, it should be easily made into an attractive publication. For example, a small school in rural Latin America should be able to find themes for free, or fee, to skin their site.

Top Notch Themes&reg; is definitely an important member of the theming community. They produce Drupal&reg; themes that are trusted by members of the development community. In fact, I have no hesitation in recommending that you purchase one of their themes.

However, I am not happy with a few aspects of their business model. First, where are the demonstrations? I know they have screenshots, but every other theme provider on the planet provides demonstrations of their themes in action.

Second, the prices are unbelievably high when compared with other commercial theme providers. For example, I am a developer member of Rocket Themes&reg;, Joomlart&reg;, YooThemes&reg;, Joomla Bamboo&reg;, and Template Plazza&reg; which all permit me to download an unlimited number of themes. The price? About the cost of one theme with Top Notch Themes&reg;. In the Drupal&reg; community I can purchase themes for under $100 from ThemeShark&reg; and ThemeSnap&reg;.

Third, for the price I would like to see more bundled quickstart solutions. For example, ThemeShark&reg; has a pre-configured theme quickstart installation that includes a Views Carousel and other nice pre-configurations. Though many may not use the quickstart installation there are distinct benefits to the theme purchaser. For example, many of us have struggled to install a set of modules and wish we could see how it was configured successfully in another site. I have found it very helpful to install the quickstart in an offline location and use it to help configure my installations, modules, and the theme itself.

In closing, Top Notch Themes&reg; is producing solid themes that are trusted by the development community. I have no hesitation in recommending that you purchase their products. However, expect to pay a PREMIUM for the themes, have to ask to demo them, and look elsewhere for quickstart bundled installations.
 

Jun 23 2009
Jun 23

TypeHost Releases Three Open Source Themes for Drupal – Drigg 5.x

Posted by Jeffrey Scott -TypeHost Web Development | Tuesday, June 23rd, 2009
, , ,

TypeHost Web Development, a Drupal Solutions Provider and open source web design company, has released three free themes for Drupal 5.x installations using the Drigg module for social bookmarking sites. Drigg is an extensive set of modules that transforms a Drupal installation into a social bookmarking site similar to Digg, Del.icio.us, Reddit, Mixx, Propeller, etc. The following themes were developed specifically to integrate Drigg with Advanced Profile Kit and are free to download and use in your Drigg-based Drupal 5.x sites.

drupalascreenshot1


Drupala Theme for Drupal 5.x Drigg Install:
The main theme for our social bookmarking / blog portal / social networking installation profile. This theme is derived from the Drigg base theme, but changes the menu structure to allow for more flexibility in working with taxonomy & views when building portal sites. The Drupala theme is two columns, optimized for APK & Drigg, and cross-browser tested in FF, IE6, IE7, Chrome, Safari, and Opera. Uses bright blue gradients to define blocks & site sections, relatively clean, quick loading & scalable. Open Source / GNU Public License.

Download: http://www.typehost.com/free-downloads
Example site: http://drupala.com
Tutorial for Custom Login: WebDevNews.net

seo-mixscreen

SEO-Mix Theme for Drupal 5.x Drigg Install:
The Drupala and SEO-Mix themes are only different in the color of the top buttons in the GUI, and the SEO-Mix theme uses an “up only” voting button, while the Drupala theme uses a +/- system. Included with the download of the Drupala theme above & part of the Drupala profile. Open Source / GNU Public License.

Example site: http://www.seo-mix.com

EchodemicLogoEchodemic Theme for Drupal 5.x Drigg Install:
Nice dark blue and white theme with wide main menu for a social bookmarking & blog portal site based on Drigg which includes a set of custom voting icons. This theme is also optimized for an APK install and cross-browser tested. Uses the same WebDevNews tutorial for styling the user log-in block. Sponsored by Echodemic. Released under the Open Source / GNU Public License.

Download: http://www.typehost.com/free-downloads

Important Note:
These themes are intended to be used with a Drigg installation following these instructions:
http://www.drigg-code.org/pages/download_and_install

Both themes also use the Rounded Corners module: http://drupal.org/project/rounded_corners

typehostcom

About TypeHost Web Development:

TypeHost Web Development is a Drupal Solutions Provider of web design, graphic art, custom theme & module programming, project management, site installation & administration, security upgrades, SEO, and other services relating to the deployment of the Drupal community web site architecture over shared, dedicated, and cloud hosting environments. We create unique websites for our clients based on their personal ideas & collective vision, business needs, database & software requirements, registered user community, and target audience. Our clients range from some of the largest companies in the world to NGOs, small businesses, galleries, photographers, and artists.

TypeHost Web Development is a web design company specializing in CMS sites that combine social networking, social bookmarking, blog, wiki, & article publication, forums, ecommerce, and other Web 2.0 features (private messaging, SEO, embedded video, image archives, WYSIWYG editing, user profiles, classifieds, etc.) all built on the Open Source development platform Drupal, contributed modules, and themes. LAMP, CSS, PHP, mySQL, DHTML/XHTML, JavaScript, AJAX, XML, RSS, Atom, RDF, & other Semantic Web microformats supported. TypeHost is now listed on oDesk, Elance, GetAFreelancer, Scriptlance, and other freelance web development sites as a service provider.

Our current work involves continued development on the Drupal 5.x platform, particularly for social networking & social bookmarking sites, using Drupal 6.x and Acquia Drupal along with Ubercart for ecommerce, blog publishing, news and information sites. We are developing new themes and installation profiles for Drupal that include database exports of a typical site category structure, taxonomy portal content, pre-programmed Panels, Views, and module configurations for deploying and designing complex sites more quickly. Coming Soon: online demos, file downloads and feedback section, hosted web design solutions, full CMS web design packages, & site customization options.

References:

The Drigg Module: http://drupal.org/project/drigg

Advanced Profile Kit: http://drupal.org/project/advanced_profile

TypeHost Web Development: http://www.typehost.com

May 18 2009
May 18
Template Monster

One day while searching for a Drupal® theme solution I stumbled upon the Drupal® themes at Template Monster. I was so excited at the thought of a quick and attractive theme, I immediately downloaded the free Drupal® theme. I was delighted that it worked so I purchased several themes in hopes they would work for simple brochure sites. Wow, was I disappointed.

My first complaint is with the layout of the themes. It is accomplished with tables. Tables are not search engine optimized, are inflexible, non-collapsible, and really limiting. Second, I really object to two-three defined regions which are not collapsible.

I could provide a laundry list of personal complaints, but would like to encourage you to take a look at this blog post by Top Notch Themes and the comments that followed. I wish I had read and believed Steph before I made my purchases!

To best illustrate the theme take a look at this installed Template Monster theme. If you are on an extremely tight budget, want a simple one or two page site, and are not that concerned about search engine rankings, then Template Monster may be the right fit for you. However, really take a look at the fonts, spacing, layout, and code before you buy. Make sure you know what you are buying before you grab your credit card.

Personally, I wanted to love them but found that they were awkward, clumsy, limiting, inefficient, and hard to manage. In fact, they reminded me of the band/icons "KISS". Loud and cosmetic; while it works for "KISS" it doesn't work for themes.

TemplateMonster really lives up to the name!

May 04 2009
May 04
Drupal Theme Club

Have you seen the Drupal® purchased theme providers (aka clubs) that are starting to emerge on the horizon? I am delighted to see growth in this under-developed segment of the Drupal® landscape. As we all know, Drupal® is known for it's brains and brawn and not for it's good looks. Great! Looks are much less important to the core of the program than aesthetics. However the long-term success of the project is dependent upon attracting the aesthetic community (theme providers). Growth of this segment is exciting.

What are theme clubs and are they safe investments? A typical theme club sells themes individually and as subscriptions. For example, in the Joomla® community a Joomla® developer can join a theme club for about $300 per year. For that price they can download and install themes on their sites or their clients (unlimited downloads and site installations). New themes are introduced once a month and they come with typography, module variations with attractive and flexible style variations, several regions and more.

Apr 14 2008
Apr 14

Template Monster that is. Template monster has decided to offer Drupal templates.

I am glad to see this happen. I have said many times in the Drupal IRC channel that Drupal needs to get more CSS'ers involved. Or, get more freelancer themers involved, like those from Joomla and Wordpress.

It is my belief that WordPress became so popular so fast was due to it's themers, cranking out themes day and night. Now those themes are a commodity on SitePoint. You can't find Drupal themes there, mostly WordPress and sometimes Joomla themes.

My only concern about Template Monster stepping in, will they output some great themes that show the robust of Drupal? And continue to keep that standard up? I guess that falls into the hands of their designers and CSS coders. What ever the case may be I am glad to see design related companies to notice Drupal.

Congrats to the Template Monster team for taking the leap of providing services for Drupal.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web