Skip to content

Instantly share code, notes, and snippets.

View francisrupert's full-sized avatar

Francis Rupert francisrupert

View GitHub Profile
@francisrupert
francisrupert / levels.html
Created April 24, 2020 16:03
fsa-style: Level Examples
<h2>Examples</h2>
<div class="phblppppbbbbh">
<div class="fsa-level fsa-level--align-top fsa-level--gutter-m">
<div class="fsa-level__item--shrink-none">
<img src="https://www.fillmurray.com/g/140/100" alt="">
</div>
<div>
<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
francisrupert / file.css
Last active December 11, 2019 18:57
Basic Angular DOM self
.outline { outline: 2px solid orangered; )
@francisrupert
francisrupert / index.js
Created October 17, 2019 15:08
js toggle menu
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
francisrupert / DEPTH.scss
Last active September 18, 2019 15:40
SCSS Mixin: reveal dom depth
@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); }
@francisrupert
francisrupert / template-literals.js
Created February 12, 2019 16:19
template literals
// 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 October 26, 2018 14:28
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.
/* 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);
@francisrupert
francisrupert / sass-map.html
Created June 14, 2016 14:28
SASS Map Example
<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 April 5, 2016 14:55
Switching Your GitHub Repo To Use Only The gh-pages Branch

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
{
"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",
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({