Build Tools

We built our site utilizing many tools. The following is an outline of what technologies we are currently using, why, and any others that we're looking into in order to update the site.

Jekyll

Jekyll is the static site generator that we're using to build our site. It allows for easy hosting via GitHub Pages and it's written in Ruby—what more could you ask for!?

Here are some links that will help you get started with Jekyll:

• Jekyll Homepage: Jekyll is written in Ruby. It takes Markdown, Liquid, HTML, & CSS and transforms it into static web pages ready for deployment.
• Documentation: Quickstart on how to spin up a basic Jekyll site.
• Jekyll Talk: If you can’t find what you’re looking for in the docs, this is the next best place to look. Utilize their search functionality located in their navbar.
• Installation Guide: Make sure you check all requirements before beginning installation.
• Step by Step Tutorial: This is a good, comprehensive guide that takes you through building out a simple site.

YAML

YAML Ain’t Markup Language – what a fun acronym! This is what Jekyll’s front matter, data, and collections are written in.

Liquid

Jekyll uses the Liquid templating language to process templates.

• Liquid Homepage: Liquid was created by Shopify and written in Ruby.
• Documentation: Ruby gems documentation.
• GitHub Wiki: Liquid for Programmers and Liquid for Designers

GitHub Pages

The site is being hosted on GitHub through GitHub Pages.

• Setting up a GitHub Pages site with Jekyll: This is GitHub’s documentation on everything we need to know about hosting a Jekyll site via GitHub Pages.

Kramdown & Markdown

• Kramdown Homepage: Kramdown is the Markdown converter that GitHub Pages relies on when hosting a Jekyll site.
• GitHub Flavored Markdown: Here’s a GFM Spec guide and a simpler cheatsheet.

Third-party Plugins

CSS

• Bootstrap (v4.0.0): Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
• Font Awesome (v5.2.0): Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
• IcoFont (v1.0.1): 2100+ free icons to spice up your creative designs.
• Linearicons (v1.0.0): Ultra crisp line icons with integrity.
• Slick (v1.8.0): The last carousel you'll ever need. No longer maintained. Alternatives:
  • Splide: A lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
  • Embla Carousel: The most fluid carousel library with unmatched swipe precision.
  • Tiny Slider: A Vanilla JavaScript slider for all purposes.
  • Swiper: The modern mobile touch slider with hardware accelerated transitions.
• Owl Carousel (v2.3.4): Deprecated. Alternatives:
  • Splide: A lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
  • Embla Carousel: The most fluid carousel library with unmatched swipe precision.
  • Tiny Slider: A Vanilla JavaScript slider for all purposes.
  • Swiper: The modern mobile touch slider with hardware accelerated transitions.
• Animate.css (v3.7.x): A cross-browser library of CSS animations. As easy to use as an easy thing.
• Meanmenu (v2.0.7): A responsive menu plugin. No longer maintained.
• Magnific Popup (v1.1.0): A light-weight lightbox script. No longer maintained. Is this still needed?

JavaScripts

• Bootstrap (v4.0.0): Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
• Slick (v1.8.0): The last carousel you'll ever need. No longer maintained. Alternatives:
  • Splide: A lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
  • Embla Carousel: The most fluid carousel library with unmatched swipe precision.
  • Tiny Slider: A Vanilla JavaScript slider for all purposes.
  • Swiper: The modern mobile touch slider with hardware accelerated transitions.
• Isotope (v3.0.6): Filters & sorts magical layouts.
• imagesLoaded (v4.1.4): Detects when images have been loaded. No longer maintained.
• Waypoints (v2.0.3): Triggers a function when you scroll to an element. No longer maintained. Alternatives:
  • ScrollMagic: The javascript library for magical scroll interactions.
• Counter-Up2 (v1.0.x): A lightweight module that counts up to a targeted number when the number becomes visible. Alternatives:
  • countUp.js: Animates a numerical value by counting to it.
• Owl Carousel (v2.3.4): Deprecated. Alternatives:
  • Splide: A lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
  • Embla Carousel: The most fluid carousel library with unmatched swipe precision.
  • Tiny Slider: A Vanilla JavaScript slider for all purposes.
  • Swiper: The modern mobile touch slider with hardware accelerated transitions.
• Meanmenu (v2.0.7): A responsive menu plugin. No longer maintained.
• Magnific Popup (v1.1.0): A light-weight lightbox script. No longer maintained. Is this still needed?
• Simple Jekyll Search (v1.7.2)
• WOW (v1.1.3): Reveals CSS animation as you scroll down a page. No longer maintained.

• ESLint: Find and fix problems in your JavaScript code. We used the eslint-plugin-unicorn and eslint-plugin-prettier config extensions. It specifies a few ignorefiles in the package.json file.
• Stylelint: A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. We used the stylelint-config-sass-guidelines (based on the Sass Guidelines styleguide) and stylelint-config-prettier config extensions.
• Prettier: An opinionated code formatter. Prettier is run after ESLint and Stylelint. It has an ignorefile specified at .prettierignore.
• Husky: Modern native git hooks made easy. We can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks. Read this blog post about why husky has dropped conventional JS config to learn more about how it works under the hood.
• lint-staged: Run linters on git staged files. We use this in conjunction with Husky to let it know which files to lint.