Skip to content

Instantly share code, notes, and snippets.

@mariusz

mariusz/gist:6549400

Last active December 22, 2015 23:49
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mariusz/6549400 to your computer and use it in GitHub Desktop.
Save mariusz/6549400 to your computer and use it in GitHub Desktop.
Download ZIP
CSSconf.eu - quick & dirty notes.
Raw
gistfile1.md

CSSconf.eu notes

Nicole Sullivan (@stubbornella) - Keynote

  • CSS keeps falling through the cracks in the space between design and development.
  • "Fuck your career. Follow your heart."

Peter Gasston - Web Components

  • Shadow DOM - secret markup inside elements that developers can't use. Rendered, but not visible in DOM.

  • How to make your own Shadow DOM

    var newRoot = $(foo).createShadowRoot()

Web Components

  • Encapsulation - object has everything it needs and nothing gets in or out.

  • Web Components - reusable widgets using Shadow DOM, Templates and custom elements.

  • <template> element - inert, nothing is loaded by the browser

    Hello world!

  • Web Components become active when they're loaded into the DOM.

  • <link rel="import" href="templates.html"> to reuse templates natively in the browser.

Custom elements

Register own HTML elements with

var wbar = document.register('wunder-bar')

The pattern needs to be something-something to not conflict to real elements.

<wunder-bar></wunder-bar>

