Skip to content

Instantly share code, notes, and snippets.

Avatar

Erik Isaksen Nevraeka

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
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
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
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
Nevraeka / gist:8695535
Created Jan 29, 2014
Sample Gruntfile for prototyping
View gist:8695535
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
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">
<template>
<style>
x-picture {
text-align: center;
object-fit: contain;
object-position: center;
}
You can’t perform that action at this time.