kaelig

/* ==========================================================================
   Text exposed utility
   ========================================================================== */

/**
 * Hides/shows text (use case: "read more" link)
 *
 * When `u-textExposed` has class `u-textExposed--expose`:
 * Shows `u-textExposed-show`
 * Hides `u-textExposed-hide`

blackfalcon

%myclass
    color: blue
    @media (min-width: 600px)
        background: red
    @media (min-width: 800px)
        font-size: 28px

.class1
    @media (min-width: 600px)
        @extend %myclass

csswizardry

project.scss
    components/
        global/
            page-head.scss
            pricing-table.scss
            image-gallery.scss
        home/
            quick-search.scss
    inuit.css/

pages/

csswizardry

Bringing BEM to inuit.css

BEM is a methodology for naming and classifying CSS selectors in a way to make them a lot more strict, transparent and informative.

The naming convention follows this pattern:

.block{}
.block__element{}
.block--modifier{}

necolas

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

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

mathiasbynens

// Ever needed to escape '\n' as '\\n'? This function does that for any character,
// using hex and/or Unicode escape sequences (whichever are shortest).
// Demo: http://mothereff.in/js-escapes
function unicodeEscape(str) {
	return str.replace(/[\s\S]/g, function(character) {
		var escape = character.charCodeAt().toString(16),
		    longhand = escape.length > 2;
		return '\\' + (longhand ? 'u' : 'x') + ('0000' + escape).slice(longhand ? -4 : -2);
	});
}

scottjehl

/*
  * Normalized hide address bar for iOS & Android
  * (c) Scott Jehl, scottjehl.com
  * MIT License
*/
(function( win ){
	var doc = win.document;
	
	// If there's a hash, or addEventListener is undefined, stop here
	if( !location.hash && win.addEventListener ){

mathiasbynens

There seems to be a difference between longhand properties (e.g. background-color) and shorthand properties (e.g. background). Some CSS hacks only work for one or the other. I’ve updated my test case to test these separately, and there are some interesting results.

The following hacks target IE8 but not IE9:

• longhandproperty: \0value\0;
• longhandproperty: \0value;

In practice, you might use these like so:

• background-color: \0red\0;

mathiasbynens

// Original code from http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
	for (i=0; i<metas.length; i++) {
		if (metas[i].name == "viewport") {
			metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
		}
	}