Ste Pammenter SvenPam
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <small | |
| v-if="diff !== 0" | |
| :class="previous < current ? 'text-danger' : 'text-success'" | |
| > | |
| £{{ (previous - current) | format(0) }} | |
| <template v-show="lastUpdated !== null"> | |
| vs | |
| {{ formatDate(lastUpdated) }} | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $blockName: 'product'; | |
| .#{$blockName} { | |
| //... | |
| &__price { | |
| // ... | |
| &--dicount { | |
| // ... | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // $ comes from using gulp-load-plugins. | |
| gulp.task('assets:sprites', function () { | |
| return gulp.src(`${paths.source.images}/icon/**/*.svg`) | |
| .pipe($.changed('./')) | |
| .pipe($.svgSprite({ | |
| shape: { | |
| spacing: { | |
| padding: 2 | |
| } | |
| }, |
SvenPam
/ font-minification-webpack.js
Last active
November 19, 2018 09:21
Font Minifification - Webpack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let fontmin = new Fontmin() | |
| .use( | |
| Fontmin.glyph({ | |
| text: `1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_'abcdefghijklmnopqrstuvwxyz?&{|}\/~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽž,“”‘’` | |
| }) | |
| ) | |
| .use(ttf2woff2()) | |
| .use(Fontmin.ttf2woff()) | |
| .src(`${plConfig.paths.source.fonts}/**/*.ttf`) | |
| .dest(plConfig.paths.public.fonts); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // $ comes from using gulp-load-plugins. | |
| gulp.task('assets:font', function () { | |
| return gulp.src(`${paths.source.fonts}/**/*.ttf`) | |
| .pipe($.changed('./')) | |
| .pipe($.fontmin({ | |
| text: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}\/~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽž,“”‘’", //Basic Latin & Latin Extended | |
| hinting: false, | |
| quiet: false | |
| })) | |
| .pipe($.ttf2woff2()) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family: 'my-font'; | |
| src: url('regular.woff2') format('woff2'), url('regular.woff') format('woff'), url('regular.ttf') format('truetype'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.75rem}p{margin-top:0;margin-bottom:1.8rem}abbr[data-original-title],abbr[title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0}address{font-style:normal;line-height:inherit}address,dl,ol,ul{margin-bottom:1rem}dl,ol,ul{margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// <binding ProjectOpened='watch' /> | |
| /****************************************************** | |
| * PATTERN LAB NODE | |
| * EDITION-NODE-GULP | |
| * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets. | |
| ******************************************************/ | |
| const | |
| fs = require('fs'), | |
| gulp = require('gulp'), | |
| path = require('path'), |
SvenPam
/ module-pattern-w-jquery.js
Last active
January 25, 2017 15:21
Module Design Pattern for JS...because I always forget the template.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| // Module description | |
| var module = (function ($) { | |
| function privateFunction() | |
| return { | |
| publicFunction: function () { | |
| privateFunction(); | |
| } | |
| } |
SvenPam
/ demo-output.css
Created
July 8, 2016 11:26
Demoing the use of SASS loops to create a gradient coloured list.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| li:nth-child(1) { | |
| background-color: #92cc00; } | |
| li:nth-child(2) { | |
| background-color: #6d9900; } | |
| li:nth-child(3) { | |
| background-color: #496600; } | |
| li:nth-child(4) { |
NewerOlder