vikramrojo

<template lang="pug">
  article
    .padY1.bordB1
      .cols.nav
        a.isLeft.col Sales:
          span.marGapL4.bold +1 833 GIGSTER
        .isRight.col
          .button.bgOrange.bordOrange.bold Chat
    .row
      .col8

vikramrojo

Fortune Map

fortune.css
├──reset.css
├──variables.css
│   ├──Tokens
│   ├──Media Multipliers
│   ├──Colors
│   ├──Components General
│   └──Components & Elements

vikramrojo

Feature Roadmap

Deliverables

• Explorations of a fortune element (button.css) implemented in a stateful way as a vue component, eg <Button disabled>
• Fortune elements reviewed for states and lacking variables, eg button.css requires --border-state
• Exploration of a vue pattern that recombines components, eg <PricingTable> which includes <Button> & <Table>
• Sampling of Fortune syntax as PascalCase (classes & variables), eg.class="PadL2"
• Sampling of documentation section
• Sampling of css commenting
• Sampling of blog post
• Assessment of removing gulp in favor of simple task runners for minification, utility class generation and browser prefixing

vikramrojo

Loot Supply
  Landing Page
    Collections -> Collection
    Featured Items -> Item
    Articles -> Article
    Shop -> Shop
  Collection
    Description
      Prologue
      Photo

vikramrojo

Design Operations

Within a product organization, a number of workflow and environmental factors affect the effectiveness and impact of design work. Design operations manages aspects of culture and process, allowing designers to focus on execution while expanding the range of design's scope.

Design operations tackles common product challenges like;

• interface consistency
• clarifying specification
• user testing
• developer handoffs

It addresses these factors by managing and communicating aspects of the design workflow like;

vikramrojo

1. Create a Github account
2. Install Github Desktop
3. Install iTerm2
4. Install nvm https://github.com/creationix/nvm
5. Go to http://fewd.nyc/pages/lessons.html
6. Learn html elements https://htmlreference.io/
7. Learn css elements https://cssreference.io/

vikramrojo

html
	body.bg-smoke
		a(href="#")
			.slide.z-2.h2.fixed.minvh-100.left-0.bottom-0.w-4.flex.flex-center.bg-smoke <  
		a(href="#")
			.slide.z-2.h2.fixed.minvh-100.right-0.bottom-0.w-4.flex.flex-center.bg-smoke >  
		.container.p-0
			.row.mx-4.z-1
				.col-2.pt-4.bg-smoke.minvh-100.hide.sticky.top-0.self-start
					h2 TOC

vikramrojo

Usable Interface

Derived from various usability literature, these 8 usability inspection criteria are meant to be used in critiques and evaluations of web applications.

💰 Affordance

Degree to how seamlessly an app’s layout directs a user to their goals

Requirements Provision

• The set of features offered by the system satisfies the needs and requirements of users

vikramrojo

Usability Criteria

Derived from various usability literature, these usability inspection criteria are meant to be used in heuristic evaluations of web applications.

Requirements

Identifying a match between system and user

UC1_Requirements provision

The set of functions offered by the system best caters to the needs and requirements of user

User and System

vikramrojo

import React from 'react';
import styled, { ThemeProvider, css } from 'styled-components'
import { darken, lighten } from 'polished'
import { space, width, fontSize, color } from 'styled-system'

import { storiesOf } from '@storybook/react';
// import { action } from '@storybook/addon-actions';
// import { linkTo } from '@storybook/addon-links';

//Theme for Layers