Orchard 1.7 default theme feature team

Topics: Announcements
Coordinator
Nov 6, 2012 at 7:22 PM

This thread is to discuss the possible new default theme in Orchard 1.7

Coordinator
Nov 8, 2012 at 6:38 PM

Today, setting up a brand new Orchard website will leave you with an empty, no very shiny website. Would you publish the result of the Blog recipe as is ? Certainly not, you will need to choose a theme at least, and maybe add some nice widgets. If I put myself in the place of a brand new Orchard user odds are that I don't even know that I can browse for themes on the gallery, and thus I don't spend more time on Orchard, dropping it completely. That's why I think we need a brand new default theme, to improve the numbers of people going from trying Orchard to people publishing it. The first impression is very important, we need to make a good one.

Looking at Wordpress for instance, when you have a brand new setup it's nice by default. No one would be ashamed of publishing in its brand new state. 
Here are the links for the current and upcoming default wordpress themes: 

Nothing fancy, but it's clean, you would not be ashamed of having it as your blog design.

But not every one wants a blog, so please don't focus on blogs. Orchard is not just a blog engine, and most users don't use it for blogs, as opposed to Wordpress. So I think the default recipe in conjunction with the default theme should target a corporate website, and be nice when used for a Blog. So yes, this is somehow related to the new Recipe feature improvements currently discussed for 1.7

The goals of the new default theme:
1- Good looking, a theme that everyone could enjoy
2- Responsive. People will also judge us on the thoroughness of the implementation, and today's standard is mobile. HTML5 too, but this is already the case with The Theme Machine (TTM)
3- Should have the same zones as TTM for compatibility. This could change if the new Custom Layout feature is ready in time, then we would only have a few theme zones.
4- Touch enable. Take a look at the Microsoft website, you don't need to over, but click on the menu items, and they are stateful. This works perfectly with touch too.
5- Optionally configurable from the admin to select color schemes and default banners/slides.

I have found a few website  that I think  look like something which could make it as the perfect solution. Just talking in terms of content organization, and overall first reaction:

http://microsoft.com
http://themes.purethemes.net/?theme=centum

They have in common a Slider, and a columnized footer. Hierarchical navigation, and tri-zone layout for showing main products/ideas/services on the front page.
Would work for a blog too with sidebars for widgets.

NB: Don't think about buying a theme for those online galleries, as the licence would not allow us to redistribute it. Buying a custom one could be done though, I think we have enough resources and knowledge to create one by ourselves. The Orchard community is full of talented designers and engineers.

 

Coordinator
Nov 8, 2012 at 6:41 PM

Quick note on Bootstrap as I could bet someone will suggest to use it by default.

Having a dependency like this on the default theme would be risky, as we would have to follow the release cycle. It also is not just a grid system but more a framework with jQuery plugins and more.

We could though take a dependency on a well proofed grid system, or a custom one. But just the grid system.

Coordinator
Nov 8, 2012 at 10:09 PM
Edited Nov 8, 2012 at 10:09 PM

Here is the initial design that Ryan Drew Burnett had done for Orchard: https://www.dropbox.com/s/9pzlv1ettorpfyp/Orchard-Base-Theme-Home.psd

Nov 9, 2012 at 1:24 AM
sebastienros wrote:

Here is the initial design that Ryan Drew Burnett had done for Orchard: https://www.dropbox.com/s/9pzlv1ettorpfyp/Orchard-Base-Theme-Home.psd


Theme by Ryan Drew is nice n clean.

Developer
Nov 13, 2012 at 11:38 AM

Here are some links to explain the different approaches for responsive navigation patterns can be used :

http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

  • Select Menu : A hierarchical ul li is converted in a select dropdown.
  1. http://lukaszfiszer.github.com/selectnav.js/#examples 
  2. http://tinynav.viljamis.com/ 
  • Toggle or Multi-Toggle : A horizontal menu is displayed vertically, with toggle button to deploy the sub levels.
  1. http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/
  2. http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html 
  3. http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks
  4. http://filamentgroup.com/lab/responsive_design_approach_for_navigation/ 
  • Left Nav Flyout or Off Canvas : The menu is hidden or at the end of the canvas and appears or you move to it by clicking a button.
  1. http://www.zurb.com/playground/off-canvas-layouts 
  2. http://www.zurb.com/playground/playground/off-canvas/offcanvas-4.html

Coordinator
Nov 13, 2012 at 5:06 PM

I like the toggle/multi-toggle because it's clean and simple to use, and doesn't take space by default. I think the multi-toggle one would make more sense than the simple, as it can still be simple, and we need to handle at least 2 levels of navigations by default.

 

Nov 13, 2012 at 10:22 PM
Edited Nov 13, 2012 at 10:33 PM

Absolutely agree about the possible pitfalls in dependencies on Bootstrap (or any other similar off the shelf grid-system). Saying that though I think it's likely that with the kind of responsive design which is required the CSS will probably contain lots of the kind of things which Bootstrap has in it (grids, responsive layout, typography, forms, tables etc). The theme will nessecarily take lots of learnings from Bootstrap et al.

It needs to play well to a number of audiences - for instance: developers (who will be looking to see if it's responsive, flexible and easy to extend/configure) and non-technical decision makers who would in a corporate setting be the people who would sign off budgets for the developers to use it for real.

I really like the idea of customisable colour schemes etc.

Coordinator
Nov 15, 2012 at 4:52 PM

FYI it seems Joomla is using Bootstrap in both the dashboard and the front end by default.

Nov 15, 2012 at 7:22 PM

In addition to a new default Theme are there plans to re-theme the admin area? It doesn't really work that well on a off the desktop.

Coordinator
Nov 16, 2012 at 5:18 PM

Yes, if somebody steps up and does it.