Orchard CMS - A Responsive Site From Start To Finish Part 1 - The Introduction

Introduction

So Mr Mayne has been peddling his wares at work again and this time its Orchard.  Thought I would take a look at this one as its got a lot more going for it than the Git source control he recommended.  still trying to figure out why I went from svn integrated into windows and moved to a command line linux box.... maybe next week were gonna move to vi instead of Visual Studio as that's got a load of features that are basically useless and command driven....

Anyways, I have been asked by my bro in law to write his comenius site which is a bunch of connected schools that show of their childrens work.  The requirement is we have a home page which has a bunch of landing pages for different countries who then show off their work for the kids. Sounds great, lets see if we can knock that up in orchard so admins of particular countries can only edit their content and i'm gonna throw a spanner in the works as I also want this to look nice on a mobile device as well as the desktop, so responsive design and mobile first are the order of the day.  I have always been a bit of a sadist as I use windows every day of the week...

As most people will tell you, the movement of mobile first is an ever growing one by the day.  The reason why myself and a lot of others believe in this, is working with a mobile device first makes you concentrate on the important parts of a site first rather than someone doing a hoofing great Photoshop design for a desktop and loading it up with adverts for shoes, PPI insuarance firms and tips on how to get a flat belly (a personal favourite of mine)

Requirements of the Site We are building

To put stuff into perspective, lets talk a little bit about the site we are going to build. Comenius is a site where a school from a selected country shares its children's work with other schools from other countries.  This is pics and a little text about the work that was done.  There is also an events calendar per school and a landing page for each school so they can show a couple of pics, introduce the school etc.

On the administration side, we only want an admin for each country that will be able to edit their content for each country and a general admin that can control the home page.  We have identified the following pages:

• Contacts (all contacts for all schools)
• Logo Competition page (Schools all submit a logo and vote on each others)
• Events Page (all events for all schools)
• Home Page

For each School (each country) we have

• School Landing Page
• Schools Events
• Children's Work in the school

As this is mobile first, lets get down to the nitty gritty and work out the most important parts of the site:

1. Being able to select a countries page and go to that page quickly.
2. getting to parts of the site quickly.
3. getting to events page quickly.

So, we have come up with the following design that will cover 940 and less (by use of media queries, we will do maybe another smaller resolution later)

What's important here is that mobile users can select a country quickly with the dropdown at the top.  Then get to the rest of the site quickly with the links and then see some of the latest work by the children (the piccy is going to be a slider) and finally a list of events coming up in the next month(s).

Setting up a Theme to base our design on

To get started, we are going to use the ThemeMachine theme.  This seems to be the defacto standard theme for starting to build a new theme.  What I want to build here is a responsive design from the ground up, you could take a look at the twitter bootstrap theme as this has a responsive layout already built in and looks pretty tasty.

So the idea is to override the parts of the theme you want to override rather than start from scratch which is one of the aspects I really like about Orchard.  The facility to override the parts, layouts and styles is just marvellous, like all app frameworks, it has some flaws but its the ability to extend Orchard with custom modules is nice n easy.

We'll start by loading up the Code Generation Tools, these tools create the scaffolding for modules, themes etc so you don't have to write all that boiler plate stuff yourself.  So I clicked on the modules tab and then the gallery and search for code generation:

So hit install on this baby and enable the features:

What this gives you is a command line set of tools, so lets generate our theme, spark up a command line and navigate to the bin directory of your website and type 

Orchard

After a brief wait, you can type 

Orchard help commands 

This shows the help for all the code generation tool commands and gives a list of tools as long as the wait at the post office on pension day.  The one we are interested in is :

codegen theme ThemeName /CreateProject:true

So I type in:

codegen theme Comenius /CreateProject:true

Then add an existing project to my visual studio solution and we are good to go... well almost.  Like I said, Orchard is all about overriding so it is worth looking at the ThemeMachine structure to get a good idea about  what views, styles etc.

Under the Theme's directory, we see the views, styles and scripts directory which are pretty self explanatory.  We will get to adding to those later on.  For now, I am going to turn off the "Zones" that we don't need for the Comenius site.  In Orchard, we have Layers, Zones and Widgets;  Zones are portions of the page, e.g. the header, footer, content (Theme machine has 19 predefined ones), widgets sit in zones and layers are the rules to determine the visibility of widgets in the zones e.g. if the user is authenticated, then show widget X.

Out of the 19 zones available to us, we only need the following:

Header, navigation, featured,  content and footer.

Under the themes root part of the project is a file called themes.txt which is a description of the theme and the zones the theme uses.

So my themes.txt file looks like

Name: Comenius

Author: The Orchard Team

Website: http://www.orchardproject.net

Description: Description for the theme

Version: 1.0

Zones: Header, Navigation, Featured, Content, Footer

If you navigate to Orchards admin section and select the widgets page, you will see the zones we don't want disabled.

As you can see, you can select the layers and the widgets that appear in each layer.  Its worth having a play with this turning on and off the widgets in each zone and seeing how it affects the page.  

The Theme Machine, Responsiveness

In the next few tuts we will take each piece of the design i.e. the menu etc and work on the responsiveness of the site.  But just how responsive is the ThemeMachine? before responsive design was starting to get a bit of a lift off, the recommended approach for desktop was to target the most popular browser resolutions and at the time this would of been the 1024 width res which I believe Orchard has been based on as we see a typical 960 minimum pixel width wrapping div :

See we have a hardcoded width of 960px and the same goes for header and navigation.  I understand the ThemeMachine was never intended for mobile so this is perfectly acceptable but we will need to modify this if we are to make this look nice on a smaller device.  We can also confirm this by a simple resizing of the browser and how it behaves:

See the text cutoff? Its a sign we need to do some work.

So in the next tut, I will be starting with a layout and css files then taking parts of the site and working on their responsiveness.  Until next time.....