Official Initiative: "Ready To Wear" -- Theme development should not be necessary to use Backdrop CMS

I don't have specific themes in mind.  My thought it to have an experience as close as possible to http://www.csszengarden.com/ , which is a demo site that shows the range of experiences that can be accommodated with CSS.  CSS Zen Garden is built around a single HTML page, and allows you to change the attached stylesheet to show the dramatic differences that can be achieve using only CSS.

I'd like people to be able to have a similar experience with Backdrop, where they can select between a small number (at least 3, no more than 5 or 6) themes and see different usable presentations.

I think this example from the Bootstrap site is interesting because it shows different elements; we might be able to use some of these ideas:

https://getbootstrap.com/docs/4.0/examples/

Awesome!  Off we go.  I think it makes sense to move development to github; I'll create an issue, and then post the link here.

Here are some adjectives that can describe themes.  Ideally the R2W themes would display different combinations of these attributes.

• dark/light
• playful/businesslike
• parallax/full-bleed/video backgrounds/special effects
• retro/modern/edgy/futuristic/minimalist
• compact/open
• flat/3D/Material Design/skeuomorphic
• monochromatic/colorful
• vibrant/muted
• chunky/elegant
• simple/elaborate
• textured/shiny/glossy/fuzzy
• Asian/African/Middle Eastern/teutonic/western
• Avant-garde/brutalist/impressionist
• sports/activities/interests
• Bootstrap/SASS/color picker

I think our theme choices should include both light and dark themes, and both businesslike and...less businesslike.

What did I miss?  Which of these seem most critical?

At today's meetings, I promised to provide a burndown lists of tasks needed to complete R2W -- at least, to a releasable phase.  Here's that list:

Themes

• Complete list of candidate themes
• Group them into broad, easily-differentiable categories
• Choose the best (or most appropriate) representative from each category
• Theme Switching.  Is it possible to mimic a tabbed interface like the Style Guide module provides for other content?  
  http://ready2wear.simplo.site/admin/appearance/styleguide/pelerine
  (Or other customizations to the switchtheme presentation, for example as something other than a select list -- it would be nice to have the list of theme remain visible)
• Thumbnails would be nice.  Perhaps not just a screenshot, but I some standard content?  Theme Thumbnails seem to mostly show off the content selected for a fake home page, they often don't tell you much about the themes themselves.
• Perhaps some guidelines for describing themes that doesn't sound like advertising copy?
• Bare minimum would be Bootswatch presentation: https://bootswatch.com/ Very minimalist, but you can see at lest some of what changes.
• Wordpress theme page does not do a good job of presenting differences.  All the thumbnails really tell you about is the layout and content on the front page: https://wordpress.org/themes/
• Themeforest might help: https://themeforest.net/category/cms-themes

(Our task is simpler -- we don't have to describe all themes, we just need to provide a few solid options.)

Layout

• We've moved some key elements that affect appearance out of the theme system and into our new Layout system.  For Wordpress, Drupal, and other systems one of the big differences between themes is layout.   Is it possible to provide new users with a way to choose from pre-packaged layouts? 
• This page, from the Drupal Out-of-the-box initiative, is mostly about layout. It demonstrates a few layouts.  Could we package a few choices that work with different themes, content, and color palettes?
• Our layouts are powerful, but confusing.  Is there a better way to convey the differences than this set of tiny icons?:
  

Color palettes

• Should a choice of color palettes be a selectable option, like themes and layouts?  Is this dependent on color module support?  How many themes have that?  Should we promote that?  (Should we limit R2W themes to those that support color module?)

Content

A lot of the differences in the thumbnails presented with themes on Wordpress, Drupal, and our our Themes page is due to the choice of content displayed in the thumbnails.  This exaggerates the differences between themes in a way that isn't helpful -- people can be drawn towards one theme over another for reasons that don't have anything to do with the themes themselves.  It would be nice to have an easy way to compare themes (and ideally also layouts and color palettes) with the same content, probably a choice of content.

The Drupal out-of-the-box initiative was mostly about content:

Documentation

Ultimately, I think a key deliverable for this initiative is a bit of documentation, in the form of a checklist: follow these steps to get started with a good-looking site. The default Dashboard content points in this direction:

Get started

• View the home page
• Add a logo or change the site name
• Customize the current theme
• Find a new theme for your site

 but to get a newbie going we need more detail than that.  Perhaps something like:

1. Create necessary content types (if "page" and "post" aren't enough -- ideally I'd like to delay this a little)
2. Create/gather/generate enough content to fill things out
3. Choose and customize your layouts
4. Select a theme
5. Select a color pallette
6. Set theme options, if applicable.

The order of these options can certainly be shuffled around.

The scope of how to create a good-looking site is obviously potentially huge, and I don't want to pretend we can cover it all.  That being said, for topics we don't cover, we may want to point to other sources of information.  (Particularly on topics that newbies might not be thinking about, like mobile presentation, accessibility concerns, multi-lingual options, security, and maintainability.)

So, it's time for me to try to wrap up this initiative, count our winnings, write off the losses, and plan for the future.  I've been pondering it for a long (long...long...long...) time, and threw out some thoughts over the weekend on Zulip, but let me try to distill it here:

I think there have been useful learnings in two main areas:
1) The initiative process itself, and
2) This specific initiative's goal of making it easier for non-gurus to create reasonably good-looking sites in Backdrop.

In terms of the process, I think @oadaeh (Jason Flatt) identified a key challenge early on (https://github.com/backdrop/backdrop-issues/issues/4436#issuecomment-695812973) that we didn't have a SMART (Specific Measurable Achievable Relevant and Timeboxed, I think) goal. Mostly S and T; what was "achievable" and "relevant" was a large part of what we were trying to figure out. I don't know if Measureable was important, but then nobody likes being measured.

Initiative: Theme development should not be necessary to use Backdrop CMS · Issue #4436 · backdrop/backdrop-issues

As to R2W itself, we learned a few things pretty quickly:

• It couldn't be only about themes.
• Because Backdrop factored out layouts, we had to worry about them too.
• Color choices were also important, and often factored into the Color module
• Content and imagery was also critically important.
• And documentation plays a key role.

Some concrete improvements have been made already:

• Backdrop's Themes page has been significantly improved.
• Quite a few themes were introduced, improved, and/or promoted
• Modules were created/updated/ported. (Or at least one was)
• Demonstration sites were created, with varying levels of success.
• We made Nate say the name of the project more times than he ever wanted to.

Theme Page improvements

The themes page a year ago seemed pretty spartan:

A year later, the page is improved -- most critically with thumbnails, but longer descriptions and a more graphic-forward design helps, too.

Demo Site

One thing that didn't work, and actually chewed up quite a bit of time, were the attempts to create a demo site where themes could be showcased. While they worked to some extent -- particularly the second one that I set up on Simplo with a great deal of help from Tim, neither attempt felt like enough of a product to release.

http://ready2wear.simplo.site/

Ready-to-wear themes

So, where does that leave us? Well, perhaps I didn't notice them before, but these 14 themes all look pretty good out of the box:

Snazzy

Pelerine

Lateral

Shasetsu

Tatsu

Corporate KISS

Pretty in Purple

Colihaut

Mero

Summer Fun

Afterlight Tribute

Materialize

Cleanish Theme

Finally, there's the Bootstrap theme:

 Bootstrap Lite 

...with Bootswatch support!

(end of part 1)