Introducing SooperThemes.com version 5 and Drupal CMS Powerstart


Welcome to the fifth redesign of sooperthemes.com!

What's new at SooperThemes

The fifth major update to sooperthemes.com is the biggest update ever. It's a completely new site, unlike the previous sites which were built on top of the original alldrupalthemes.com (2007!)!

The new site comes with a big shift in focus. With Drupal 7 sites becoming more complex, and the upcoming Drupal 8 introducing new power and flexibility, but also complexity, we work hard to offer tools, services and products that allow everyone to profit form Drupal's flexibility without having to suffer the steep learning curve (alone). In addition to selling Drupal themes with turn-key demo sites we now offer more services:

  • Custom built ticket system on sooperthemes.com, to work alongside e-mail support
  • Design to Drupal service, for affordable and top quality Drupal themes based on your own design
  • Enterprise Drupal services, including art direction, design, theming, data driven design and consulting.
  • No more one-off theme sales, total focus on club membership and long term support

Our new tools are the best part, read on to learn about our major plans to support Drupal for small/medium businesses.

Drupal Developers will Love these New Tools:

A new Distribution: Drupal CMS Powerstart

Drupal's awesome architecture is what makes it such an awesome alternative to competing CMS like Wordpress and Joomla, but setting up shop with Drupal is described by many as painful and too complicated. Here, Drupal's power in flexibility is also it's weakness. It takes too much time to install basic features like WYSIWYG with media management: you need to find modules and set up complicated configurations, sometimes needing patches or development versions of modules, external libraries, etc.
To solve this problem, we created a Drupal CMS Distribution, targeted to small business sites and aiming to make life easier for developers and shops who create small sites.

Drupal CMS Powerstart needs beta testers: https://www.drupal.org/project/cms

Dries has mentioned in several keynotes that Distributions are the key to make Drupal more accessible and therefore the Drupal ecosystem more succesful. We too believe distributions are the solution but we don't like how they are currently made and how they are managed by drupal.org. Therefore we have created a new interface: A user-friendly interface to our distribution that lets you pick features, so that you don't get a bulky distro with everything in it, and the kitchen sink.

Check out the custom build interface to Drupal CMS Powerstart:

Drupal CMS Custom Build

Twitter Bootstrap Fans will love what we did with Bootstrap 3

In order to create a truly responsive distribution, we developed and refined a lot Bootstrap 3 Drupal-integration. Responsive grid control from Views, content organisation with Bootstrap shortcodes: https://www.drupal.org/project/bs_shortcodes and all our features come with default layouts that regardless of whether you use a Bootstrap theme.

Development of Drupal CMS Powerstart is sponsored by sooperthemes.com and if you want to support future development of this new platform, please help beta testing and/or consider becoming a member of our premium themes club, you can see our "premium themed" version of CMS Powerstart here: http://glazed-demo.sooperthemes.com/ - more Drupal themes.

Arctica: The New Base Theme for Responsive Web site/Web app Design

Making Responsive Design Easy for You

Have you been hearing a lot of talk about responsive design and media queries, maybe even checked the http://mediaqueri.es/ website, but you’re unsure how to get started with this new technology? Then you’re not alone. Responsive design is a big change and while the surge of tablets and smartphones with broadband internet demands we make our websites work on small devices now, there is still a lot of figuring out to do. Arctica takes the next step in facilitating responsive web design in Drupal. It works in the background, providing Drupal with a layout system via the Skinr module and its own CSS management system. But unlike other base themes it doesn’t stop there; The Arctica Configurator (aka theme settings form) provides an entirely new interface that reduces the complexity of responsive design by showing and telling what is happening in the background, when your website is elegantly adapting to and infinite number of screen sizes.

Also check the minisite: www.sooperthemes.com/arctica/ Arcitica Configurator screenshot (click for enlargement):

Other Responsive Themes

Before starting the 3-month code/test/code/test sprint it finally took, I thoroughly researched the currently available options, most notably adaptivetheme and omega. Here are some points that Arctica does different that I think are important:
  1. Provides a usable and flexible interface to the layout system, giving you a birds eye view of what your design is doing on different devices.
  2. Not making assumptions about how you want to implement responsive design. Media queries are not hardcoded in the theme, they exist in the configurator and you are encouraged to make your own. You are free to choose a mobile first design, a content first design or the less intimidating top-down design (desktop->mobile). Not every website needs the same approach, that’s why I also made the number of media queries flexible. Some websites might need as much as 7 media query contexts to work in all devices but many simple websites can easily do it with 2 or 3 media queries.
  3. Fixed-width gutters. Many flexible layout systems use flexible width gutters. Being a designer myself I found this a big issue. Design is all about ratios and rythm, and white-space is a fundamental part of the design. I developed my own layout system (long before working on Arctica) that supports flexible width with fixed gutters. This avoids the problem of having your vertical gutters shrink and expand inifintely to fit the viewport while your horiztonal gutters do not respond at al, thus breaking the foundation of your design.
  4. Performance: I’ve always been a into optimizing code and monitoring server performance. Arctica is probably not yet perfectly optimized but it has a very low performance impact considering the amount of “stuff” it does for you. I spent a whole day ab testing all the latest base themes and found that most base themes had an acceptable performance impact, adding a ~5% penalty compared to Stark. An exception was Omega which performed around 10% slower than Stark in both throughput and response time. Complex stand-alone themes such as Marinelli and Danland also incurred about a 10% performance penalty compared to Stark. Now remember that stark is a bare bones "theme" and while being fast it doesn't make your website responsive, or pretty.
  5. I added some new features such as built in polyfills and mobile browser tweaks, CSS3PIE integration, Arctica Visual Bootstrap, providing design defaults for common Drupal elements and turning off core stylesheets. All of this is optional of course you can turn it all off. I’m also using SASS/Compass in all my new base/sub themes but I’m not assuming everyones else wants to know about SASS so I make everything compatible with hacking regular CSS.
  6. What Arctica doesn’t / shouldn’t do is also something I thought about. Some things are better left for modules to do. For instance text strings are content, not theming, so I didn’t add a 100 theme options to change node links and comments links etc. You can use the stringoverrides module for that.

