Skip to content

Instantly share code, notes, and snippets.

Francis Rupert francisrupert

  • USDA-FSA via SAIC
  • 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
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>'
'</div>';
// With ECMAScript 6:
`
<div class="${className}">
<p>${content}</p>
@francisrupert
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: https://30-seconds.github.io/30-seconds-of-css/#easing-variables */
: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
francisrupert / gh-branch.md
Created Apr 5, 2016
Switching Your GitHub Repo To Use Only The gh-pages Branch
View gh-branch.md

Copied from http://www.xanthir.com/b4Zz0

(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 http://user.github.io/repo 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
require('time-grunt')(grunt);
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Listing Tasks
grunt.initConfig({
@francisrupert
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 *
@francisrupert
francisrupert / government-and-civic-design-systems.md
Last active Mar 30, 2016
Design Systems and Style Guides: Government, Civic
View government-and-civic-design-systems.md
View Quantity Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>page title</title>
<style>
.container {
margin: 40px;
You can’t perform that action at this time.