scottjehl

/*
  * anchor-include pattern for already-functional links that work as a client-side include
  * Copyright 2011, Scott Jehl, scottjehl.com
  * Dual licensed under the MIT
  * Idea from Scott Gonzalez
  * to use, place attributes on an already-functional anchor pointing to content
    * that should either replace, or insert before or after that anchor
    * after the page has loaded
    * Replace:	<a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
    * Before:	<a href="..." data-before="articles/latest/fragment">Latest Articles</a>

mirisuzanne

Susy 0.9 Tutorial

See the official Susy site for 1.0 documentation.

For this tutorial I'm assuming you are already comfortable with CSS, Sass (I'll use the SCSS syntax) and Compass. Please get set up with each one of those before attempting to use Susy. Sass and Compass both have their own setup instructions and tutorials that you can use.

There is also reference documentation in the works.

Building a Susy Grid

mirisuzanne

Susy 0.9 Reference Documentation

See the official Susy site for 1.0 documentation.

Terms

• Susy Grid: A grid that you build with Susy. You can have multiple on one page if you need.
• Grid Element: Any HTML element that is aligned to a Susy Grid.
• Container: The root element in a Susy Grid. Anything inside it is a potential Grid Element.

pjkix

#!/bin/bash

## v1.0.6
## this script will gernerate css stats

### example output

# CSS STATS
# ----------
# Floats:  132

necolas

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

jacine

<?php

/**
 * Implements hook_page_alter().
 */
function mytheme_page_alter(&$page) {
  // Remove all the region wrappers.
  foreach (element_children($page) as $key => $region) {
    if (!empty($page[$region]['#theme_wrappers'])) {
      $page[$region]['#theme_wrappers'] = array_diff($page[$region]['#theme_wrappers'], array('region'));

chriseppstein

//
// How I would approach a fluid grid:
//
// [1] Let the name reflect the % width,
//     eliminating "1 of 12" guesswork.
//
// [2] Also, put 10px of padding to either
//     side, to stack and make a 20px gutter.
//
// [3] Make the box-sizing = border-box, so that

bastianallgeier

/**
 * PE to use SVG as CSS background image with fallback for IE8/7/6
 *
 * Using SVG as CSS background image to display 
 * resolution-independent logos or icons is pretty
 * awesome but does completely fail on IE8/7/6 
 * 
 * The trick:
 * All three IE versions don't support rgba color values.
 * By defining a rgba background color together with the

chriseppstein

@include keyframes(appear-and-roundify) {
  0%   { opacity: 0; @include border-radius(2px);  }
  100% { opacity: 1; @include border-radius(10px); }
}

twosixcode

// swap the keybindings for paste and paste_and_indent
{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }