Welcome to the linaro-jekyll-theme

This Jekyll 4 theme is built and maintained by Linaro. The theme is currently being used across all of our static websites:

Features

Here are some of the features that this theme enables for our static websites.

Features

A few of the main features that this theme offers:

  • Lazy loading of images using the lazysizes.js/ls.unveilhook.js libraries
  • Diverse page jumbotron options including options for a video background, lazy loaded responsive background image or breadcrumb header
  • Nav.yml data file for navigation bar setup
  • footer.yml data file for page footer setup
  • Optional "Edit me on GitHub" buttons (useful for OSS projects)
  • universal_nav.yml (useful cross-site navigation bar for linking related projects)
  • jekyll_picture_tag plugin for generating responsive next-gen images to improve end-user experience
  • flow layout - the simplest way to create responsive and dynamic static website pages without knowing any code (works well with NetlifyCMS)
  • SASS support from the built-in sass support from Jekyll
  • Open links to an external website in a new tab (javascript snippet)
  • Copy to clipboard javascript snippet for blog post code blocks
  • Netlify CMS support for the "flow" layout and website config files i.e settings.yml, nav.yml, footer.yml

CSS / Fonts

  • Bootstrap 4
  • SASS based styles
  • Page/Layout specific css bundles (you can specify the name of a css-package in the frontmatter of page)
  • Lato Google font statically included
  • Fontello - Custom Icon fonts builder for static sites

Javascript

  • jQuery JavaScript Library
  • Popper JS - popup plugin used by Bootstrap 4
  • Bootstrap 4 JS
  • clipboard.min.js
  • GDPR Compliant Cookie pop up with jquery.ihavecookies.js/jquery.cookie.js
  • Clipboard.min.js for enabling users to copy code snippets from blog posts easily
  • simple-jekyll-search for searching posts easily
  • Owl Carousel for cross-platform content carousels
  • lazysizes.js / ls.unveilhook.js (lazyloading of image/picture elements and css background images)
  • featherlight.js (ultra-lightweight lightbox)

Setting up a new site

TODO