valdelama

How to build a journey-map style system (stack-agnostic)

This document describes how to recreate the same idea as this repository: documented, repeatable browser captures of important user journeys, with screenshots, human-readable contracts, and a small viewer—without assuming a particular backend, framework, or cloud.

Your web app can be built with anything (Rails, Django, Node, .NET, PHP, etc.). The capture layer stays thin and talks to the app only through HTTP(S) and the browser, like a real user.

---

What you are building

valdelama

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: $base-line-height/4;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    flex-basis: (100% / 12 * $i);

valdelama

$fliInput.blur(function() {
  // check if html5 validation passes
  if (!e.target.checkValidity()) {
    wrapper.addClass('error');
  } else {
    wrapper.removeClass('error');
  }
});

valdelama

@mixin arrow($direction, $color, $size){
  display: block;
  height: 0;
  width: 0;

  @if $direction == 'up' {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }