Skip to content

Instantly share code, notes, and snippets.

Nicolas Gallagher necolas

Block or report user

Report or block necolas

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
necolas / rsync_backup
Created Aug 14, 2011
Maintain a bootable clone of Mac OS X volume
View rsync_backup
# rsync options
# -v increase verbosity
# -a turns on archive mode (recursive copy + retain attributes)
necolas /
Last active Jan 27, 2020
Experimenting with component-based HTML/CSS naming and patterns

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.


necolas /
Created Mar 22, 2012
SUIT scss structure

SUIT: Smart User Interface Toolkit


  • 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.
View gist:2215692
# Workflow from
# Add the new submodule
git submodule add 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 / .htaccess
Created Apr 9, 2012
Simple, quick way to concatenate, minify, and version static files in a Wordpress theme
View .htaccess
# Filename-based cache busting
# taken from
# This rewrites file names of the form `name.123456.js` to `name.js`
# so that the browser doesn't use the cached version when you have
# updated (but not manually renamed) the file.
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
necolas / _mixin-better.scss
Created Apr 13, 2012
Sass grid construction
View _mixin-better.scss
// Still need to work out how to combine rules for numbers
// that share a greatest common factor without the unit-builder
// actually containing the fraction to which they can both be
// reduced.
// Calculate the greatest common factor of two integers
@function gcf($a, $b) {
@if $b == 0 {
@return $a;
necolas /
Created Jun 30, 2012
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

View component-button.css
* CSS modules required for this module to render correctly.
* Correct order for entire app is resolved by script.
@require "normalize.css";
@require "vendor/button.css";
* CSS component
necolas / input.css
Last active Apr 6, 2018
Transparent CSS preprocessing
View input.css
* Input CSS
* No custom syntax. Just write "future" CSS without vendor prefixed properties or values.
* Use a subset of CSS variables (not dynamic or scoped).
* Specify a level of browser support: IE 8+, etc.
* Tool takes browser support and specific declarations to generate vendor-specific variants.
* This source code is just CSS and works in any browser with adequate support.
* One day, perhaps you'll have no need to preprocess this code.
necolas /
Last active Dec 25, 2015
Workflow: SUIT CSS components, Mustache, Flight, Webdriver UI

General idea

  • Create isolated, predictable, configurable UI components.

  • Change the way that eng-design team operates by creating a workflow and audit trail that is based on reviewing modules.

  • UI component's code and appearance are reviewed at the same time, with the same scope.

  • Automatically be aware of changes to modules that depend on the one you are changing. Encourage decomposition of UI where appropriate.

You can’t perform that action at this time.