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 / README.md
Last active March 28, 2024 20:34
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.

Pattern

t-template-name
@necolas
necolas / rsync_backup
Created August 14, 2011 23:27
Maintain a bootable clone of Mac OS X volume
#!/bin/sh
PROG=$0
RSYNC="/usr/bin/rsync"
SRC="/"
DST="/Volumes/Backup/"
# rsync options
# -v increase verbosity
# -a turns on archive mode (recursive copy + retain attributes)
@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 / snippet.js
Created June 14, 2011 20:36
Optimised async loading of cross-domain scripts
/*
* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
* Better handling of scripts without supplied ids.
*
* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
*/
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
@necolas
necolas / style.css
Created June 14, 2011 12:18
HTML5 Boilerplate a la normalize.css
/* =============================================================================
HTML5 element display
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* =============================================================================
Base
@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 / 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 / css-responsive-images.html
Created May 18, 2011 13:33
Idea for CSS-only responsive images using CSS3 generated content and attr() function. No browser implementation as of May 2011
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS responsive images</title>
<style>
/* Doesn't stop original source image being
downloaded too */
@media (min-device-width:600px) {
@necolas
necolas / style.css
Created April 27, 2011 12:04 — forked from chuanxshi/style.css
css descriptions
/**
* HTML5 ✰ Boilerplate
*
* style.css contains a reset, font normalization and some base styles.
*
* Credit is left where credit is due.
* Much inspiration was taken from these projects:
* - yui.yahooapis.com/2.8.1/build/base/base.css
* - camendesign.com/design/
* - praegnanz.de/weblog/htmlcssjs-kickstart
@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
*/