Nevraeka

:root {
  --translate-item: calc(50% - 20px);
}

.x-translate {
  box-sizing: content-box;
  padding: 8px;
  width: 24px;
  height: 24px;
  background-color: rgba(0,0,0, .8);

Nevraeka

{
  "foo": "Hello Template",
  "repeatCount": 5
}

Nevraeka

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{"--" + $prefix + "-" + $property}: #{$value};
  }
  #{$property}: $value;
}

@mixin flexbox {
  display: -webkit-box;
  display: -moz-box;

Nevraeka

When you load css bundle asyncronously this can happen:
>> FYI- bundling assets is a separate issue from CSS core features
1) it load:
.class-3 { color: green; }
<div class="class-3">

2) it load
.class-1 { color: red; }
.class-2 { color: blue; }

Nevraeka

The Web Ahead by @jensimmons

• Web Components with Peter Gasston
• Componentizing the Web with Rob Dodson

Shop Talk Show by @chriscoyier

• 124: Rob Dodson
• 141: Marcy Sutton

JavaScript Jabber by @cmaxw

• Google Polymer with Rob Dodson and Eric Bidelman

Nevraeka

JaFDK

A Pen by Erik Isaksen on CodePen.

License.

Nevraeka

Sass parallax example

By locking the perspective on the body element and transforming elements in 3D on top of that, you can easily create parallax scrolling effects that don’t require JavaScript and can be much more performant as a result. Mixins can be found here: http://codepen.io/scottkellum/pen/Jwudg

Forked from Scott Kellum's Pen Sass parallax example.

A Pen by Secret Sam on CodePen.

License.

Nevraeka

angular.module('web-platform', ["$ComponentSvc","$PolyfillSvc"]).component('ngw-picture',
  ["$components", function($components) {
    return {
      scope: {},
      link: function($scope, $customElement, $attrs) {
                   
          var srcSets = $customElement.find('ngw-src-set');
          
          // checks name for syntax - returns error if syntax is incorrect
          // uses name to generate 

Nevraeka

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    concat: {
      dest: {
        files: {
          'public/js/p3c.js': [
            'app/assets/js/*.js',
            'app/assets/js/services/*.js',
            'app/assets/js/controllers/*.js',

Nevraeka

<polymer-element name="x-picture" attributes="src srcset title alt currentSrc media">
  <template>
    <style>

      x-picture {
        text-align: center;
        object-fit: contain;
        object-position: center;
      }