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

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

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

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

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

Fortune Map

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

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

Category Design

Combining an understanding the problem we solve with offerings that are missing in the marketplace. Category design solves the problem of competing in a crowded landscape as a "me too" business.

Steps:

• Insight & Problem: Articulate using internal surveys the problem and the unique technology needed to solve it.
• Market Differentiation: Map existing companies in the space and how they define their category.
• Category Name: Define a name that serves as the container for the problem comprised of market type and audience.
• Market Trends: What trends does this emergent category rely on to resonate within the market.
• Marketing Canvas: Share your category vision as a marketing plan canvas.

vikramrojo

:root {
  --hdg-1: initial;
  --hdg-2: initial;
  --hdg-3: initial;

  --wid: initial;
}

.h1 {
  font-size: var(--hdg-1, 4rem);

vikramrojo

.isBrand {
  --blue: #4094ED;
  --green: #85E1B2;
  --cyan: #69D1EE;
  --red: #FF7452;
  --headings-line-height: 1.25;
  --animation-name: fadeIn;
}