Design Stories, Documents and UX Mockups related to the fabric8-ui and fabric8-planner repositories.

All information is tracked by the User Experience Design Team.

• Important Links and References
• Installation
  • First Time Build
  • Subsequent Builds
• Troubleshooting
• Site Configuration
  • Navigation
  • Permalinks

• Design Links

  • Platform
  • Planner
  • Bayesian
  • Hypothesis Engine
  • fabric8 Patterns
  • Archived Designs

• Information Architecture

• HTML/CSS Code Guidelines Markdown | HTML

| This installation requires that you have Ruby, Node, Gem, Jekyll and Gulp installed. You can find a list of dependecies with versions here: Design Tracker Dependencies

1. Fork this repository
2. Rename as desired (we recommend with UX in the name)
3. Clone to your local machine
4. With Node, Gulp, Ruby, Gem and Jekyll already installed, run npm run initialize
5. Start with jekyll serve
6. Code away!

1. Verify that you have the following installed (see our Dependencies:
   • Node
   • Gulp
   • Gem
   • Jekyll
2. Run npm run initialize
   • commands as part of the script:
     • gem install bundler
     • bundle install
     • npm install
     • gulp
       • this will copy the files from your npm_modules directory to their respective locations for the jekyll build process
     • jekyll build
   • if this script fails, at the jekyll build step, run bundle exec jekyll build
3. run jekyll serve
   • for viewing locally at http://localhost:4000 (http://127.0.0.1:4000)

1. jekyll serve to start your environment on port :4000.

• If you are having issues with the site building, you can run a set of cleaning commands to reset your environment.

• If you have issues with the gem bundler, try to update your bundles with bundle update.

• npm run reinstall

  • This will clear out your node_modules folder, any vendor folders, reinstall all modules and copy vendor files back to their respective locations.

• gulp cleanVendors

  • This will remove just the vendor files that were copied over during the gulp process.
  • Run gulp to copy a clean set of vendor files back to your directories.

The Design Tracker Template utilizes PatternFly as the basis for the UI, which is built off of Bootstrap (3.x).

• at this time, there are no plans to move the Design Tracker Template to use Bootstrap 4.x

The navigation is based off of Bootstrap's navbar, and can be found under _includes/nav.html. Each link is configured using Jekyll's relative path scaffolding, along with an if page.navbar_active check. This check will apply the .active class to the navigation element, if the active page name matches the checked variable.

Example:

** this will apply the .active class to the page if "home" is the page's title.

{% if page.navbar_active == "home" %} class="active"{% endif %}

• To replace the navbar icon, swap out the existing icon.png found under assets/img/icon.png with your own image.
• To replace the favicon, swap out the existing favicon.png found under assets/image/favicon.png with your own image.

The Design Tracker utilizes Jekyll's built in Permalink solution in order to define simple and easy-to-use links. Each link is configured in the given pages front matter, with a relative path and permalink override. These, combined with the navbar_active name and layoutcallout, give each page their proper information.

---
layout: designs
title: Design Table Example 1
navbar_active: example1
relative_path: ../
permalink: designs/example1.html
---

• PatternFly
• Bootstrap
• Travis
• Shields.io