Select Moodle version:

Themes: buckle

theme_buckle
Buckle is a basic theme which uses bootstrapbase as its parent. It is designed to be built onto rather than as a 'finished' production theme in a similar manner to the 'standard' and 'clean' themes in core. It takes bootstrapbase and adds the responsive version of the 3column HolyGrail layout.
Maintained by: Picture of Richard Oelmann Richard Oelmann
for Moodle
2.5

Buckle

A basic theme using the moodle_bootstrapbase as a parent. It is aimed as a starting point for those who would like to adopt bootstrap as a parent theme, but want to start from a look/layout which is more familiar as a design choice. It is not designed to be a finished theme for production use, but a theme to be a starting point for building on.

This theme takes the master bootstrapbase theme from core as its parent and then replaces the layout with Danny Wahl's Antioch layout (http://iyware.com/portfolio/antioch/) which uses Matthew James' Taylor's Holy Grail 3 column layout (http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths) with @media calls for responsive behaviour.

It adjusts the default bootstrapbase layout to replace the traditional header area with the custom menu below allowing the familiar branding rather than the small logo within the fixed custom menu. It also replaces the login info to the right of that header along with the language menu, removing these from the custommenu bar.

In the main body of the page, the buckle theme replaces the default icons, many of which are hidden by the default bootstrapbase theme.

Additional settings are kept to a minimum in this theme (logo, customcss and footnote) although it is anticipated that themes built on this will utilise settings to a great effect in customising bootstrapbase in future

The theme provides several css files

  • reset.css - which contains specific overrides for the parent css
  • pagelayout.css - the responsive 3column HolyGrail layout css
  • dock.css - the css required for the dock
  • core.css - the theme specific css
  • custom.css - the final css file which applies the settings from the customcss setting box

Credits:

Moodle_buckle

  • author Richard Oelmann http://editcons.net It is fully acknowledged that this theme would not be possible without the work done by others - see below

Moodle_bootstrapbase (parent theme)

  • authors Bas Brands, David Scotson www.sonsbeekmedia.nl created with the help of: Stuart Lamour, Mark Aberdour, Paul Hibbitts, Mary Evans

Antioch (layout)

Moodle_Clean (foundation theme - used as a starting point to clone and create this theme)

  • author Mary Evans

Screenshots

screenshot

Contributors

Picture of Richard Oelmann
Richard Oelmann (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • MD shot of me from his iphone4
    Fri, May 31, 2013, 12:04 PM
    Thanks for this Richard, this installed perfectly on Moodle 2.5 for me.

    I know this is aimed at developers as a basis but personally, I'm not sure i understand.
    Aside from the header and menu swapping, doesn't theme_clean already use the Holy Grail 3 column layout. I'm not too familiar with layouts so i might be missing the obvious here. I'm interested as i am currently working on a theme as well.

    ps: i did get the headermain h1 wrap a little too early here.
  • Picture of Richard Oelmann
    Fri, May 31, 2013, 4:33 PM
    Hi Aparup,
    No, Clean uses the boostrapbase layout which is based on the bootstrap framework and all the span classes. Although it arranges those spans to create a 2-1-3 layout my aim was to remove those classes completely and return to the MatthewJamesTaylor HolyGrail layout (or a responsive version of it) as used in the standard themes.
    I personally found the way the bootstrapbase theme arranges those classes to be very complex in arranging the columns and particularly in adjusting column widths where the less framework appears to have given widths to about 10decimal places of a percent (most monitors being around the order of 1000px can only recognise about 1 decimal point anyway!!!). I'm also looking for ways that enable 'junior' theme designers to understand what is happening without the need to compile/recompile everything through less to change simple settings like the column sizes - one of the most common requests we get about layouts in the Themes forum, but one which in Bootstrapbase looks as if it needs to go through a complete recompile of less to achieve - or an understanding of the complex way all of the spans are set up.
    None of that is intended as a criticism of bootstrapbase, but buckle is intended to provide an alternative to it for those who want to make use of it (if any, besides me!)
  • Picture of Dietmar Wagner
    Sun, Jun 9, 2013, 3:28 PM
    Hi Richard,

    as promised I played around a little bit with your new theme. The responsive holy grail layout really works fine.
    Very impressive how the blocks are moving form post to pre when the browser window is shrinking.


    Thanks for sharing buckle.

    Two ideas are coming via pm.

    Dietmar
Please login to post comments