Notes from #CSSDevConf 2015

I attended CSSDevConf last week, on the Queen Mary in Long Beach, CA. The location was very cool and unique, and the content I thought was excellent. I came back very fired up to take on many of the ideas and processes, as well as explore and hopefully use some of the tools and technologies that were discussed.

Below are my notes which include links to some good slides and other resources:

Keynote: SVG

Sara Souidan

SVG in CSS
https://github.com/davidkpiano/sass-svg

Design Process (fill knowledge gaps with each other)

Developers should communicate what they need / what they plan to use the SVGs (or any designs) for
- Animations (separate pieces of the image / icon)
- Sprites vs not

Animation Deep Dive - #AnimDive

http://estelle.github.io/animation/

Transition

Single iteration, no control for intermediate states

Transition Placements

Be careful where you put them (usually need them in all classes)
Uses transition property of where it's going TO, not FROM

Transition Events

transitionend

Fires for every top level item (i.e. if you animate border then you get border-top, border-left, border-right, border-bottom and one for width and one for color etc)

Animations

more control, incluidng intermediate steps, pausing, ending
Name your keyframe animation (do NOT quote the names)
- & and ! are special characters, escape with \
- Don't use key terms in names, like running or paused
0% and 100% are implied if not provided (will use the starting CSS state)

div {
  animation: test infinite 10s alternate; 
  background: red;
}

@keyframes test {
  45% { background: green; }
  60% { background: blue; }
}

Don't use important in animations at all
Use commas to have two keyframes use the same styles
Can have duplicate keyframes (cascade like css)
1 required field: animation-name (will default to 0 seconds duration and fire an animation end); should always use animation-duration
animation-delay - can use negative delay to start in the middle
animation-direction - can do normal, reverse, alternate

Events

animationstart, animationend, animationiteration (not logged at the end)

React Inline Styles - #ReactCSS

Walmart CSS (80 devs)

Living style guide
examples, selectors, naming conventions
strict authoring guidelines (how to be productive)
code review

CSS Architect:

Care about css architecture, so that most the devs don't have to care

Specificity Hell

So many ways to do it
Multiple source files (asynchronously loaded even and non deterministic order)
Dead code - forever (deprecating from new use, but not removing the old)
CSS: it's hard to change; how to you iterate on large-scale CSS projects

React

Everything is a component
Encapsulate everything (classes, DOM structure, ARIA accessibility)

Related talk: "React: CSS in JS" by Christopher Chedeau

Global namespace
Dependencies
Dead Code Elimination

Facebook's solution: JS everything! (abandon CSS)
Radium: toolset to write inline styles

Advantages:

Working with JS objects
Use variables
Control the specificity (because they are inline)
If ALL components use this, then all things share the SAME specificity
- Source order independent
- Naming is no longer a problem
Dead code elimination (when you remove the component, you are removing the styles too)
Easy to modify & maintain

CSS Modules

basecss
tachyons

Doesn't get rid of CSS ^ use tools to extend it before new features are out

Web Components - Phil Walton - #WebMod

CSS developers should care
Selectors are the biggest determining factor in how scalable your code
- Selectors are global
- Bad CSS can effect the whole app
Bad selectors
- Anything that casts a wide net increase the changes of unintented matches
- Too specific, or worse: too general
Bootstrap - navbar example (3 divs, 1 to 2 classes each)
- Implementation details! encapsulate
Other languages usually prevent you from screwing up (CSS does not have that)

What is CSS Missing?

ability to scope or ilosate styles to a set of DOM nodes
ability to abstract away implementation details
ability to bundle set of styles with markup, assets

React & Web Components are not the same

React etc:

All need extra tools
Tools & conventions take time to learn, raise the barrier to entry
Not addressing actual problems, just working around

Web Components:

Native to platform
No extra tools

Parts of a web component

Shadow DOM

Shadow DOM, subtree of DOM nodes that you can create on any HTML element
- Shadow nodes are private - can be styled without effecting other elements with those same classes

Custom Elements

Similar to react, get lifecycle events
Create a class that inherits from HTMLElement, and register the elemnt

HTML Imports

<link rel="import" href="depending-element.html">

Templates

Inert bits of DOM. Contents aren't processed by the browser
Can put style elements in and not have them applied

Modular CSS

Inheritance

Import the base component
Call the base component's createdCallback to create base shadow root

<script>
class ProfileCardElement extends MediaObjectElement {
  
}
</script>

Composition

