[BETA Release for further testing] Flexibase (Bootstrap 3) Theme

[BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Richard Oelmann -
Number of replies: 22
Picture of Core developers Picture of Plugin developers Picture of Testers

Now releasing this theme as BETA for further testing.

https://github.com/roelmann/flexibase

In the end I decided not to go down the flexi_ii road with the huge number of settings. What I have done in its place is add in a CustomLESS box (like the customCSS) which will allow fine tuning of the LESS being compiled on the fly.

I think RTL is sorted - but would appreciate proper testing from someone who actually speaks a RTL language and I believe most of the issues identified in the initial testing that Mary, Gareth, Usman and Bas all very kindly contributed to have been sorted out - a few coding tips such as Gareth's advice about version numbers on js files have not been done yet, but those that affect usability or bugs in code I think are all dealt with.

Any comments, bugs or improvements would be most welcome. I'm not sure whether I would add any additional full features at this stage, although would definitely consider future enhancements. I will certainly look at any thing suggested as usability improvements or settings that really should be part of the theme and I just haven't thought of yet.

Richard

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Hi Richard,

I've not tested yet, but looks promising, I hope to download and have a play soon.

What I'm really interested in and love to read from you is the back story behind the theme.  For example, I believe that Julian created Essential whilst airborne, Shoelace was my first Bootstrap theme and has evolved to be a good starting point, with Shoehorn I wanted to push the Bootstrap 3 envelope and see what I could create from the ground up with concepts from Wordpress and bespoke sites.

So, what are your reasons behind creating Flexibase and where do you hope to take it?

Cheers,

Gareth

In reply to Gareth J Barnard

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Hi Gareth,

Well, the back-story I guess comes in a few parts:

Firstly I've become more and more aware that having been very comfortable with what was happening in the themes forum and themes generally until we moved to bootstrap, I've been feeling less and less comfortable with some of the 'advanced' themes like essential, LESS itself (I prefer SASS) and so on over the last few months and for me, the best way to improve that familiarity with bootstrap, less, and the newer breed of themes is to get in there and do it. And I wanted to do it with BS3, because I think we do need to be pushing that way as I think it offers so much more ontop of the benefits of BS2, hopefully Moodle core will move that way in time, even if its not happening yet - Bas has shown how it can be done anyway.

In the second instance, I've had quite a lot of requests to update some of my previous themes - particularly flexi_ii, but also the mutlilayout theme I created a few years ago that allowed an admin to select layouts from the interface without adjusting the config.php or the code - but when I really looked at it, although flexi itself wouldn't take too much to get it working on 2.8/2.9, its hardly what I would call the cutting edge of theming any more and certainly doesn't take advantage of any of the newer user benefits, so wanted to look at the options for settings without creating a dozen setting pages.

Thirdly is something I've been looking at for a long time and have posted about and made experimental themes before (including themes Ive used on my own sites where I could control the browser I was using) and that is the flexbox layouts. I know IE9 is still in use and doesn't support flexbox and my decision not to include full fallbacks for IE9 mean that the theme may have limited appeal/use, although fallbacks are there for any browser using prefixed code or legacy versions of flexbox. Wanted to build something 'mainstream' using it.

Also, as you know from the forums, we often get queries about 'how can I reuse such and such feature in my theme' so I wanted to see if I could take a more modular approach to adding some of the features into a theme, so I can point at it and tell someone exactly which bits to lift out and reuse and how. That can already be done with some features and some themes, but not all. It's kind of like the tiles/includes conversation we've had previously I guess. I was tempted to take things completely out of the lib folder or renderer folder or settings folder and actually add them to a 'carousel' folder, or 'marketing spots' folder and use the includes to point to that to make it even easier, but I haven't got to that level yet (although I might before finally releasing). Some of those features have been around for a long time - I first built the awesomebar into a theme very shortly after Paul orginally released it, while Mary and I worked together on a client theme that included a carousel/slider for something like Moodle2.2. Some of them have only really come into being with the advent of bootstrap. And, as with so much of what I try to do, my main aim is to make these features as easy as possible to use - and reuse in other themes.

As for where I want to take it - well that depends on the users. I'd like to add to the settings without taking it to the level of the old flexi_ii theme as we now have more extensive use of customCSS and I've added the customLESS field in there too. I also want to work on the documentation of the theme as something for both users and developers - along the lines of Easy.

One other thing I'd like to do is package the theme up with some other plugins such as filters (some of which I've already created in work) that would allow users to use bootstrap3 in the editor - a bit like the bootstrap elements plugin I guess - wordpress shortcode style.

But I'm happy to be guided by what users want - what makes it as popular features of other themes, or other systems like WP/Drupal/Joomla.

And if I'm really honest - the ultimate kickstart to get me going on a theme I've been promising myself to write for about a year? I'm getting paid for it! Including full permissions to develop it exactly as I want (so long as they can put their own colour scheme and logo on it) and to release it fully to the community smile


Rich

Average of ratings: Useful (3)
In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Thank you Richard smile so much to take in smile.

I really like the idea of furthering modularisation towards a completely encapsulated solution.

In reply to Gareth J Barnard

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

This is a theme I built using EDUMoodle  by @moodledan, as a base to work from as EDUMoodle was the very first Moodle 2 theme to use a slider. It was this theme that Richard and I based another theme on, the one he mentioned above. In fact it was the same training company you made that mobile theme for!

I think I have built about ten bespoke themes for them since.

Cheers

Mary

In reply to Gareth J Barnard

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Yes, turned into a bit more of an essay than it was in my mind when i read your question :D

I guess there's more to it than that too in reality - no single reason, but many contributing factors that all came together when I started looking at updating flexi.
And already, those who have looked at it seem to like it - although with IE9 not supporting flexbox (which I haven't done fall backs for) and IE10 only supporting the old version (which I have) I don't expect massive take up from front line users, but if it can showcase flexbox and some of the other features and can be developed to demonstrate the modular approach to all the features for others to use on their own themes, then that's fine with me smile

PS - Happy St David's Day to any one else out there in, or orginally from, Wales :D
In reply to Gareth J Barnard

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Example of the 'modulerisation'

The theme now includes a plugins folder which will include zip files of the theme components - the first one is for awesomebar and includes instructions to add various includes or copy and paste language strings etc.

It's not quite as simple as copy and expand the zip file - particularly for awesomebar which in itself is quite a complex/powerful component, but hopefully it will make a step towards a workflow that will help people add features to their own themes smile

Hope to do the same for some of the other theme components shortly

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Just discovered - although haven't tried it out yet - there is a LESS mixin for flexbox!

Maybe for v2 :D

Now if I could just make old IE (<=9) work with it ;)

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Bas Brands -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

"One other thing I'd like to do is package the theme up with some other plugins such as filters (some of which I've already created in work) that would allow users to use bootstrap3 in the editor - a bit like the bootstrap elements plugin I guess - wordpress shortcode style."


Cool !!!

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

Very nice theme smile Thank you for sharing!

Here are some issues I found (from and RTL perspective)

  • Submenus open to the right (should open to the left) and on times... off screen.
  • Editing Forms, ( example: user preferences) the form's labels are on the left side of the page where they should be right aligned.
  • Form collapsed section header icons should be right aligned and inverted.
  • Administrator level - view all users - table rows - content should be right aligned.
  • Block - my personal files - YUI tree icons should be inverted. (branches pointing to the left)
  • Blocks - calendar - center moths titles.

For now smile

These are all minor issues. Over all theme is great! very fast, clean and responsive.

Average of ratings: Useful (1)
In reply to Nadav Kavalerchik

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Thanks Nadav, that's really useful feedback.

Need to see what has changed this from Bas' bootstrap - presumably something I've taken out when replacing the layouts with flexbox

Richard

In reply to Nadav Kavalerchik

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Hi Nadav,

I think I have fixed most of those issues now, although i need to take a look at the awesomebar rtl submenus - not working properly anyway, but some of what I have done to fix the submenus etc in the main menubar has made a regression in the AB in rtl.

Task for tomorrow smile

R

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Derek Chirnside -

Is there anywhere where Flexibase is viewable with Awesome Bar in it?

-Derek

In reply to Derek Chirnside

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Not yet Derek, its still only on my local host development, but I'll try to get it up somewhere for you to look at shortly - hoping to look at the rtl issues for it today/tomorrow so will put it up as soon as I've done that.

Alternatively the theme is on github for anyone to download and test - NOT for production yet though!

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

Thanks!

Just pulled your new version and it looks like they are all fixed smile

One tiny new issue:

the little triangles icons for "collapsed/expand" form sections are hidden in rtl mode.

Average of ratings: Useful (1)
In reply to Nadav Kavalerchik

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Apologies Nadav, I'd left the site specific link to the images in there from testing instead of changing it to the proper [ [pix:core|imagename] ] link. Should be fixed now - and about to try and look at the awesomebar too.

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Paul Nicholls -

Hi Richard,

I haven't had a chance to look at Flexibase properly yet, but you might want to check my recent attempt at RTL support for the Awesomebar.  I'm not really familiar with RTL, so I may have overlooked something obvious - but here's the commit:

https://github.com/CTANZ/moodle-theme_decaf/commit/c5359b82b2c480c32949a1eaea8a5531676057a9

If you do find anything I've missed or any improvements which can be made, please feel free to submit pull requests on Decaf.


-Paul

Average of ratings: Useful (1)
In reply to Paul Nicholls

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Hi Paul,

Thanks for that - I had just finished doing my work on it when I saw your post smile (I did rename my images to match yours to try your code out)

A few issues I think with the commit you have (although maybe these are because i just copied the changes from the commit into my existing decaf ($plugin->version   = 2014010613; $plugin->release   = "2.0.5"; - from the master branch) and maybe there are other changes in your responsive branch that this comes from)

1. The arrow is showing in rtl but is hidden in ltr

2. The padding in the 'clickable links with children' pushes the text further in from the right than those without children and with icons

I'm more than happy for you to take a look at what i had done as well and see if any of that can help smile

https://github.com/roelmann/flexibase/commit/15cf3ffa28c04c1039f306d5ac9f31ab8ce126d0

HTH

R

Other than that I think I'm onto the final steps of making sure everything is done properly for the plugins database before releasing the theme 'into the wild' smile


In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Please note: the repository name has been updated moving towards releasing this into the plugins database.

The repository for testing can now be found at https://github.com/roelmann/theme_flexibase

R

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Derek Chirnside -

Any word of this in the plugins?

-Derek

In reply to Derek Chirnside

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

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

Still waiting for approval Derek, but can be accessed from github as above if you want to try it out smile

In reply to Richard Oelmann

Re: [BETA Release for further testing] Flexibase (Bootstrap 3) Theme

by Derek Chirnside -
OK, tried it out.  Looking good.

The default colour is a little strong on my eye, but great work.

I often wonder with essential and elegance and so on why you guys don't provide a default set of innocuous images for logos and carousels.  Just for ease of setting up for someone like me who wants to take a quick look.

But I digress.  The real reason in t check out a few little foibles that the AB has with Videoeasy filter, and with slightly smaller screens. I'll have a look over the weekeknd.

-Derek