Slow Steps, a Jekyll theme

A bold jekyll theme built for gaitQ. Designed to have two distinct styling, depending on current URL.

Jekyll Theme Scaffolding

How this repo is organised and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped under the root folder. The compiled Jekyll site outputs to _site/, which is never pushed to this repo, see https://www.gaitq.madeslowly.xyz/. General flow starts with a .md file in our root. With Front Matter, we declare our layout which points to a structural .html file in _layouts. From here, the layout file can call in data from our _config.yml with {{ site.variable }} and from any of our YAML files in _data/file.yml with {{ site.data.file.variable }}. The layout can also pull in other structural html snippets from _includes with {% raw %}{% include relative/path/file.html %}{% endraw %}.

It is worth noting that _include files can also perform the tasks just described. So, for example, when the deafult.html layout is executed (the penultimate step for all .md files), the head.html snippet is called, which in turn calls og-meta.html. Based on our sites settings and any relevant Front Matter belonging to the calling file, og-meta.html compiles all our og:meta tags and passes them to head.html which after adding further code, passes on to our default layout where it is placed at the top of our webpages html.

https://github.com/madeslowly/slow-steps/
|
├─ _config.yml/                   # Website settings
|
├─ _data/                         # Site data
|  |  |
|  |  ├─ forms/                   # Inputs for MailChimp forms
|  |
|  ├─ copy.yml                    # Website copy
|  |
|  ├─ menu.yml                    # Menu structure
|
├─ _includes/                     # HTML and Liquid templating
|  |
|  ├─ branding/                   # Site branding SVGs
|  |  |
|  |  ├─ site__logo.svg           # Site wide logo
|  |
|  ├─ footer/                     # Site wide footers
|  |  |
|  |  ├─ footer.html         # Multi col footer
|  |  |
|  |  ├─ footer.html              # Simple footer
|  |
|  ├─ forms/                      # Form scaffolding
|  |  |
|  |  ├─ mc-register.html         # MailChimp registration form
|  |
|  ├─ head/                       # Header partials
|  |  |
|  |  ├─ descriptor/              # Site wide descriptors
|  |  |  |
|  |  |  ├─ og-meta.html
|  |  |  ├─ structured-data.html
|  |  |  ├─ twitter-meta.html
|  |  |    
|  |  ├─ env/                     # Env <link rel="stylesheet"
|  |  |  |
|  |  |  ├─ conditional.html      # Page env: condition --> gaitq_env.css
|  |  |
|  |  ├─ head.html                # Routine to collate header partials
|  |
|  ├─ navigation/                 # HTML and Liquid templating
|  |  |
|  |  ├─ global.html              # <nav> html. Pulls from site.data.menu.  Not included in error pages or landing page. Otherwise we pull everything out of menu.navigation and use css to display environmental navigation. This might not be the best (overheads and accessibility).
|  |
|  ├─ scripts.html                # JS scripts & closing body & html tags
|
├─ _layouts/                      # HTML and Liquid templating
|  |
|  ├─ env/                        # Environmental specific layouts
|  |  |
|  |  ├─ data.html           # Professionals and press
|  |  ├─ walk.html                 # Patients and carers
|  |  ├─ landing.html             # Landing page only
|  |
|  ├─ compress.html               # Final step for all pages. Strips html comments, carriage returns and white space.
|  |
|  ├─ default.html                # Wraps page content with header, nav, scripts and footer.
|  |
|  ├─ error-page.html             # HTTP error pages
|
├─ _plugins/                      # Custom Ruby plugins
|  |
|  ├─ ImageSizeFilter.rb/         # IN DEVELOPMENT - get image size on jekyll build so we can precisely control img positions and any svg overlays. We can also use the data in og:image:
|
├─ _sass/                         # Sass partials
|  |
|  ├─ colors/                     # Site color settings
|  |  |
|  |  ├─ env/                     # Environmental specific colors
|  |  |  |
|  |  |  ├─ walk.sass              # walk environmental colors
|  |  |
|  |  ├─ _variable.sass           # <nav> settings
|  |  ├─ burger.sass              # Mobile burger
|  |
|  ├─ navigation/                 # navbar partials
|  |  |
|  |  ├─ _variable.sass           # <nav> settings
|  |  ├─ burger.sass              # Mobile burger
|  |  ├─ mobile.sass              # Default nav CSS
|  |  ├─ desktop.sass             # Breakpoint 768 CSS
|  |  ├─ data.sass           # data nav CSS & Breakpoint 768
|  |  ├─ patients.sass            # Patients nav CSS & Breakpoint 768
|  |  ├─ gaitq.sass               # GaitQ nav CSS & Breakpoint 768
|  |
|  ├─ typography/                 # Typography partials
|  |  |
|  |  ├─ _variable.sass           # Typography settings
|  |  ├─ resets.sass              # User agent resets
|  |
|  ├─ landing.sass                # Landing page
|
├─ assets/                        # HTML and Liquid templating
|  |
|  ├─ css/                        # Sass imports
|  |  |
|  |  ├─ gaitq_global.sass        # Global CSS, included on ALL pages
|  |  ├─ gaitq_gaitq.sass         # GaitQ env CSS
|  |  ├─ gaitq_walk.sass          # walk env CSS
|  |  ├─ gaitq_data.sass          # data env CSS
|  |  ├─ gaitq_landing.sass       # Landing page CSS
|  |
|  ├─ img/                        # All our imagery
|  |
|  ├─ JS/                         # All our JavaScript
|  |
|  ├─ vendor/                     # Third party CSS and JS code, never edit these, bad things WILL happen! If we need to overwrite something we have to add our own CSS or JS to do so.

Site Wide Configuration

_config.yml is where most variables are set.

`title:`

The global title of the website.

`subtitle:`

The global subtitle of the website.

Page Titling

Each pages is given a title according to,

{% if page.title %}
  {{ page.title }} | {{ site.title }}
{% else %}
  {{ site.title }} | {{ site.subtitle }}
{% endif %}

`description:`

Site wide description, used in head description, og:description, twitter:description and structured data. Overwritten by page front matter, description:

`url:`

Used to generate absolute URLs for sitemaps, feeds and for generating canonical URLs in a page's <head>. When developing locally either comment this out or use something like http://localhost:4000 so all assets load properly. Don't include a trailing /.

Examples:

url: "https://gaitq.github.io"
url: "http://localhost:4000"
url: "http://www.gaitq.com"
url: ""

`baseurl:`

Used when we are developing a partial.

`author:`

Author of this Jekyll project. Content authors can be added to _data/authors.yml and assigned in a pages front matter.

`postal_add:`

Postal address of GaitQ Ltd. Used in structured data.

`opening_hours:`

Used in structured data. This lets google know when we are open.

`logo:`

Site wide logo, used as a default image for Twitter and Facebook. Can be over written by a pages front matter: image:.

Google Analytics and Webmaster Tools

Google Analytics UA and Webmaster Tool verification tags can be entered under owner in _config.yml. For more information on obtaining these meta tags check Google Webmaster Tools and Bing Webmaster Tools support.

Navigation Links

To set what links appear in the top navigation edit _data/menu.yml. Use the following format to set the URL and title for as many links as you'd like.

group_name:
  - name:  Page name
    url:   /pageURL.html
    env:   environment
    submenu:
      - name: Page name
        url:  /pageURL.html

We for loop group_name = navigation. The env: controls where and how we see the navigation link and it's submenu contents. Currently we have three allowable envs:, gaitq, data and patients.

slow-steps

Development

Runtime