Skip to content

Instantly share code, notes, and snippets.

Erik Isaksen Nevraeka

Block or report user

Report or block Nevraeka

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View css-wishes.css
: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);
View test-json.json
"foo": "Hello Template",
"repeatCount": 5
Nevraeka / flexbox.scss
Created Sep 11, 2017
Flexbox example
View flexbox.scss
@mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes {
#{"--" + $prefix + "-" + $property}: #{$value};
#{$property}: $value;
@mixin flexbox {
display: -webkit-box;
display: -moz-box;
View CSS specificity order
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 / gist:3baad1bacd2393f0e3b0
Last active Aug 29, 2015
A curated list of Web Component Podcasts, Screencasts, & Interviews with Web Component community members
View Sass-parallax-example.markdown
Nevraeka / web-platform-module.js
Created Feb 3, 2014
Angular Web Component Integration - Psuedo Code Concept
View web-platform-module.js
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 / gist:8695535
Created Jan 29, 2014
Sample Gruntfile for prototyping
View gist:8695535
module.exports = function(grunt) {
pkg: grunt.file.readJSON("package.json"),
concat: {
dest: {
files: {
'public/js/p3c.js': [
Nevraeka / Polymer <x-picture>
Created Jan 16, 2014
Composed version of Responsive Images Polymer implementation of the HTML <picture> spec
View Polymer <x-picture>
<polymer-element name="x-picture" attributes="src srcset title alt currentSrc media">
x-picture {
text-align: center;
object-fit: contain;
object-position: center;
You can’t perform that action at this time.