every-thing-will-be-fine

View Github Repository Open presentation in a new window

winkerVSbecks

See all presentation from winkerVSbecks

every-thing-will-be-fine

0 1

every-thing-will-be-fine

On Github winkerVSbecks / every-thing-will-be-fine

hello.

Varun Vachhar

@winkerVSbecks

Overview

  • Designing with code
  • Where does it break down?
  • A better different approach to CSS
  • SVG

Prototyping

Prototyping Is Great for Figuring Out

  • The What?
  • and the Why?

Designing With Code

Find the answer to the how?

Why Designing With Code?

  • Promotes designers & developers to collaborate early
  • Reduces the gap between building and learning – iterate faster
  • Establishes the “UI Developer/Designer” role
  • Problems related to the “fluid canvas” become more obvious
  • Start delivering value early

The Problem

http://s.codepen.io/winkerVSbecks/debug/vNBBJO

The First Iteration

  .header-bar { … }
  .header-bar__title { … }
  .header-bar__actions { … }

  .card { … }
  .card__body { … }
  .card__figure { … }

The Second Iteration

Card + Graph List + Numbers

Throwing away code Start building the new component Writing more CSS for it Wasting time

What Problem Are

You Trying to Solve?

We keep solving the same problems over and over again

Our focus should be the UI and the crafting the user interaction. Not fighting CSS.

Ideation Learning

Every Thing Will Be Fine

A better different approach to CSS

Use a type scale Use a white space scale Utility classes… a lot of utility classes

Type Scale

Type Scale

White Space Scale

White Space Scale

0.5rem, 1rem, 2rem & 4rem

Utility Classes

BEM

  .header-bar { … }
  .header-bar__title { … }
  .header-bar__actions { … }

  .card { … }
  .card__body { … }
  .card__figure { … }

Metrics

https://www.chromestatus.com/metrics/css/popularity

Utility Classes For

Thinking in Components

  • Your app/site is just a collection of components
  • Each component is independent and self sufficient

Thinking in Components

  • Components should be responsive
  • Expand to fit its parent – 100% width
  • Layout/core visual styling comes from the utility classes

Basscss | Gravitons | Tachyons

Write Less CSS and Iterate Faster

http://codepen.io/winkerVSbecks/pen/vNBBJOhttp://s.codepen.io/winkerVSbecks/debug/vNBBJO

CSS Lego

BEM + OOCSS

Scalability

  • Single purpose classes
  • Easy to understand
  • Easier to reason about cascading
  • No fear of impact
  • Get in, update styles & get out

SVG

What is it good for?

More Examples

Sketch/Ai ➡ Web

Compose SVG in Code

SVG + React/Angular

http://winkervsbecks.github.io/fermat-point

Show Me the Code

http://codepen.io/winkerVSbecks/pen/98b270f0a0a9bbdf21d4c8b08f51eb7c

Thank You!

Varun Vachhar

@winkerVSbecks

Photo Credits

hello.