Responsive Theme

Developers
1

Hi,
I am looking to create a responsive theme using Zurb Foundation (css framework) for gibbon. How would you recommend going about this before I shoot myself in the foot :slight_smile: thanks in advance

2

Dex, that sounds amazing, and would be a really welcome addition! I am assuming you have Gibbon installed already. I would recommend including the demo data during install, as this will mean you see more of the interface whilst working on the theme.

To start your theme, take the Default theme (in /themes), copy it, and change the folder name to the name of your theme. Then edit the theme details in manifest.php, making sure the name matches the folder name.

In the interface, install your theme under Admin > System Admin and then Manage Themes. Once it is installed, set it as the default theme and start editing.

At my school we run a program called Free Learning (which uses a Gibbon module, read more at http://rossparker.org/free-learning/), and one of the options for students is building a theme. The instructions in that unit are quite basic, but might help. It is available to members of the public at: http://bit.ly/1IAqzUE.

If you need me to change anything in the core Gibbon code, or if you want to commit any changes, let me know. I guess certain elements may be styled in line, and this may be prohibitive to your work.

Good luck, and let me know how you get on.

Ross

3

Most of the responsive part of the theme includes changing the html(adding divs with responsive classes) - is there like a list of files that I can work with, so far Iā€™ve noticed that most of them are in modules folder and donā€™t end in ā€˜processā€™ - thanks anyway and will keep you updates with my progress

4

Dex, OK, that makes sense. Can I suggest you download the latest code from the v9.2.00 branch on GitHub (this will actually be released as v10.0.00) and work on it. You can then push changes to v11.0.00 when I set up the branch, which will be right after v10 comes out. Thanks, Ross.

5

Thanks again for looking into this.

6

I could just use javascript to change the classes on load instead changing the core - and no problem , you are welcome :slight_smile:

7

That sounds a smart way to go. I guess, though, if we change the core, then any theme can be responsive, right? Ideally it would be awesome if we could get the default theme to be responsive. However, your agenda may differ from mine ; ) Thanks again!

8

The only reason I dint try to change the core is because I dint know whether you would want to include Zurb Foundation framework by default, but if thatā€™s cool with you then great !!! - the JavaScript method is a bit hacky
Thanks

9

Dex, Zurb Foundation framework looks really interesting, and I would be happy to integrate it into the core, provided it does what it says, and performance/server loading remain acceptable. Do you want to try it in a branch, and perhaps show me a responsive homepage, so I can see what it looks like? I would recommend making the default theme responsive. Are you OK to proceed on this basis?

10

okay Ross am happy to try it in on branch. Also I am having trouble installing the v9.2.00 branch, it doesnā€™t get past installation step 3 :
Notice: Undefined variable: connection2 in website path\installer\install.php on line 271 Fatal error: Call to a member function prepare() on a non-object in website path\installer\install.php on line 271

Thats the error I get

11

Dex, this error (which I just made more graceful for v10) is generally a result of your MySQL credentials/server address being wrong, or not being able to create the requested database (if it does not already exist).

In terms of working on the v9.2 branch, I would use it for experimentation and learning, but please do not push, and save your major work until I open up the dev branch for the next version. We are on a freeze at the moment pending the release of v10 in late June. Is this OK?

Have you joined the email list? If you do so, you will get updates for new releases.

Ross

12

Thanks my mistake. Anyway forked v9.2.00 and created a GibbonResponsive branch which I am working on locally and the freeze is okay with me. And I have just joined the email list :slight_smile:

Will Keep you updated with my progress

13

Wow, you work first. Canā€™t wait to see what you get up to. Mind if I ask about the nature of your interest in Gibbon? Are you with a school? Looking to commercialise? Just a nice guy?

14

Yea I work fast - I am currently developing a website for a school ( www.blueriver.org.uk ) to replace that aged unresponsive one. So they wanted to try out a VLE and Gibbon fits the bill - and am a nice guy too :slight_smile:

15

Wow, Blue River sounds pretty cool. And you do seem a nice guy ; ) Thanks for promoting Gibbon! Email your address to support@gibbonedu.org and I will mail you some stickers. Now I will leave you in peace to do your work.

PS, if you have a moment, check out Libre Learning (http://librelearning.co). Still getting ready to launch, but you can view content under Learn > Free Learning. It is a public Gibbon install based around Free Learning. Some of the ICT content might interest some folks at Blue River.

16

You are welcome, Will do and thanks :slight_smile:

17

Hi Ross,
Hereā€™s a responsive login page example http://blueriver.org.uk/VLE_dev

18

Dex, looks amazing! So stoked to see the whole system like this. Thank you so much. I think it might be best to make the required changes to the core, and then keep the default theme as is, but add a new core theme called Responsive. That way we have more choice. What do you think?

19

Thanks and you are welcome. So then you mean that some themes will be responsive and others will not ? - If thatā€™s the case, then a setting on the theme manifest might need to be added about they type of theme(responsive or not)

  • I think its a good idea
  • Also by making the core responsive I will also need to change most modules from table layout to divs and other elements, is there a specific reason why most of the layout is tables ?
20

I have added the following setting to manifest.php for the Default theme, and commited to the v9.2 branch, so you can count on it being there when you commit to v11 later on.

$responsive=ā€œNā€ ;

I guess when the changes go into v11, we can code it so a missing value is the same as ā€œNā€, and only when it is set to ā€œYā€ does it invoke repsonsiveness.

As far as I recall Gibbon uses divs for major layout elements in theme (e.g. header, content, etc). But tables are used where data is displayed in a tabular fashion. Have you found tables in use elsewhere? If so, it is because I am old schoolā€¦and learned web dev in the bad olā€™ days where tables were king, and CSS did not exist ; ) Sorry if this causes extra work.