View Issue Details

IDProjectCategoryView StatusLast Update
0002912Composrcore_themeingpublic2017-07-09 00:00
ReporterChris GrahamAssigned ToChris Graham 
Severityfeature 
Status resolvedResolutionfixed 
Product Version 
Fixed in Version 
Summary0002912: Hybrid responsive theme
DescriptionThe current theme uses separate mobile/desktop modes, with a small amount of responsive design for tablets running on desktop mode.

We can fairly easily make a hybrid mode, whereby responsive design is used in addition to the separate mobile/desktop modes.

We can do it via a new Tempcode directive that outputs full media rules on desktop mode, while compiling simplified (low bandwidth) rules on mobile mode.

Instead of something like this:

.foo {
   {+START,IF,{$MOBILE}}
      width: 100%;
   {+END}
   {+START,IF,{$NOT,{$MOBILE}}}
      width: 600px;
   {+END}
}

We'd do:

{+START,MODE,mobile}
   .foo {
      width: 100%;
   }
{+END}
{+START,MODE,desktop}
   .foo {
      width:600px;
   }
{+END}

On mobile mode this would compile to...

.foo {
   width: 100%;
}

On desktop mode this would compile to something like...

@media screen and (min-device-width: 320px) and (max-device-width: 640px) {
   .foo {
      width: 100%;
   }
}
@media screen and (min-device-width: 641px) {
   .foo {
      width:600px;
   }
}

Somewhere we would define what the pixel ranges of the mobile and desktop modes are.

The advantage of this is it keeps the default theme pretty simple, while allowing a nice response theme for desktop, and an optimised theme for mobile. It actually makes the responsive coding simpler, as you don't have to keep copy-and-pasting the device widths, and I think it looks cleaner.
You could still use media rules to get greater specificity.
TagsRisk: Breaks themes
Attach Tags
Time estimation (hours)40
Sponsorship open

Relationships

related to 0002095 closedChris Graham Bootstrap theme 
related to 0003201 resolvedChris Graham Attempt to unify markup for hamburger and dropdown menus for responsive 
related to 0003206 closedSalman Next generation theme (on hold) 
related to 0002005 assignedSalman Web standards refresh 
child of 0003362 non-assigned Themeing improvements in v11 (idea staging issue) 

Activities

Chris Graham

2016-11-09 00:52

administrator   ~0004529

This is mostly implemented on the feature__hybrid_responsive branch now, pending testing, tuning, and merging into the v11 branch. It's working very nicely.

It's important as users will be expecting responsive design nowadays, regardless of us having a very good mobile mode.

Users will probably expect our own site to use responsive design, so it will need refreshing also.

giles

2016-11-10 18:29

reporter   ~0004539

Chris,

I am actively developing a responsive theme based off a default theme using the Theme Wizard. The design I'm using is 12-column with breakpoints at 600 and 1000px. I realize dual-breakpoints complicates the design, but I decided upon this setup as it offers more flexibility. My design is 300px up to 1920px wide.

The first change I made was to add max-width: 100%; and height:auto; to img, like this:

img {
    border: 0; /* Some (older?) browsers imply a border for linked images */
    max-width: 100%; /* Responsive image 1 of 2 */
    height: auto; /* Responsive image 2 of 2 */
}

FYI, width: 100%; had unintended consequences as it caused other graphics to grow excessively, such as the breadcrumbs graphic.

I have quite a few other changes I've made in global.css, including customizations that wouldn't apply to developing a default hybrid responsive theme. However, I can share any of the changes I've made if you'd like to review, as some of them may be helpful.

Chris Graham

2016-11-11 16:00

administrator   ~0004542

That's great giles :)! I think the best way to proceed is I'll comment in this issue when my own git branch is done, and you can test it and suggest which rules to copy each way? A major goal for me is simplicity within the CSS, so it would be an amazing outcome to have 2 responsive options for people.

giles

2016-11-11 23:58

reporter   ~0004547

Chris, I'd love to compare your code against my own when you believe it will be helpful. Although, I make no promises I won't look before then.

When you say 2 responsive options, are you referring to 1) the Bootstrap option and 2) a more open ##column / panel option? Or do you mean 1) a panel option and 2) a ##column option?

Chris Graham

2016-11-12 12:39

administrator   ~0004548

I mean the upgraded default theme, and your theme. But it could be 3 later on, we shall see how it all plays out :).

Chris Graham

2016-12-18 20:48

administrator   ~0004646

Okay, this branch is now ready for merging into the v11 branch. Everything is tuned for responsive, including all the admin screens. Lots of improvements. Waiting on Salman to finish 0000508. Patrick is likely to commit into this branch for 0002128 now though.

Issue History

Date Modified Username Field Change
2016-10-30 14:20 Chris Graham New Issue
2016-10-30 14:21 Chris Graham Relationship added related to 0002095
2016-11-09 00:52 Chris Graham Note Added: 0004529
2016-11-09 00:52 Chris Graham Time estimation (hours) 7 => 40
2016-11-10 18:29 giles Note Added: 0004539
2016-11-11 16:00 Chris Graham Note Added: 0004542
2016-11-11 23:58 giles Note Added: 0004547
2016-11-12 12:39 Chris Graham Note Added: 0004548
2016-12-08 18:08 Chris Graham Tag Attached: Risk: Breaks themes
2016-12-18 20:48 Chris Graham Note Added: 0004646
2017-04-08 15:44 Chris Graham Relationship added related to 0003201
2017-04-08 17:02 Chris Graham Relationship added related to 0003206
2017-04-14 20:14 Chris Graham Category core => core_themeing
2017-05-01 18:28 Chris Graham Relationship added related to 0002005
2017-07-09 00:00 Chris Graham Status non-assigned => resolved
2017-07-09 00:00 Chris Graham Resolution open => fixed
2017-07-09 00:00 Chris Graham Assigned To => Chris Graham
2017-11-20 00:16 Chris Graham Relationship added child of 0003362