View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 2912 | Composr | core_themeing | public | 2016-10-30 14:20 | 2017-07-09 00:00 |
| Reporter | Chris Graham | Assigned To | Chris Graham | ||
| Priority | normal | Severity | feature | ||
| Status | resolved | Resolution | fixed | ||
| Summary | 2912: Hybrid responsive theme | ||||
| Description | The 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. | ||||
| Tags | Risk: Breaks themes | ||||
| Attach Tags | |||||
| Time estimation (hours) | 40 | ||||
| Sponsorship open | |||||
| related to | 2095 | Closed | Chris Graham | Bootstrap theme |
| related to | 3201 | Resolved | Chris Graham | Attempt to unify markup for hamburger and dropdown menus for responsive |
| related to | 3206 | Closed | Salman | Next generation theme (on hold) |
| related to | 2005 | Not Assigned | Guest | Web standards refresh |
| child of | 3362 | Resolved | Chris Graham | Themeing improvements in v11 (idea staging issue) |
|
|
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. |
|
|
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. |
|
|
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. |
|
|
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? |
|
|
I mean the upgraded default theme, and your theme. But it could be 3 later on, we shall see how it all plays out :). |
|
|
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 508. Patrick is likely to commit into this branch for 2128 now though. |
| 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 2095 |
| 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 | Guest | Note Added: 0004539 | |
| 2016-11-11 16:00 | Chris Graham | Note Added: 0004542 | |
| 2016-11-11 23:58 | Guest | 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 3201 |
| 2017-04-08 17:02 | Chris Graham | Relationship added | related to 3206 |
| 2017-04-14 20:14 | Chris Graham | Category | core => core_themeing |
| 2017-05-01 18:28 | Chris Graham | Relationship added | related to 2005 |
| 2017-07-09 00:00 | Chris Graham | Status | Not 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 3362 |