Establishes a has-a relationship

Import one or more components
Use the components in the shadow DOM

All together (inheritance + composition)

Theming: Custom properties

Inheritable styles DO go into the shadow DOM (but you have control of whether or not to allow that, per shadow DOM)

Can use CSS properties for passing in external styles

flex-grid {
    --flex-grid-gutter: 3em;
}

Fractals with CSS - #Fractals

CodePen

Use -webkit-box-reflect to reduce number of nodes
Able to animate millions of dots (divs)
Uses CSS due to performance, and native animations; but also because he enjoys it, as art
- Canvas is like being at school, CSS is like doing art

"I was told back in school that I should learn math, because it might be used in your career / job. But if they would have told me I would definitely need math to do art, I would have studied really hard!"

Responsible Data Visualization - #DataViz

Note: this was not "Responsive" Data Visualization

Accessibility

Don't only rely on colors
- Consider texture, additional labels

Designing a Design System

@jina
Jina, Senior UX Designer, Salesforce
https://speakerdeck.com/jina/designing-a-design-system
https://github.com/salesforce-ux/design-system

Design tokens

Designers refer to design tokens in their specifications
This allows designers that still use red line, to refer to: namespaced and enforced (ie borderRadiusSomething and can't be used for spacing)

Open source tool "theo"

Color swatches imported into Photoshop
Generates SASS automatically
Generates for other tools (Adobe Lightning)

V2MOM

Have a clear vision to align upwards

Design principles (ordered by priority)

Clarity (enable people to see, understand and act with confidence)
Efficiency (streamline and optimize workflows; intelligently anticipate needs to help the user)
Consistency (create familiarity and strengthen; intentionally below the other two)
Beauty (demonstrate respect for people's time and attention through thoughtful and elegant craftsmanship

designprinciplesftw.com

principles.adactio.com (collection)

"Focus first on designing the system of real-world objects, then on designing a system of implmentation to bring it all to life" - Sophia Voychehovski

Design Guidelines:

Principles
Color
Typography
Messaging

SalesForce: Automated testing for color contrasting enough

Design Patterns

Data entry
layout
loading
messaging
navigation, etc

Some goals of Salesforce w/ Lightning:

Empower developers
Empower designers

Clarity > brevity

Don't be too brief in documentation, CSS names, etc

Provide a flexible & optimal experience

dependencies
objects/components
utilities

Don't make it [a component] until you need it! (be lean)
stay focused

Designing in the browser

CSS office hours to educuate / train engineers & designers
living specifications
#deathtoredlines

A good design system needs a team

Team models for scaling

model #1: solitary
- like bootstrap, and provides to community
model #2: centralized
- one person/team handling stuff, providing to others
model #3: federated
- multiple product teams, deciding on the system together

Salesforce is blend of #2 & #3: cyclical team model

Pair with people, design system informs product design and then product design informs design system

Need human guideance.

Centralized design systems team:

Maintain the library
Consistency

Federated design systems contributors

Bring back research
Keep accurate
Current
Useful

The Sliding Scale of Giving a Fuck

Those that feel more strongly should win if you are stuck
Run your decisions through your ordered principles

github.com/salesforce-ux

Custom built pattern library using React

components folders:

sass file
documentation
markup
config file (prototype, in testing, production ready)

Used a script to generate library from those components

Keynote: Designing Purposeful Animation

Val

Great UI animation has style and purpose

12 Principles of Animation

BOOK: Disney's 12 principles of animation (printed book)

Create animation that feels a little bit real

Invoke an emotional response
Familiar

Just 3 of the 12 will cover most use cases

#1 Timing & spacing

Spacing: changes in speed over the duration of the action's timing

Establishes mood, emotion & reaction

Timing = duration
Spacing = easing

cubic-bezier.com

#2 Follow Through
Not everything comes to a stop at once
Overshooting the target position

#3 Secondary Action
Supplemental action reinforces and adds dimension

added slight animation within the body text, lagged behind (but didn't slow down entire animation). Made the dialog animation come to life and be more realistic

Choreography

Designing all your UI animations to feel logical and related

Similar objects, animate in similar ways
Entrance informs exit
Match velocities more so than duration

Brand in Motion

Work on a cohesive plan for your whole brand
Energetic? Friendy? Sleek? Strong? Playful?
IBM has a whole motion design guide, based on their old machines

Aim to build your own animation library

Document the categories of animation

Enter & exit
Give emphasis
Give feedbak
Transitions between states
Personality and brand
Orientation
Storytelling

Document your building blocks

Opacity
Scale
Colour
Depth
Postion
Rotation

Maybe only some of the above ^ And have specific examples

Examples of apps with animation
http://capptivate.co

Level 4 Selectors - #lvl4

The Good

Column combinator

.col-name || .child-selector {}

nth-column

like nth-child, but for columns in a table

Time dimensional pseudo classes

:current, :future, :past (for voice over, text translition)

Drag and drop

:drop :drop(active) :drop(valid) :drop(invalid)
it's on the drop target

:drop(invalid)
Accepts drop, but can't accept the current thing being dragged

Read/write

:read-only, :read-write
e.g. <input type=text disabled> is read only

Placeholder

:placeholder-shown (until an element gets focus)

Default

:default (select options, either the first item, or the one with default attr on it)

Intedeterminate

:intedeterminate (could have a value but doesn't have one yet; checkboxes, radio, progress)

Ranges

:in-range, :out-of-range (number elements with min/max set)

Validity

:valid, :invalid (considered valid unless there is a type on it and the value is not value; range, or number w/o a number); read-only does not get either selector

<input pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />

:user-invalid (if you have a 'required' attr on input, it has :invalid already, so this is only set once user interacts with control

Bonus: Works on fieldsets too!

:required, :optional (if the required attr is set. other inputs get optional, read only or divs etc get neither)

Blank

:empty and :blank (new)

Will match:

<div>   </div>

Languages

:dir(ltr), :dir(rtl) (select items that read right to left)

:lang(zh, "*-hant") wildcard selector for dialects

Links

:any-link matches <a href, <link href.., <map href

Scope

:scope

TODO: check out this more

Case insensitivity

[data-username="foo" i]

Descendant combinator

Same as spaces div a == div >> a (for consistency, no new functionality)

The Awesome

Not

:not(s1, s2) (support comma separted list now)

* bonus slide

*:focus and :focus are subtly different

Has

:has(s1, s2)
Won't EVER work in browser CSS. Will work in JS, etc

menu:has(a:not([...]) {
  padding-left: 20px;
}

For use in query selector, not in live CSS sheets

Matches

:matches(s1, s2)

:matches(.card, .sidebar) :matches(h1, h2, h3) {
  ...
}

CSS Architecture - #CSSArch

Jonathan Snook

Create Standards For Your CSS

All other languages get code review, not CSS
(At Yahoo, at Shopify)

Got to this talk late since I was in another session at the time. Went to a workshop, full SMACSS notes are here

Code Review Your CSS

styleguides.io

Closing Thoughts

Move towards composable UIs
Ensure modules are self-contained
Communicate! (to your team)

Bower Power - #Bower

Eric Carlisle, independent contractor

Maintains dependencies
Not a tool (used during dev)

Pre-reqs:

JavaScript runtime (node)
npm (Node.js package manager
git (version control)

Use bower OR npm

Use both! (they are similar, but have unique strengths)

Bower focuses on the client side

Abstracts concerns
Uses a flat dependency tree
Lives & breathes git
Establishes accountability (for you & components developers too)

Installs everything, but that's ok
Be sure to add bower_components to .gitignore
New devs just need to bower install

Zombie Pattern Libraries

Rethinking the design process
Not a technology problem. People and process problem
Should accelerate the design team and the dev team

Creative Cloud - Library (check it out - supported in Photoshop)
generates a pattern library site online

Sketch - has symbols (reusable elements)

Get Started Today

Take an inventory
The eco system
Screenshots of every page / state
List where things are found, refer to things by name
What to look for: Base styles (colors, spacing), Components, Page templates
Documentation
1. Basic is: name, desc, example and code snippet
Centralize your CSS
Define CSS standards
Refactor to perfection
Govern the library

Tools

CSS documentation - KSS
Static site generation - patterlab.io (atomic design systems)

PatternPack

Build and document your interface. Then share the code.
Exports as npm / bower module

npm init
npm install grunt patternpack --save-dev

grunt patternpack:run

Use semantic versioning for your design system: Major, minor, patch

git push --follow-tags

npm install <full git url>

Keynote - The Art of Being Wrong

Dave Rupert

shoptalkshow.com
godaytrip.com

Great talk, didn't take notes.

Key takeaways:

it's okay to be wrong
it's okay for others to be wrong (and you don't need to correct people all the time!)
have discussions, don't just make blanket statements

Other Resources from Conference