Skip to content

Instantly share code, notes, and snippets.

View grayghostvisuals's full-sized avatar
🐢
I may be slow to respond.

GRAY GHOST grayghostvisuals

🐢
I may be slow to respond.
292 followers · 133 following
View GitHub Profile
@chrisvanpatten
chrisvanpatten / gulpfile.js
Last active June 19, 2017 01:35
Ignore .html extension in local gulp-connect server
var gulp = require('gulp')
var connect = require('gulp-connect')
var connectRewrite = require('connect-modrewrite')
/**
* Serve requests
*/
gulp.task('serve', function () {
connect.server({
root: 'public',
@davidhund
davidhund / accessible-svg-sprite-icons.md
Last active August 30, 2024 17:03
Figuring out the most robust, accessible markup for SVG Sprite Icons

(as a reply to: https://css-tricks.com/svg-use-with-external-reference-take-2/)

While I love SVG (sprites) there are a lot of issues to take into account.

Advocating The Most Accessible Markup

UPDATE: you should take a look at https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html which seems a simpler and more robust approach

Another thing: since people copy-paste our code examples it would be great if we could advocate the most robust and accessible markup IMO. I am no a11y expert, but in my understanding we could/should take some extra steps to make out SVG sprite icons more accessible.

@paulirish
paulirish / what-forces-layout.md
Last active January 17, 2025 13:42
What forces layout/reflow. The comprehensive list.

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
@davidkpiano
davidkpiano / prefix.markdown
Last active August 29, 2015 14:21
Prefix syntax for class naming

A simple alternative to BEM

Project

Choose a prefix for your project. If your project is called "The XY Project", for instance, choose xy-.

Components

Prefix them with your project prefix. Simple as that. Component classes are never lengthened.

/* Specifity: 0 1 0 */
@bobbygrace
bobbygrace / trello-css-guide.md
Last active December 10, 2024 21:04
Trello CSS Guide

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

@joe-watkins
joe-watkins / gist:00a1bd83fec29048f4ed
Last active April 22, 2016 06:28
toggleAria.js - a small plugin for swapping boolean aria attributes easier
/*!
* toggleAria.js
* Author: Joe Watkins
* usage:
HTML
<button aria-pressed="false">Show Content</button>
$("button").on("click", function(){
$(this).toggleAria({aria: "pressed"});
@oliverchrist
oliverchrist / gist:945cef89776eb6e76c5d
Created October 15, 2014 09:56
example of using grunt-newer with grunt-contrib-compass
grunt.initConfig({
compass: {
dist: {
src: '<%= yeoman.app %>/styles/**/*.scss',
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '<%= yeoman.dist %>/styles',
relativeAssets: false,
outputStyle: 'nested'
}
@arielsalminen
arielsalminen / iOS8-scroll-event-test.html
Created August 25, 2014 14:13
iOS 8 Safari doesn’t disable scroll events anymore (A test page).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iOS 8 scrolls</title>
<meta name="viewport" content="width=device-width">
</head>
<body style="min-height: 20000px;">
<div class="scroller" style="text-align: center; line-height: 4em; position: fixed; top: 0; left: 0; right: 0; height: 4em; background: red; color: #fff; font-family: sans-serif;">We’re here.</div>
<script>
@sergejmueller
sergejmueller / ttf2woff2.md
Last active March 9, 2024 13:37
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
@laracasts
laracasts / gulpfile.js
Last active February 10, 2024 10:57
Example Laravel-specific Gulpfile from Laracasts.com
var gulp = require('gulp');
var gutil = require('gulp-util');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css')
var coffee = require('gulp-coffee');
var exec = require('child_process').exec;
var sys = require('sys');