MOB Theme : Jekyll Edition

https://rubygems.org/gems/manoverboard-alpha

If you are unsure how to use this theme, contact nikki@manoverboard.com.

When pushing updates to this theme, please be specific with your push descriptions, and please update the below documentation.

Please add your own features and modify as you like, but keep in mind that if you keep the file structure and naming conventions the same, we will all be able to work together as a team more efficiently.

Installation

Add this line to your Jekyll site's Gemfile:

gem "manoverboard-alpha"

And add this line to your Jekyll site's _config.yml:

theme: manoverboard-alpha

And then execute:

$ bundle

Or install it yourself as:

$ gem install manoverboard-alpha

Usage

Quick Links

• BEM: Please use the BEM class model.

Modified Files from old theme(s)

base.scss | deadname: style.css.

init.scss

Slight update, now is used as a sass include.

New Files

/js/global.js | deadname: theme_scripts.js

Things should only go in here if they apply to the entire website, or multiple pages. Please remember to wrap them in if/if else statements to reduce errors and run time.

Removed simple expand and resize to parent. You can find these in the previous theme if you need to use them, but both are considered outdated or over-engineered.

Added function to add class to html if is keyboard user. This is handy to style your focused elements.

/scss/layout.scss

New grid system including the good ol' .wo and .inner styles. Imports into the main.scss. Read more about it under MOB CSS Grid System

SASS: Learn here

What's New?

Main stylesheet has been converted to SASS with SCSS syntax instead of SASS syntax to keep plain CSS still valid. The print stylesheet has been left as css since it does not get modified often, it can be found in the already compiled css folder.

New sass stylesheet

Includes partials that can be added or removed easily by commenting or un-commenting their import line. This includes our initialization stylesheet partial: init.scss.

Mix-ins and variables

To speed up the web development process. Add your own :)

CSS Grid - New layout system

Classes & Properties

.hidden renamed to .sr-only

Same functionality, just a more intuitive name now. Class to visually hide elements, but keep for screen readers.

z-index

Please use numbers in order to indicate depth. This makes it easy to scan and fix z-index issues.

Highest could be 9 - 123456789 Lowest could be 1 - 1

MOB CSS Grid System

Will make responsive work much easier and coding sites to spec much faster! If the design does not line up with the column grid in the design file, please see the designer to see what they want to do about it.

Syntax

Uses syntax like: "col-#start#-to-#end#". Start being the left gutter and end being the right gutter. You don't have to use it everywhere if it doesn't make sense for the design, obviously! Just to help you out. Must be wrapped with the "wo" class. The old .inner class is folded into the column declaration.

Variables can be changed, number of columns, width, etc. in base.scss.

- - stacked Modifier

Use this (.wo--stacked) instead of .wo when you don't need to use the grid system because items are stacked on top of one another rather than beside.

- - full Modifier

Use this (.wo--full) instead of .wo when the layer should be 100% width with no outer margins like for heros, and full width images.

.left | .justify | .right | .center

You can use these classes on the column declaration to set the text as centre aligned or right aligned.

JAMstack Plugins

Good resource: https://github.com/planetjekyll/awesome-jekyll-plugins

Basics

• Instead of antispambot https://github.com/vwochnik/jekyll-email-protect
• SASS converter is already installed if you're using Jekyll

Image Compression

• this but it hasn't been updated in a while https://github.com/valerijaspasojevic/jekyll-compress-images

SEO

• Redirects https://github.com/jekyll/jekyll-redirect-from
• Sitemap generator https://github.com/jekyll/jekyll-sitemap
• SEO tags generator https://github.com/jekyll/jekyll-seo-tag

Performance

• Lazy loading images (won't work in safari tho) https://github.com/gildesmarais/jekyll-loading-lazy

Social Feeds

• Twitter https://github.com/rob-murray/jekyll-twitter-plugin
• Instagram and Facebook are likely gonna be sucky to embed, should wait to see if existing plugins break after the 24th: "Facebook now requires each developer to register an app, and use a client token when getting data from their Graph API for oEmbed content beginning on the 24th of October, 2020"

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in manoverboard-alpha.gemspec accordingly.

License

The theme is available as open source under the terms of the MIT License.