Moodle File structure and Zurb Foundation help

Moodle File structure and Zurb Foundation help

by Jack D -
Number of replies: 25

Hi all,

Sorry if this is the wrong place to post this, but I have searched the documentation and the forums but couldn't find an answer or didn't make sense. I am using Moodle version 3.3.

Basically I want to create a theme using Zurb Foundation 6 (not boostrap) and was wondering how do I incorporate this into moodle?

I am also abit confused with the file structure of moodle (since I don't know PHP or Sass and haven't found a theme that uses just css) and this is my first time using moodle. 


Which files can I delete from Boost or Academi that leaves me with the bare bones of a moodle site? (And not with code I don't need)

What is Pix_Core and PIX? (from my understanding PIX is where your images go?)

Can I delete the libraries folder?

What does the Renderers folder do?

What does the  layouts folder do?

Which file do I use to edit the HTML (I already know how to override the css as I can create a custom.css file in the style folder but was expecting to see a Index file for the html lol). just a side note is there any code that should I not change/edit?


You see ideally I would like to use a a child theme, but since they all use bootstrap I am guessing I will have to create one from scratch (which I think might be best). If that is the case I am wondering what files/folders do I need to make moodle function properly and register my theme without errors. 


I know I need a config file, a lang file, version file and a pix folder. As well as a css folder for my custom styles.


P.s please forgive my noobiness smile

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Hello. I am just moving your post to the themes area as I think it relates more to Themes smile

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

If you do not know php and are attempting to make a theme out of another web-building framework (from what I can tell), my advice would have to be to stop and rethink what you are trying to do, which I am not sure is even possible.

Most of Moodle's themes are extremely customizable out of the box and the vast majority have an additional css section where you can add your own css changes.  Take a look at Adaptable, Fordson, and Boost.

Can you tell exactly what you are trying achieve with this?  You make it sound like this is just theme related but from what I just read, Zurb Foundation is not a theme - it is a website platform...

Average of ratings: -
In reply to Emma Richardson

Re: Moodle File structure and Zurb Foundation help

by Jack D -

Hi Emma,


Sorry for the confusion! hope I can explain it better.


goal: I want to create a VLE using the Foundation Framework and Moodle.


To achieve this I wanted to know if I could use an existing theme such as Academi or Boost. But it has alot of folder and files that I am not familiar with (Not sure which files or folders I can delete and ones I can't).


If this is not possible (since most themes I have seen are made using Bootstrap.). How do I create it from scratch? What folder structure do I need to help me create a theme from scratch?


Even though I do not know php, my mentor does. So he will handle that side of things smile

   

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I am still not quite sure why you want to delete theme folders...but I will defer to the experts - maybe Gareth or Mary understand better what you are trying to achieve here.

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok, can I ask a silly question?  You want to use the Zurb foundation framework which uses SASS with Moodle which uses PHP with SASS or LESS and yet you state "since I don't know PHP or Sass"!!

Moodle Themes are now Bootstrap framework based including child themes, therefore if you want to use another framework then you need to create a new theme (not a child theme).  In the past there was the non-Bootstrap 'base' theme, so an example to look at.

However you WILL need to understand PHP and SASS.  Therefore go off and learn it first.  Then create a child theme based on Bootstrapbase / Boost in order to understand how to create Moodle themes.  Then and only then consider using the Zurb foundation framework.  This task is not an easy one!  I have years of experience and yet it would be a tall order for me!

Good luck, you're going to need it.

Average of ratings: -
In reply to Gareth J Barnard

Re: Moodle File structure and Zurb Foundation help

by Jack D -

Hi Gareth,


Thanks for the reply and I will try and answer your question.


While I understand in Foundation you can use sass or PHP. You can also use the foundation framework and not touch the stuff. I am also guessing you can do this with Moodle? Just like you can create a website using purely html3, css3 and javascript.


Therefore, I am looking to create a theme from scratch using purely css3/javascript. With as little to no sass, Is this possible? 


I am trying to learn how themes work (but wanted to use the Foundation framework and not bootstrap) which is why I asked what the core folders/files do? If you could help me with explaining the structure and what the files are used for I would very much appreciate it smile Since I have had a look through the documentation, but it doesn't quite explain everything.

Thanks again for your time Gareth.

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Jack,

Welcome to the Forum....

it's relatively easy to make a Moodle theme as there are tutorials that explain what the various parts do, and how to put all these parts together. But before I offer any help, on theme design for Moodle, my question is...

What is the Zurb Foundation framework and how does it work?

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Moodle File structure and Zurb Foundation help

by Jack D -

Hi Mary,


I find the documentation is not easy to find or is out of date. So when I follow the tutorial, it ends up not working due to me working on a better version mixed I also understand that while it is easy to change the things like colours of a theme, it is not easy to change the position of the navigation bar for example. As I do not understand where the HTML is kept (since there is no index.html file).


Zurb Foundation is very much like Bootstrap. It provides pre-defined classes that let you build websites quicker with less code. However, I feel that it is easier and more efficient than Bootsrap. But that is my personal opinion.


Jack


Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Thanks Jack...

Well The fact you know so very little about how Moodle works, is very similar to how I was in 2008 when I first asked questions in thIs very Forum. 

In those days I knew absolutely nothing about Moodle or Moodle themes.

What I did know about Web Design was mainly self taught some ten years before then, back in 1997. 

Now I am a Moderator of this forum and still learning. I am not half as good as Gareth as he is by far one of the best Moodle theme designers. However, even Gareth struggled at first with themes, but he has made big strides over the last few years in his understanding of both Moodle and Moodle themes.

So what I'm trying to say is that it takes time and a certain degree of personal frustration to

1. get to understand how Moodle works

2. find out how to make a theme using a new framework

So in order that you can see what is needed in a theme, here is a link to my first attempt at creating a theme which used a different framework than the one that Moodle was based on at that time.

https://github.com/lazydaisy/tiny-bootstrap-project

So in some ways my TINY BOOTSTRAP PROJECT, as old as it is, is still not much different than what you are trying to achieve using ZURB FOUNDATION.

I did not have a clue what I was hoping to achieve but it did make me aware how little I knew about Moodle coding.

Anyway now I have looked at ZURB FOUNDATION I may be able to help you find your way thru the Moodle Maze.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Moodle File structure and Zurb Foundation help

by Jack D -

Thanks Mary for your motivational words and sharing your experience!!


I now know which direction I will take to achieve my ultimate aim of creating a VLE smile

Its true I have never used Moodle before (except as an end user) and was set the challenge of creating a Moodle VLE  for the company I work for by my manager. I now know what I need to learn to be able to create that goal (I am doing an apprenticeship). So I want to complete this goal before my apprenticeship ends.





  

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Just to point out that while the sass/css elements of bootstrap are in the theme, many bootstrap classes and structures are used throughout core Moodle, so you would also need to handle that if you convert to a different framework. 

You can create a child theme using just css - boost would do its usual with the sass then your child theme would override that with its css. However, even with mustache templates for layouts, you will find it a challenge without php if you want to do any more than basic css xhanges. 


Average of ratings: -
In reply to Richard Oelmann

Re: Moodle File structure and Zurb Foundation help

by Jack D -

Hi Richard,


Ah, that makes a little bit more sense now. But I am the type of person that likes to make my file structure clean as possible, so if I will be overriding the sass file then I would if possible like to delete the sass folder.


The boost theme comes with folders or files that I am unsure about what they do:

  1. tests
  2. cil
  3. amd
  4. templates
  5. classes (renders?)


other themes come with the following:

  •  pix_core
  • lib.php
  • settings


I think I know what the other files/folders do but please correct me if I am wrong:

  • config, lang and version files (used to create your child theme).
  • Pix (is the images folder where all you images are kept).
  • layout (where your index.html file goes?).
  • style (where your css is kept).
Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Basically, yes - but there is no index.html in Moodle themes, the layout files are called from the config.php according to what page is needed.


tests - contains the behat tests for Boost: a development tool, not necessary for actually running and using the theme itself

cli - Boost contains a script for importing bootswatch templates - not necessary for actually running and using the theme

amd - contains amd ports of the boostrap javascript files

templates - Moodle now uses Mustache templating for creating layouts, these are held in this folder

classes - renderers and other necessary functions.

pix - theme specific images

pix_core - overriding core images

lib.php - other functions that do not fit in the classes (Sorry, I've often wondered the difference here, so would be grateful for further clarification smile )

settings - Some themes use a single settings.php, others use that file to call separate settings-x or settings-y simply for development/maintainability to separate out settings for different functions into different php files

lang - all the language strings necessary for your theme to work

config.php, version.php are essential files for the installation and configuration of the theme - and basically do what they say

layout - there is no index.html. These are the php files that create the various layouts called for different page types from config.php

style - yes, css (you may also see sass/less folders in some themes, depending on what they use.



If you want to take a look at an approach someone tool to using an alternative framework, there is a theme, UIKit, although it looks like it was only developed upto 3.0, but that used a different framework from bootstrap. Or a partial reworking - my flexibase theme discarded the boostrap grid and used flex for its layouts - again not supported into the most recent versions of Moodle, but maybe one or other of those may give you some idea of the challenges of using a different framework.


Average of ratings: -
In reply to Richard Oelmann

Re: Moodle File structure and Zurb Foundation help

by Jack D -

Hi Richard,


Wow thankyou so much for the clarification of what the folders/files do!! Makes much more sense now. So I can delete tests and cil folders smile although what are renderers?


So if I did want to edit or add to the html which folder or file would that be?


It looks like it would be easier just to use the bootstrap framework and by creating a child theme smile 


One theme I do like is Academi, but I want for example to add more nav links to the navbar at the top.

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Jack,

Ok, with respect, you're out of your depth and you need to learn how to swim.  You are stating "As I do not understand where the HTML is kept (since there is no index.html file)." - the reason for this is that the HTML is generated by the PHP.  Therefore as previously stated, you need to learn PHP!  There are no HTML files only PHP ones.

Kind regards,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Moodle File structure and Zurb Foundation help

by Jack D -

Hi Gareth,


No problem and thanks for telling me. I am actually doing an apprenticeship at the moment so will get training in PHP. 


You see my goal is to create a VLE smile I just wanted to test the water and see what I needed to learn and if there were any changes I could make to how Moodle works (i.e. with regards to frameworks).


So from what I can gather this is the process I will take:


  1. Learn PHP and use the bootstrap framework.
  2. build a child theme
  3. try and build a theme from scratch
  4. use either 2 or 3 and build the VLE
Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Gonzalo Castells Ortells -

Call me optimistic, but I don't see why Jack D cannot create a base theme with Foundation with little to no knowledge of HTML and PHP, as long as he is fluent with the Foundation framework.

My approach would be to download another base theme as a reference and "translate" it into Foundation. Identify what every block of HTML does in the reference and find an equivalent in Foundation.

For the PHP blocks, I think it would be enough to copy them from the reference to the custom theme. If I remember well, Moodle logic is independent enough from the view (the HTML, CSS and JS code that will be sent to the browser) for it to be handled under the hood by Moodle.

That is where renderers come into play: they manage the way the blocks of HTML are created. For example, if you want to create a sidebar block, Moodle uses the renderers to build its HTML (creates the HTML for the block container, adds the HTML for the block title, and so on). Of course, that means that Jack D will also have to "translate" all these renderers to Foundation.

All of the above may be wrong, since it has been a few years since the last time I created a theme for Moodle, but it doesn't seem to me an impossible task, only one that needs a lot of work. That leads to ask "is it necessary a Moodle theme made with Foundation?". As a fan of Foundation myself, I would understand that need if there was not a theme based in Bootstrap. Given that that Bootstrap theme already exists, and that Bootstrap and Foundation are grosso modo equivalent except for hardcore fans of both frameworks, I would focus my efforts on creating a child theme of the Bootstrap one to fit my needs.

All that said, I'm very curious about the project of a Foundation base theme for Moodle, and would like to get updates on its state and, to the extent of the little time and knowledge I have, give advise for any questions Jack D may find.

Best regards,

Average of ratings: -
In reply to Gonzalo Castells Ortells

Re: Moodle File structure and Zurb Foundation help

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Gonzalo,

Let me get this correct..... You're saying that someone can create a Moodle theme that at its core uses PHP to create the output which is in HTML with little or 'no' knowledge of HTML and PHP?  Are you serious?

Yes Moodle does use renderers to build its HTML output, but they are written in PHP with some newer bits in Mustache.

Therefore, logically despite all of the best will in the world I cannot see how you can create something with tools you don't know how to use.

Kind regards,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Moodle File structure and Zurb Foundation help

by Gonzalo Castells Ortells -

Hi Gareth:

I agree that I oversimplified the task at hand and understated how complex building a theme is and how much dedication it needs, even for people that are used to code in the mentioned languages, moreover if the theme is a base one instead of a child one. But still, assuming that Jack D is already able to build a layout with Foundation (and the fact that he spoke about Foundation as opposed to Bootstrap makes me think that, at least, he has some background), I would say it is a feasible task. Of course, I don't think that theme would be optimal for a production site, but I can think a few scenarios in which that project could be useful - e.g., for learning HTML and theming purposes. Actually, with some of my students, I find it useful to drop  them in the middle of a project related to the topics they want to learn, so that they come up with questions, and then guide them to resources where they can find answers to those questions.  

Most of the people in the discussion may know how Foundation and other HTML+CSS (+JS) frameworks work. But for those who have never used one of those, I'll explain that they give you a base HTML layout and some HTML "building blocks" that you can put together to build a more complex layout, together with thorough instructions on how to use them, documentation and examples. So, in a way, there is no need to understand each tag and attribute of HTML to use those building blocks.

If Jack D is already able to build a template with Foundation or understands how the building blocks work together, I'd say that, having an existing theme as a reference, it should be possible to infere what each block in the reference does and find an equivalent block in Foundation.

About the PHP part, and as far as I remember, most of the coding used in themes are just calls to output methods, which could just be copied and pasted, and easy conditionals and loops that can just be filled in with the appropiate HTML. What I mean is that he wouldn't have to write any PHP as long as he is "translating" from an existing theme.

Essentially, I wouldn't like to discourage Jack D from trying to create a base theme, but let him know before getting into such a big project that the existing base themes took expert coders months of hard work, so, from my point of view, he shouldn't expect to end up with a full theme suitable for a production site (for that goal I suggested he should just forget about Foundation and create a new child theme). If he wants a very basic theme with just a couple of pages (I can think of very few uses for that theme) or just to try to learn how themes work in Moodle and take the project as an exercise, I think it would be a very interesting one.

Best regards,


Average of ratings: -
In reply to Gonzalo Castells Ortells

Re: Moodle File structure and Zurb Foundation help

by Jack D -
Hey there Gonzalo,


Thanks for your great explanation and yes I agree with you that it would be easier to forget foundation and use a bootstrap theme, however I am not going to do that as this is the challenge set by my Mentor and if I pull it off it will look great on my CV.


I do believe I just said that I do not know PHP and I of course know html5 and css3 otherwise I wouldn't be using the foundation framework :D I am just not familier with the structure of a moodle directory. I can build a responsive website from scratch using just html5 and css3. 


Gareth doesn't seem quite as optimistic like you Gonzalo which is a shame hehe as I like optimism!!. Ill let you know how I get on, but I currently have the bare minimum with a folder structure very like how I am used too (the layout folder has a file that I use to write my html in with a little php). It uses very minimal PHP (for now until I learn it or my mentor does that part of it). The directory was created by my mentor who is an experienced web developer. 


The website or VLE will be created using the new css grid layout instead of the XY grid OR is it possible to use both? I wanted Foundation as it allows me to use quick blocks that build parts of the website for me with ease, essentially like how Gonzalo explained it. I also know that moodle is supposed to be use with bootsrap, but I like to break the rules smile

 

Kind regards,


Jack 

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Gonzalo Castells Ortells -

As far as I can tell, Foundation doesn't still include the new css grid properties (though it seems it will soon, as they say they are experimenting with it). You could add this support yourself, but that would invalidate the purpose of using a framework. I would suggest starting with what Foundation already offers you, probably by the time you finish your theme, css grid will already be supported by Foundation. Adding that later shouldn't be much of a hassle, since it should only affect the layout files.

Best of lucks with your project

Average of ratings: -
In reply to Jack D

Re: Moodle File structure and Zurb Foundation help

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Jack,

I am optimistic, but I'm also a realist and pragmatic about things.  Thus not knowing PHP will only lead to frustration and negative failure that you won't learn from.

Good luck.

Gareth

Average of ratings: -
In reply to Gonzalo Castells Ortells

Re: Moodle File structure and Zurb Foundation help

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Gonzalo,

I'm not discouraging Jack, just advising on a course of action that will lead to success rather than failure.  Call it 'mentoring' from an expert.

You've already started taking about 'methods' which are OO concepts implemented in PHP.  Along with 'loops' and 'conditionals' which the former does not exist in HTML and the latter only in a very limited form.  If you don't know PHP then how will you know what to change and why?

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Moodle File structure and Zurb Foundation help

by Gonzalo Castells Ortells -

Hi Gareth,

I agree with you that expecting to finish a whole, working theme with Jack's current state of those skills can be frustrating. I just wanted to find out what he really needed, in case it was one of these few scenaries in which he doesn't need to build a whole, working theme, in which case i thought I could give him some guidance. 

Also, I wanted more information on his coding skills: he can't write PHP, but seemingly he can read it. In some cases it may be enough to understand what a line of code does, and where to copypaste it, even if he doesn't know what a method or OOP are, specially if, as he confirms, is being assisted by a mentor. If Jack is trying to make a new theme that looks pretty, like the commercial ones, or even a fully functional theme, he will need to know PHP and browser coding, no matter what. But I think that if he only needs a naked base theme, like the bootstrap one bundled with moodle, he can manage something very similar using the approach I suggested. 

I don't want to make it look like an easy task, but I think my suggestion is backed up by Mary Evans' experience she explained a few posts ago.

Best,

Average of ratings: -