Detailed documentation for this project is now available at http://learn.hibbittsdesign.org/coursehub
The Course Hub skeleton is intended to accompany a face-to-face, blended or fully online university course. It supports a flipped-LMS approach using the modern flat-file (no database) Grav CMS as an open and collaborative Web platform.
Table of Contents
Why Flip your LMS with Grav?
Why Use a Modern flat-file CMS?
Course Hub Screenshot
Course Hub Highlights
Quick Install (Web server only)
Page Templates
Site Structure
Site Configuration
Page Header Options
- To support pedagogical goals unmet by current LMS/platform
- To deliver a better student (and facilitator) experience
- To increase capability of access, sharing and collaboration
As an open source modern flat-file CMS, Grav offers a distinct set of advantages to Web-savvy educators looking to move beyond their institutional LMS:
- Modern means...
- Modern PHP code (i.e. reliability, speed, extensibility, etc.)
- Use of current standards (i.e. Markdown, Twig, YAML, etc.)
- Modular/customizable content chunks (i.e. reuse of content)
- Further separation of content (i.e. files) from presentation
- Flat-file means...
- No database means less (or no) IT involvement needed
- Content stored in text files rather than in a database
- Takes full advantage of the collaborative ecosystem now available (i.e. GitHub)
- Increased portability, as moving a site now only requires simply copying files to another location
- All template and content files are 100% version controllable
Figure 1. Example Grav Course Hub website, with GitHub collaborative page editing enabled. Explore an example single course site at demo.hibbittsdesign.org/grav-course-hub/ and a multiple course site at demo.hibbittsdesign.org/grav-multi-course-hub/.
- A complete ready-to-run Grav package (open source)
- Blog-format, with 'featured' (sticky) posts
- Single course per Hub, multiple courses per Hub or even multiple course sub-sites (blog + multiple pages per course) per Hub
- Optional important reminders & class preparations areas
- Hub pages can be easily added/removed/changed
- Uses Markdown for streamlined cross-platform content
- Image header area above Hub navigation bar
- Sidebar is a simple markdown file, which can also contain HTML
- 'Chromeless Pages' option to hide global navigation elements for all pages (to support embedding multiple pages within LMS)
- URL flag to only display page content (for display within LMS). For example, http://demo.hibbittsdesign.org/grav-course-hub-bootstrap/home/week-03/chromeless:true
- External links are automatically opened in a new Tab/Window
- Built-in support for entire Hub to be collaboratively maintained on GitHub or GitLab (for local hosting)
- Since everything is built with Grav it can be entirely customized
To learn more about how to most effectively use the Grav Course Hub, visit hibbittdesign.org
Pre-flight Checklist
- Confirm Web server PHP version (PHP 5.5.9 or higher)
- Web server login credentials (username and password)
Installation Steps
- Download the ready-to-run Course Hub Skeleton Package
- Unzip the package onto your desktop
- Copy the entire Grav Course Hub folder to your Web server
- Point your browser to the Web server folder
- Create your site administrator account when prompted
- And you're done! (press the
icon in the Admin Panel to preview site)
- Blog template (blog.html.twig)
- Important reminders template (important_reminders.html.twig)
- Weekly preparations template (preparations.html.twig)
- Blog item template (blog_item.html.twig)
- Item template (item.html.twig)
- Page with Sidebar template (sidebarpage.html.twig)
- Full width Page template (fullwidthpage.html.twig)
- Sidebar template (sidebar.html.twig)
/user
- /pages
- /01.blog | blog.html.twig and blog_item.html.twig
-/_important-reminders | important-reminders.html.twig
-/_class-preparations | class-preparations.html.twig
-/week-01 | item.html.twig
-/week-02 | item.html.twig
- etc..
- /02.resources | sidebarpage.html.twig
-/sidebarpage.md
- /03.syllabus | fullwidthpage.html.twig
-/fullwidthpage.md
- /sidebar | sidebar.html.twig
-/sidebar.md
- /headerimage | default.html.twig
-/default.md
- /footer | default.html.twig (Course Hub Bones theme element)
-/default.md
- /logo | default.html.twig (Course Hub Bones theme element)
-/default.md
- /mobilemenu | default.html.twig (Course Hub Bones theme element)
-/default.md
The 'site.yaml' file located in the '/user/config/' folder contains the following default values:
title: CPT-363
metadata:
description: 'A short description of your course would go here'
displaymenuentries:
enabled: true # display of additional menu entries
menu: # menu entry for adding external sites/tools
- text: Grav
icon: arrow-circle-right
url: http://getgrav.org/
icon: # default Font Awesome icons for preparation and post entries
post: calendar-o
github:
location: none # menu | page | none
icon: github
tree: https://github.com/hibbitts-design/grav-skeleton-course-hub-site/edit/master/user/pages/
twittertimeline:
enabled: false # display of Twitter timeline on sidebar
url: https://twitter.com/hibbittsdesign/lists/cpt-363
text: A Twitter List by hibbittsdesign
height: 700
hidehomemenulink: false # suppress Home menu link
Setting | Child Setting | Description |
---|---|---|
title | The course number/id, to be displayed at the top of every page. | |
metadata | description | The short description of the course hub site. |
displaymenuentries | enabled | Can be set to true or false . When set to true , all defined menu items are added to the navbar. |
menu | text | Text label for an external link to be included on navbar. |
menu | icon | Font Awesome icon code for an external link (optional). |
menu | url | URL for an external link. |
icon | post | Change the default Font Awesome icon for the weekly blog posts (i.e. weekly summaries). |
github | location | Can be set to page , menu or none . When set to page or menu , it will display the Edit this page link to your GitHub repo in the indicated location. |
github | icon | Set the Font Awesome icon for the Edit this page menu or page link. |
github | tree | Sets the tree by which your site's content is based. Generally the repo your site's content is pulled from. |
twittertimeline | enabled | Can be set to true or false . When set to true , it displays the Twitter timeline on your sidebar. |
twittertimeline | URL | The URL of the Twitter timeline you want to embed on your sidebar. |
twittertimeline | text | The text label of the Twitter timeline you want to embed on your sidebar. |
twittertimeline | height | The height of the Twitter timeline you want to embed on your sidebar. |
hidehomemenulink | Can be set to true or false . When set to true , the Home menu link in the navbar is not displayed. |
##Page Header Options
Blog item pages support the following additional options:
icon: users # optional Font Awesome icon for page title
header_image: false # display of header image located within page folder
continue_link: false # display entire post on blog listing page
taxonomy:
tag: Featured # setting to make post 'sticky' (i.e. remain at top)
hidefrompostlist: true # hide this blog post from blog index
All pages support the following additional options:
hidegithublink: true # hide GitHub edit link for this page
githublink: https://github.com/hibbitts-design/grav-skeleton-course-hub/tree/master/pages/01.home # to override the automatically calculated GitHub URL
hidepagetitle: true # hide the display of the title of this page