Arctica in the Wild

Allthough Arctica is brand new and just at the beginning of a long road of active development, there are some themes that demonstrate its features:
  • The arctica minisite (very much a work in progress). You can download this minisite and play with it to see how the advanced skinr integration makes an Arctica site so easy to manage: http://drupal.org/project/starterkit_arti
  • More info about this in another blog post: http://drupal.org/project/touchpro which uses the new http://drupal.org/project/tundra base theme extender
  • Premium themes Deviant and HelloFolio

You can download Arcitca now

http://drupal.org/project/arctica

Testers Wanted

I would love to hear your opinion and ideas, feel free to comment or tweet @sooperthemes or @jurriaanroelofs with #arctica.

The easiest way to learn Arctica

The easiest way to try the themes is by installing the StarterKits (installation profiles) that install a demo site with demo content, including production-ready responsive design configurations. You can try the free arti theme but you'll have an even better resource if you buy the new Deviant premium theme or Hellofolio premium theme. Both come with a StarterKit. They come with responsive blocks, views and images. If you've been on the fence about buying premium themes, I've just now started a 50% discount promotion on SooperThemes.com to celebrate the introduction of the new theme. This is the first time in 2.5 years of business that the premium Drupal 7 themes are on sale.

Community vote result: TouchPro = Free Premium Drupal Theme

It was very exciting for me to watch you all vote on the poll for the first free premium theme by sooperthemes.com The race was between HelloFolio and Touchpro and these 2 themes overtook eachother many times in the voting, until finally I had to close the poll on march 30th when TouchPro won with a difference of just one vote! This means that TouchPro will be released on drupal.org as a contrib theme, and the other 2 themes will go on sale on sooperthemes.com. Follow development of TouchPro here: http://drupal.org/project/touchpro

UC Affiliate v2 Setup Guide - Creating the SooperFriends premium drupal themes affiliate program

I've just finished setting up my drupal-powered drupal themes affiliate program and I figured I should share how I did it, since I think my set-up is better than what's done in the original documentation, for some people. This set-up guide also highlights some problems in the module.

1. Download modules

As the affiliate modules' scope is limited to the actual affiliate center, we need some extra modules for signing up new members and having existing users apply for the program:

You have to download and enable the above modules.

2. Create the affiliate info/sign-up page

You need to create a webpage to advertise the affiliate program and point people to the sign-up pages. As an example, take a look at my Premium Drupal theme affiliate program called SooperFriends. For now just create a simple page stating the terms of your program and the payouts your affiliates will receive. Creating the sign-up buttons is covered in the next steps.

3. Adding affiliate related fields to the user profile

Tundra: A Free Framework Theme for Drupal 6 & 7, by SooperThemes

Free Drupal Theme framework

Another Framework Theme?

Yes, there's already loads of them around, but Tundra is very different from all of them and it offers unique features and a different approach to code organization. The theme itself resembles a theme framework as it has a built-in feature management and css-writing system.

Part of the Tundra development process was also creating a new jQuery dropdown-menu plugin from scratch. The included jQuery SooperFish plugin enriches Drupal with multi-column animiated menus that are fully configurable in the theme settings form.

Why does it matter?

Tundra is the first theme that offers advanced jQuery features with the ease of a point-and-click interface. All configuration is pulled into the theme settings form to form an interactive theme configurator. Some of the features are:

  • Sooper Easing: This exposes advanced animation easing to all other features
  • Sooper LivePreview: Makes changes to theme settings form for most features visible immediately, to ease the configuration process. See configurator demo.
  • SooperFlex Grid System: Full grid control in both flexible and fixed width layouts without breaking in internet explorer 6. Skinr module is used to expose float (left/right) control and width control. Supports rational proportions and irrational proportions based on golden ratio (phi).
  • Sooper DropdownKit: For usage and configuration of the jQuery SooperFish plugin.
  • Sooper SlideshowKit: A jQuery cycle based solutiuon for creating configurable slideshows.
  • : A jQuery nivo based solutiuon for creating configurable image or photo slideshows.
  • Sooper LayoutKit: A theme-settings based system to configure fixed or fluid theme width, sidebar widths and mi-/max width.
  • Sooper FontKit: A cufon based solution for using custom fonts and special effects (gradients/shadows) in your theme. 25+ fonts included in feature.
  • Sooper BackgroundImageKit: A solution for settings a background image in the theme settings. Easy to extend with your own images.
  • Sooper Linkicons: Automatically adds mime type and email icons to links. Includes 2 free icons sets.

Tundra is the theme that powers all of the premium drupal themes on SooperThemes.com. We made all the premium features GPL, and Tundra is our way of giving back to the community: it's a vessel with all of the code that was developed over the years.

Download Tundra on the Drupal.org project page

Here is some additional info, it's a screenshot of the product page on sooperthemes.com

Free Drupal Theme framework

Pages

Subscribe to RSS - planet