Skip to content

Instantly share code, notes, and snippets.

View necolas's full-sized avatar

Nicolas Gallagher necolas

10.8k followers · 28 following
View GitHub Profile
@necolas
necolas / _todo.md
Created June 30, 2012 18:07
Grunt tasks to process HTML files and produce a deploy directory of optimized files
  • Avoid reprocessing the same block in different HTML files.
  • Throw warning when processing a different block to an existing destination file. Hashing will avoid collisions, but introduce confusion.
  • Add file versioning for inline media and CSS images.
  • Avoid need for 'usemin' task - get the replacement element pattern from the first/last HTML element in actual block being replaced. Added benefit of preserving other attributes that may exist (e.g. title, media).

Acknowledgements: This is an adaption of some of Mickael Daniel's work on h5bp/node-build-script

@necolas
necolas / gist:2215692
Created March 27, 2012 13:12
Git submodules
# Workflow from https://github.com/necolas/dotfiles
# Add the new submodule
git submodule add git://example.com/remote/path/to/repo.git vim/bundle/one-submodule
# Initialize the submodule
git submodule init
# Clone the submodule
git submodule update
# Stage the changes
git add vim/bundle/one-submodule
@necolas
necolas / _an-overview.md
Created March 22, 2012 22:41
SUIT scss structure

SUIT: Smart User Interface Toolkit

Principles:

  • Allow for easy and flexible theming of a robust core.
  • Core contains primarily structural SCSS.
  • Core contains JS libs and common JS plugins.
  • Themes contain primarily non-structural SCSS.
  • Themes contain custom JS plugins.
  • Compiled, concatenated, and minified CSS and JS is stored in each theme.
@necolas
necolas / ie-css-hacks.css
Created May 20, 2011 15:10
IE CSS hacks
/*
* Property prefix hacks
*/
/* IE6 only - any combination of these characters */
_ - £ ¬ ¦
/* IE6/7 only - any combination of these characters */
@necolas
necolas / using-OnLayout.js
Last active September 23, 2020 09:16
React Pressable / OnLayout
/**
* OnLayout is built upon: View (and ResizeObserver), StyleSheet
*/
const elementBreakpoints = {
small: { minWidth: 200 },
medium: { minWidth: 300 }
large: { minWidth: 500 }
};
@necolas
necolas / ie-cc-1.html
Created May 20, 2011 12:15
Conditional classes test cases: DRYer and Compat View icon is not displayed in IE8/9. If X-UA-Compatible header is set using a server config then ie-cc-serverconfig.html is all that is needed.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
@necolas
necolas / contain-floats.css
Created April 22, 2011 00:36
Cross-browser, consistent float-containment methods
/*
* Containing floats in a consistent manner
* By Jonathan Neal and Nicolas Gallagher
*/
/*
* New block formatting context method
* IE 6+, Firefox 2+, Safari 4+, Opera 9+, Chrome
*/
@necolas
necolas / inline-block-example.html
Created July 28, 2011 16:22 — forked from fcalderan/inline-block-example.html
Inline-block layout component
<div class="ibw">
<div class="ib">inline block</div>
<div class="ib">inline block</div>
<div class="ib">inline block</div>
</div>
@necolas
necolas / App.js
Last active July 10, 2019 11:16 — forked from trueadm/flare-ideas.jsx
React event responders
// We can listen for events (e.g., 'press. or 'focuswithin') that are fired from responders,
// if they are allowed to bubble.
//
// context.dispatchEvent(eventObject, listener, eventPriority, bubbles)
//
// This allows us to prevent certain events from bubbling up the tree, e.g., 'focus', 'scroll'.
import React, {useRef, useState} from 'react';
import {Pressable, Text, View} from 'react-ui';
import {PressListener} from 'react-events/press';
@necolas
necolas / createOrderedCSSStyleSheet.js
Last active January 26, 2019 13:42
OrderedCSSStyleSheet: control the insertion order of CSS
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
*/
type Groups = { [key: number]: Array<string> };