Skip to content

Instantly share code, notes, and snippets.

Francis Rupert francisrupert

  • Kansas City, MO
Block or report user

Report or block francisrupert

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
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
francisrupert / test.csv
Created Mar 4, 2016
Sample CSV file, demos GitHub's preview ability
View test.csv
Branch Department Agency Public APIs Developer Hub Write APIs
Legislative ~~~ Architect of the Capitol
Legislative ~~~ Congressional Budget Office
Legislative ~~~ Government Accountability Office
Legislative ~~~ Government Printing Office *
Legislative ~~~ Library of Congress *
Legislative ~~~ Office of Compliance
Legislative ~~~ United States Capitol Guide Service
Legislative ~~~ United States Capitol Police
Judicial ~~~ Administrative Office of the United States Courts *
You can’t perform that action at this time.