CSS

  • Now you need to be aware of scope, until now, the scope was global

  • Scoped styles - <style scoped>

  • You don't need to use scoped parameter while using Shadow DOM, because Shadow DOM is already scoped (Shadow Scope)

  • Pseudo elements for styling within the Shadow DOM - part attribute

    var newEl = '

    ...

    ' .foo::part(apes) { color: red; }

  • Custom properties (variables) - var-[name]

    body { var-highlight: #f00; }

    h1 { color: var(highlight); }

    .foo { var-highlight: #00f; }

Potential future

  • decorator element - allowing media queries to fundamentally change the markup of the page with CSS

    Header

    h1 { decorator: url(#foo); }

  • Polymer Project - community-driven Shadow DOM polyfill

Ana-Maria Tudor - Math-powered transitions for 3D shapes

  • magic. Watch again.

Mike West - XSS (no, the other "S")

Harry Roberts - @csswizardry - Normalizing designs for better quality CSS or Why designers hate me

  • Slides: https://speakerdeck.com/csswizardry/normalising-designs-for-better-quality-css/
  • Push back on a lot of things that they want
  • #DesignersHateHim
  • very important to be able to manage scalability of the site
  • Keep front-ends: Lean. Scalable. Sane. Maintainable.
  • Build less.
  • If you can't design in the browser, decide in the browser.
  • Don't write tons of CSS to perfectly reproduce a design. Ever.
  • Users love nice UIs. And appreciate good design. But will leave before waiting.
  • If we can achieve 80% of design with 20% code, we should.
  • So much more to being a front-end developer than reproducing designs pixel for pixel. Look at the bigger picture.
  • Spot repetition and potential for repetition and normalize.
  • Sass: use $variables, @extend and silent (%) classes.
  • Premature / prepared abstraction: abstract up front. Saves you refactoring time later in the process.
  • Distill things into rules and numbers.
  • If something seems unreasonably difficult to build, don't build it.

Alex Sexton (@slexaxton) - Poopin out CSS

  • Slides: http://alexsexton.com/talks/pooping-out-css/#/
  • "All I want is a tool that eats Sass and poops CSS"
  • Parsing uses syntax rules of the language and figures out tokens.
  • Parser generators (PEGG) - generate parser based on expressions
  • when you're done, you represent code as data (array of strings)
  • then you add structure to represent stuff as objects
  • inception rule: never go further than four levels deep
  • Abstract Syntax Tree
  • Rework is made to do this.
  • Compilation of styles is fast - rarely a bottleneck - until you hook it up to change event.
  • To change variables without recompiling, capture what changed at a data level

Razvan Caliman (@razvancaliman) - Cutting edge CSS features

  • Adobe Web Platform team, implementation of CSS features and web standards
  • CSS regions, CSS blending & CSS shapes

CSS Regions

  • feature to bridge the gap between traditional publishing and digital publishing

  • control where content goes on your page - flow content into another element rather than hiding or scrolling it

  • named flows:

    .content { flow-into: myFlow; // Define content for flowing content }

    .content-container { flow-from: myFlow; // Pull content from myFlow flow }

  • CSS regions can be easily used as HTML templates

  • regions are only visual containers

  • Status: W3C Working Draft - works in Webkit, Blink and partially in new IE.

CSS Blending

  • part of a bigger spec called Blending and Compositing

  • Photoshop-like blending modes in CSS

    blend-mode: overlay

  • Future: element blending - blending text on background, for example.

  • Future: canvas blending

CSS Shapes

  • define practical, reusable shapes to wrap content around

  • two shapes of shapes: shape-inside, shape-outside

  • Adobe Alice in Wonderland demo

  • Adobe did a CSS shape editor for the browser.

  • Status: W3C Working Draft - partially in Webkit and Blink (Chrome/Canary)

  • Check out html.adobe.com

Polyfills

  • CSS shapes only, JavaScript only. Super slow.

Rachel Nabors (@rachelnabors) - Animation Studio Power Techniques w/ CSS3

Assumptions

  • we're using Chrome but should work in IE11 (10-ish)
  • using prefix-free script to not have to write prefixes
  • for production - Sass
  • Gem: Animation Studio

Storyboards

  • originally started by Disney (Snow White)
  • now adopted by IxD, comics, animation etc.

The Walk Cycles

  • the "Hello world" of animation
  • "If you do this once, you understand why animation work gets outsourced"
  • using @keyframes block, steps() and background-position to animate sprites

Cutouts

Scene transitions

  • signal a change in mood, time or location (or a commercial break)
  • period between sentences or space between paragraphs
  • should be used more in UX/UI design
  • big background image and background-scale for iris

Parallax

  • originally done using multiplane camera, using very special paint to offset the discoloration from the glass
  • done with background-position moving at a different pace

Timing functions / cushioning / easing

Shubhie Panicker - CSS Modules in Google+

  • problem of large apps
  • shared code: download once, load once
  • consider all the code needed - HTML, CSS, JS, templates
  • building on solution for JS - similar to AMD or CommonJS, open source Google moduleserver
  • download as needed, safely compose in a browser
  • identify shared components (CSS comes with the component)
  • bundle component code together (JS + template + CSS)
  • Closure templates + requirecss
  • component dependcy graph for the website
  • use constants and mixins to fit with the CSS dependency graph
  • Closure stylesheets - @provide/@require
  • cascade order dictates styles, not HTML or specificity
  • keep specificity as low as possible
  • use cascade order to override previous styles
  • @extend is a vast improvement over mixins for modules, but feature-specific code shouldn't show up in shared modules
  • dependency graph flattening preserves the order
  • descendant selectors tied to context, not HTML structure

Compilation

  • module = CSS grouping downloaded together
  • shared deps downloaded with the first module that needs it
  • analogous JS module

Chris Eppstein (@chriseppstein) - The Mind-Blowing Power of Sass 3.3

  • new book!

Sass 3.3 - in a month or two

  • source maps
  • string functions
  • data structure: map
  • SassScript goes meta
  • & in SassScript

Source Maps

  • Problem: generated JS and CSS are hard to debug.
  • Solution: Sourcemaps tell a browser how to get from CSS to Sass - currently in Chrome Canary
  • new option during compilation --sourcemap

New string manipulation functions

  • check if the string is quoted - is-quoted, length of a string - strlength, look for a substring - str-index, composing strings with str-insert and str-slice, first-word, to-upper-case and to-lower-case, camelize, capitalize

New data structure: Associated array (map)

A lot of functions to manipulate maps.

$theme: (base-color: orange, font: "Comic Sans", width: 3px)
$better-theme: map-merge($theme, (font: Zapfino, border-style: dashed))

.map-details {
    color: map-get($theme, base-color)
}

  • You can create maps of maps:

    $theme: (base-color: orange, font: ("Comic Sans", Zapfino))

  • You can @each maps

    @each $key, $value in $theme { #{$key}: $value }

Meta scripting

Mostly for framework people. Need to look into that more later on.

& in SassScript

There is now ability to use & parent selector within SassScript. You can now create modules:

mymodule {
    @at-root {
        .#{&}-header { width: 100%; }
        .#{&}-footer { position: fixed; }
    }
}

inject-parent mixin

#sidebar section
    +inject-parent(div)
        font-size: 1.5em

Returns:

#sidebar div > section
    font-size: 1.5em

@at-root directive

Used for unscoping.

Variable scoping

Something that LESS got right - variables are now scoped to their block. Local variables override globals, unless you use !global directive.

Angelina Fabbro (@angelinamagnum) - CSS Levels Up

  • Insights into how W3C CSS development process looks like.
  • Tab Atkins - "There is no such thing as CSS4" - CSS4 or CSS3 modules level independently.

What cool things are coming? (W3C WIP) - Super-future level 4 specs

  • corner-shape - describe corner for border-radius

  • border-clip - if you want to hide parts of the border. Can use fr - fractional unit from CSS3 Grid spec.

  • applying styles for ambient light sensors on the device:

    @luminosity: dim normal washed

  • media queries for luminosity (mind = blown)

  • image-set - normal images, HiDPI images, super-HiDPI images

  • element(#ID) - reuse #ID element as a background for another element

    background: element(#src)

CSS Selectors Level 4

  • :matches: a:matches(:link, :hover, :visited, :focus)
  • :not: h1:not(.title)
  • parent selector: p! > a - styling p that are parents to a, *! > a - select all parents of all links

Laptop died. :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment