Skip to content

Instantly share code, notes, and snippets.

Rasmus Thulstrup thulstrup

Block or report user

Report or block thulstrup

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
@scottjehl
scottjehl / anchorinclude.js
Created May 20, 2011
Anchor-include Pattern
View anchorinclude.js
/*
* 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
mirisuzanne / tutorial.mkdn
Created Aug 22, 2011
A new Susy tutorial
View tutorial.mkdn

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
mirisuzanne / reference.mkdn
Created Aug 22, 2011
Susy 0.9 Reference Documentation
View reference.mkdn

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
pjkix / css-stats-ack.sh
Created Oct 5, 2011
shell script to generate some css file statistics
View css-stats-ack.sh
#!/bin/bash
## v1.0.6
## this script will gernerate css stats
### example output
# CSS STATS
# ----------
# Floats: 132
@necolas
necolas / README.md
Last active Aug 29, 2019
Experimenting with component-based HTML/CSS naming and patterns
View README.md

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name
@jacine
jacine / template.php
Created Nov 19, 2011
Bye, bye region.tpl.php and block--system--main.tpl.php
View template.php
<?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'));
View percentage_grid.sass
//
// 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
bastianallgeier / dabblet.css
Created Jan 5, 2012
PE to use SVG as CSS background image with fallback for IE8/7/6
View dabblet.css
/**
* 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
chriseppstein / 0_usage.scss
Created Feb 29, 2012
This is code that runs using Sass 3.2 prerelease and something like this will be in compass soon.
View 0_usage.scss
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
}
@twosixcode
twosixcode / gist:1988097
Created Mar 6, 2012
Make "Paste and Indent" the default paste in Sublime Text 2
View gist:1988097
// swap the keybindings for paste and paste_and_indent
{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }
You can’t perform that action at this time.