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 useanimation-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
- 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
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
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
#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
- 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
CSS Code Reviews
http://www.slideshare.net/Funstacy/no-pain-no-gain-css-code-reviews-ftw
Another attendee's blog post of notes and links
http://robandlauren.com/2015/10/28/css-dev-conf-2015/
A blog post mentioned in the last keynote
I haven't read it yet but it sounded good:
http://blog.capwatkins.com/the-boring-designer