Skip to content

Instantly share code, notes, and snippets.


Francis Rupert francisrupert

  • Kansas City, MO
View GitHub Profile
francisrupert / levels.html
Created Apr 24, 2020
fsa-style: Level Examples
View levels.html
<div class="phblppppbbbbh">
<div class="fsa-level fsa-level--align-top fsa-level--gutter-m">
<div class="fsa-level__item--shrink-none">
<img src="" alt="">
<h3 class="fsa-m-t--none">Temporibus exercitationem sequi cupiditate a excepturi nihil distinctio</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae aperiam dolore provident ex ab
francisrupert / file.css
Last active Dec 11, 2019
Basic Angular DOM self
View file.css
.outline { outline: 2px solid orangered; )
View index.js
const toggleMenu = document.querySelector(".navigation button");
const menu = document.querySelector(".navigation ul");;
toggleMenu.addEventListener("click", function () {
const open = JSON.parse(toggleMenu.getAttribute("aria-expanded"));
toggleMenu.setAttribute("aria-expanded", !open);
menu.hidden = !menu.hidden;
francisrupert / DEPTH.scss
Last active Sep 18, 2019
SCSS Mixin: reveal dom depth
View DEPTH.scss
@mixin DEPTH($rootBG:true) {
html body & {
@if $rootBG {
background-color: rgba(0,0,0,.08);
html body & * { background-color: rgba(255,0,0,.08) ; }
html body & * * { background-color: rgba(0,255,0,.08) ; }
html body & * * * { background-color: rgba(0,0,255,.08) ; }
html body & * * * * { background-color: rgba(255,0,255,.08); }
View template-literals.js
// The plain old way:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
// With ECMAScript 6:
<div class="${className}">
francisrupert / easing-variables.css
Created Oct 26, 2018
Variables that can be reused for transition-timing-function properties, more powerful than the built-in ease, ease-in, ease-out and ease-in-out.
View easing-variables.css
/* CREDIT: */
:root {
/* Place variables in here to use globally */
.easing-variables {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
View sass-map.html
<div class="thingie-do thingie-do--bandcamp">bandcamp</div>
<div class="thingie-do thingie-do--delicious">delicious</div>
<div class="thingie-do thingie-do--facebook">facebook</div>
<div class="thingie-do thingie-do--ficly">ficly</div>
<div class="thingie-do thingie-do--flickr">flickr</div>
<div class="thingie-do thingie-do--github">github</div>
<div class="thingie-do thingie-do--googleplus">googleplus</div>
<div class="thingie-do thingie-do--instagram">instagram</div>
<div class="thingie-do thingie-do--kickstarter">kickstarter</div>
<div class="thingie-do thingie-do--lanyrd">lanyrd</div>
francisrupert /
Created Apr 5, 2016
Switching Your GitHub Repo To Use Only The gh-pages Branch

Copied from

(This is a simplified version of the advice on Oli Studholme's blog, cut down to just the parts that I've actually needed. I do this often enough, and always forget the steps, so having it put down here is useful for me, and maybe for someone else.)

So you want to serve your repo from the url, and don't have any reason to separate a "code" and "serve" branch. In other words, you want your GitHub repo to only use the gh-pages branch, not master. Here's an easy guide to making that happen.

First, if you already have a gh-pages branch, make sure it's synced up to master, showing exactly what you want. If you don't, type...

git checkout -b gh-pages
View Package-sample.json
"name": "foofoo",
"description": "Lorem ipsum dolor sit amet",
"version": "0.1.0",
"private": true,
"devDependencies": {
"grunt": "^0.4.2",
"grunt-browser-sync": "^2.0.0",
"grunt-concurrent": "^0.4.3",
"grunt-contrib-clean": "^0.5.0",
View Gruntfile-sample.js
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
// Load grunt tasks automatically
// Listing Tasks