Skip to content

Instantly share code, notes, and snippets.

@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
@liamcurry
liamcurry / gist:2597326
Created May 4, 2012 19:56
Vanilla JS vs jQuery

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
@addyosmani
addyosmani / pubsub.md
Created October 28, 2011 06:49
Four ways to do Pub/Sub with jQuery 1.7 and jQuery UI (in the future)

#Four Ways To Do Pub/Sub With jQuery and jQuery UI (in the future)

Between jQuery 1.7 and some of work going into future versions of jQuery UI, there are a ton of hot new ways for you to get your publish/subscribe on. Here are just four of them, three of which are new.

(PS: If you're unfamiliar with pub/sub, read the guide to it that Julian Aubourg and I wrote here http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx)

##Option 1: Using jQuery 1.7's $.Callbacks() feature:

$.Callbacks are a multi-purpose callbacks list object which can be used as a base layer to build new functionality including simple publish/subscribe systems. We haven't yet released the API documentation for this feature just yet, but for more information on it (including lots of examples), see my post on $.Callbacks() here:

@pjkix
pjkix / css-stats-ack.sh
Created October 5, 2011 21:39
shell script to generate some css file statistics
#!/bin/bash
## v1.0.6
## this script will gernerate css stats
### example output
# CSS STATS
# ----------
# Floats: 132
<ul class="prev-next cf">
{% set params = {section: 'blog', order: 'postDate desc', limit: null} %}
{% set entry_prev = entry.getPrev(params) %}
{% set entry_next = entry.getNext(params) %}
{% if entry_prev %}<li class="prev"><a title="{{ entry_prev.title }}" href="{{entry_prev.url}}">Previous Post</a></li>{% endif %}
{% if entry_next %}<li class="next"><a title="{{ entry_next.title }}" href="{{entry_next.url}}">Next Post</a></li>{% endif %}
</ul>
@emilbjorklund
emilbjorklund / breakpoints_via_css.html
Created April 24, 2012 16:03
Width detection via sneaky CSS rules
<!DOCTYPE html>
<!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Breakpoint detection test</title>
<style type="text/css" media="screen">
@media screen and (min-width: 320px) {
#page:after {
content: 'smallest'; /* represent the current width-bracket */
@apauly
apauly / gist:7917906
Last active May 4, 2016 06:00
Mixin for responsive sprites with Sass
@mixin responsive-sprite($map, $icon){
$icon-file: sprite-file($map, $icon);
$icon-width: image-width($icon-file);
$icon-height: image-height($icon-file);
$sprite-file: sprite-path($map);
$sprite-width: image-width($sprite-file);
$sprite-height: image-height($sprite-file);
$space-top: floor(nth(sprite-position($map, $icon), 2));
@chrisgreeff
chrisgreeff / _spacing.scss
Last active December 22, 2015 10:19 — forked from darren131/_spacing.scss
Have extended Darren Woods (@darren) spacing mixin to include an 'all' placeholder selector.
// This is based on Nicole Sullivan's OOCSS spacing module
// with a slight modification, namely:
//
// 1. there's no vertical or horizontal
//
// Produces the following placeholder selectors
// %mtn {
// margin-top: 0;
// }
// %mbn {
@henrahmagix
henrahmagix / config.rb
Created March 1, 2013 15:37
An arbitrary long CSS selector splitter to go in your `config.rb` for Compass projects.
# Split selectors that are too long so IE8 doesn't ignore them.
on_stylesheet_saved do |path|
CssSelectorSplitter.split(path) unless path[/\d+$/]
end
# The following is a default config.rb created by `compass create`.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
@namanyayg
namanyayg / contract.md
Last active December 10, 2015 23:28 — forked from malarkey/Contract Killer 3.md
Contract for my own use, for web design work.

Date: [date]

Between me, Namanyay Goel
and you, [customer name]

Summary:

I’ll always do my best to fulfil your needs and meet your expectations, but it’s important to have things written down so that we both know what’s what, who should do what and when, and what will happen if something goes wrong. In this contract you won’t find any complicated legal terms or long passages of unreadable text. I’ve no desire to trick you into signing something that you might later regret. What we do want is what’s best for both parties, now and in the future.

So in short;