Skip to content

Instantly share code, notes, and snippets.

Avatar
✌️

Chris Bracco cbracco

✌️
View GitHub Profile
@sarahdayan
sarahdayan / modifiers.scss
Last active Mar 2, 2022
Sass Modifiers Mixin
View modifiers.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan
@paulirish
paulirish / what-forces-layout.md
Last active May 24, 2022
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@jonlong
jonlong / cloudflare-purge-post-receive
Last active May 16, 2022
Purge CloudFlare when deploying GitHub Pages: post-receive hook
View cloudflare-purge-post-receive
#!/bin/sh
#
# Purge the CloudFlare cache after pushing an update to GitHub Pages
#
# To use, rename this file to "post-receive" and drop it into the `.git/hooks/` directory in your project's root.
# Change the $branch value based on the type of page you're deploying.
# Use "master" for Organization Pages, and "gh-pages" for Project Pages.
#
# Find your CloudFlare API token here: https://www.cloudflare.com/a/account/my-account
View gist:d717d4413a99716623b3
/*
* Scale CSS
* =========
*
* API
* ---
*
* Use an @import file to override the
* `--ratio` variable.
* Default is the golden ratio or phi
@mojaray2k
mojaray2k / jsbin.burut.html
Last active Jun 30, 2019
CSS only custom-styled select Todd Parker - Filament Group Inc. How this works: This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select's text visible. There is a wrapper around the select that has the majori…
View jsbin.burut.html
<html>
<head>
<title>Select styles with CSS only</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #fff;
font-family: helvetica, sans-serif;
margin: 4% 10%
}
@iansinnott
iansinnott / gulpfile.js
Last active Jul 9, 2016
A gulpfile for working with Jekyll
View gulpfile.js
// gulpfile.js
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
shell = require('gulp-shell'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
View _generated-placeholders.scss
// This code will only work if you use Sass 3.3 (or higher)
// Configuration :
// -----------------------------------------
$screensizes : (
'default' : 0 infinity,
'mobile' : 0 767px,
'phone' : 0 480px,
'tablet' : 481px 767px,
@petemcw
petemcw / 01-README.md
Last active Oct 25, 2021
Mac OS X LEMP Configuration
View 01-README.md

Mac OS X LEMP Configuration

This Gist is a collection of configuration files that can be used to easily setup a Homebrew-based LEMP stack on Mac OS X.

Files in this repository are numbered and named for ordering purposes only. At the top of each file is a section of metadata that denote what component the file belongs to and the default name & location of the file. Feel free to implement it however you want.

Note: some configuration files have hard-coded paths to my user directory -- fix it for your setup

Setup

View 01-gulpfile.js
/*!
* gulp
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
@t-io
t-io / osx_install.sh
Last active Apr 15, 2022
Install most of my Apps with homebrew & cask
View osx_install.sh
#!/bin/sh
echo Install all AppStore Apps at first!
# no solution to automate AppStore installs
read -p "Press any key to continue... " -n1 -s
echo '\n'
echo Install and Set San Francisco as System Font
ruby -e "$(curl -fsSL https://raw.github.com/wellsriley/YosemiteSanFranciscoFont/master/install)"
echo Install Homebrew, Postgres, wget and cask
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"