Orchard CMS - A Responsive Site From Start To Finish Part 2 - Starting with Responsive Headers

Introduction 

Welcome to the second part of this set and I'm impressed you got to part 2 as that's more than I anticipated....

You may remember from part 1 we set the scene and also got code gen working and the correct zones are all on and we are ready to go.  But before I go into the next part, I wanted to explain my set up as that maybe pretty important to people out there.

At present, Orchard seems to be on a bit of a switch over so while this wont apply when we get to version 1.6 which is due pretty soon, I wanted to keep upto date on the tip so I can start using VS2012 which the current tip is now built in.

So I downloaded from mercurial, the orchard source code from

https://hg.codeplex.com/orchard

if you now try to update to the tip of the source code, there is an issue with some repos that have been modified so you will need to remove them manually and update.  at present, I am at revision 6536, If i try to update, the following repos need to be removed under the modules directory:

Orchard.Alias
Orchard.Antispam
Orchard.AutoRoute
Orchard.ContentPermissions
Orchard.CustomForms
Orchard.ContentPicker
Orchard.Fields
Orchard.Forms
Orchard.Projections
Orchard.Rules
Orchard.TaskLease
Orchard.Tokens

Then do an update at 6536 again and we are good to go.

I have also edited the orchard.web project so it points at the src/orchard.web directory and set up a comenius.local in the hosts file, the only bind is that as we update, the setting will be overriden, but its not such a big issue.

Back to our project, its looking less than sterling, so lets get to work !.

OK we need to start our mods, the layout file is where we need to start, so under the existing theme machine themes directory (Orchard.Web\Themes\TheThemeMachine\Views) copy the Layout.cshtml into the same views directory except for the theme you are working on (I have it under Themes/Comenius/Views)

Give that a blast and.... OOPS

Reason being, the ThemeMachine has a "BadgeOfHonour" and A "Branding" section which we don't need, A quick look into the layout file and we discover this :

Please excuse the diabolical colouring of VS2012 the IDE is as monotone as Tom Hanks's acting.  Anyways, lets remove those lines and try again and we get a basic site with no style that actually is more responsive.

The Layout.cshtml file is pretty much the key to all of this as our starting point for the site.  Due to the way in which Orchard does its finding of templates (parts, pages etc) we can create part of a template and name it a specific way and it will apply that template.  As Mr Mayne would say "Convention over Configuration" and although it pains me to admit it, he's right.

So lets get to work on the first part of this which is the header which you will remember had a logo and a drop down selection with the list of countries we wish to show landing pages for.  Quick reminder will show this :

What we obviously need for this little baby is for it to float left and right as the width greatens (until it gets silly and then we will need to maybe set a max width when we get to 27 inch mac displays.  The following shows what we expect from different resolutions:

It is worth pointing out the defacto starting book by Ethan Marcotte at this point for responsive web design.  A great place to start with designing for all resolution types.

For the dropdown, I am using "Chosen" which is a JQuery plugin which looks really good and behaves really well.

We are going to use media queries to determine max resolutions at which the css changes, we don't want to get silly and add media queries for each different resolution, so looking at the following, we need a couple of different ones, one for the wrap round and the other for the wider view.

Testing our responsive site

Ok, we need something to test what our site looks like in different screen widths, there are a couple of good tools out there.  A few of these rely on you having a site visible to the outside world.  Unfortunately, I dont right now so i'm looking for something that I can use locally.  I have given in to my college Phil Peace here who insists Firefox is the tool of choice (I am a dedicated Chrome fan) but the new Firefox (V15 at the time of writing comes with a Responsive mode which is the dogs nuts to be honest..Phil Peace 1, Mr Deakins 0

Anyways, if you havent seen this, just check it out :

I can then view my site in resolutions I wish and even rotate:

OK, so we wont get the real picture, we will need some proper devices for that, but as a quick guide as to how we are doing, its just awesome.  So lets carry on.

We'll start work on the logo first.  Now we are into a hotbed of contest here already, the discussion of the best way to make images responsive have caused more arguments than the best way to drain spaghetti.  

If we look at Mr Marcotte's book he uses a max-width property in order to resize the image on the browser. The issue being is that on mobile, we are essentially downloading a hoofing great image for a mobile device with could be on a crappy network.  So we will use a combination of media queries at steps to download smaller images and leave the world arguing on the best way to do it.

So I have photoshop and have set up a few custom page sizes with resolutions so i can see the way the images look as they would on their respective devices.  our logo isn't looking to clever on the iphone 3 display so some resizing needed :

Media Queries

Over abuse of these babies, means you are targetting specific devices which is a definite no no as you will never cover all of your bases, there are so many out there, you'll have a never ending list of css.  We therefore try to target a smaller resolution i.e. typically iphone in size, a medium sized resource e.g. 1024 upwards, and then deal with any silly sizes you would see on devices such as the 27inch IMac etc

I'm now going to add a site.css into the styles directory of our theme and start writing this to accomodate the target sizes we previously mentioned.

The css for orchard sites.css is not too bad at all, so i've nicked the css reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, button, submit {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

After this, I have added the section to style the header with media queries : 

/* Home Page Header */
.widget-HomePageHeader {
     width: 90%;
     background-repeat: no-repeat;
    margin: 5px auto;
}
@media screen and (max-width: 400px) {
    .widget-HomePageHeader {
        height: 95px;
        background-image: url('../Content/ComeniusLogos/comenius-logo_153x95.jpg');
        background-position: top center;
    }
}
@media screen and (min-width: 401px)
{
    .widget-HomePageHeader {
        height: 119px;
        background-image: url('../Content/ComeniusLogos/comenius-logo_191x119.jpg');
        background-position: top left;
    }
}

At present, we use 2 queries, one for 400px and lower and the other over 400 pixels.  Checking this out on our firefox browser we get the following 2 :

 Nice..

We'll move onto the dropdown in the next tutorial.  Thx for stopping by !

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.....

Quick tip for templates in models.

So were using orchard at work here, reason for the choice:

Mr Mayne works next door to me and hes a contributor and he says its good.
He whines if he doesn't get his way and i'm for an easy life :O)

anyways, quick tip.  We are writing a custom module here, and the driver is not calling a method to get my view model with the edit template is connected to.  REMEMBER THE PLACEMENT INFO FILE.

Otherwise, empty editor screen my friends.

just one to look out for.