Skip to content

Instantly share code, notes, and snippets.

View frontendbeast's full-sized avatar

Darren Jansson frontendbeast

View GitHub Profile
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@frontendbeast
frontendbeast / sm-annotated.html
Last active June 25, 2020 13:57 — forked from hdragomir/sm-annotated.html
The deferred font loading logic for Smashing Magazine, updated to include IE8 support. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@frontendbeast
frontendbeast / Default (OSX).sublime-keymap
Last active July 16, 2019 07:45
Simple example of a key-mapped Sublime Text snippet (⌘+b for bold)
[
{ "keys": ["super+b"], "command": "insert_snippet", "args": {"name": "Packages/User/bold.sublime-snippet"} },
// Set context so shortcut works in HTML files only
{ "keys": ["super+b"], "command": "insert_snippet", "args": {"name": "Packages/User/bold.sublime-snippet"},"context":[{ "key": "selector", "operator": "equal", "operand": "text.html" }] }
]
// Instead of doing this
@mixin svg-after($name) {
&:after {
@include svg($name);
}
}
@mixin svg-before($name) {
&:before {
@include svg($name);
@frontendbeast
frontendbeast / gist:0034b7697cc9831c693d
Last active May 26, 2016 06:27
Namespaced, hyphenated BEM covention regex for SCSS-Lint
linters:
SelectorFormat:
convention: ^(_)?[a-z]+-[a-z0-9-]+((_{2}|-{2})?[a-z0-9-]+)?(-{2}[a-z0-9-]+)?[a-z0-9]$
convention_explanation: 'should be written in namespaced, hyphenated BEM format'
ignored_types: [element]
gulp.src([ '**/*.scss' ])
.pipe( postcss([ autoprefixer({ browsers: '> 5% in my stats', stats: 'path/to/the/stats.json' }) ]) )
.pipe(gulp.dest())
@frontendbeast
frontendbeast / gist:7188558
Last active March 5, 2016 13:53
Craft CMS future events listings, sorted by date and grouped by month and year. Requires Danny Nimmo's SortByField plugin. https://github.com/dannynimmo/craftcms-sortbyfield
{% set allEvents = craft.entries.section('events').find() %}
{% set futureEvents = [] %}
{% for event in allEvents %}
{% if event.startDate | date('U') >= 'now' | date('U') %}
{% set futureEvents = futureEvents | merge([event]) %}
{% endif %}
{% endfor %}
{% for date, events in futureEvents | sortByField('startDate') | group('startDate|date("F Y")') %}
@frontendbeast
frontendbeast / gist:7710467
Created November 29, 2013 19:06
Watch task for grunt assemble using grunt-newer (https://github.com/tschaub/grunt-newer)
watch: {
assemble: {
files: ['<%= app.app %>/*.html', '!<%= app.app %>/<%= app.templates %>/{,**/}*'],
tasks: ['newer:assemble:server']
},
assemble_templates: {
files: ['<%= app.app %>/<%= app.templates %>/{,**/}*.html', 'data.json'],
tasks: ['assemble:server']
},
compass: {
@frontendbeast
frontendbeast / gist:6974267
Created October 14, 2013 11:31
SASS percent from pixel widths
@function percent($numerator, $denominator) {
@if $numerator == 0 { @return 0 }
@return ($numerator / $denominator)*100 + 0%;
}
@frontendbeast
frontendbeast / gist:0b2a0e6154f2bd45d560
Created July 17, 2015 14:17
gulp-minify-css settings
var minifyCssOpts = {
advanced: false,
mediaMerging: false,
processImport: false,
roundingPrecision: 6
};