Skip to content

Instantly share code, notes, and snippets.

View akikoo's full-sized avatar

Aki Karkkainen akikoo

40 followers · 0 following
View GitHub Profile
@mxriverlynn
mxriverlynn / 1-form.html
Created September 26, 2011 20:48
progressive enhancement with backbone
<form id="foo">
Name: <input id="name"><button id="say">Say My Name!</button>
</form>
@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
@jrburke
jrburke / builder.js
Created December 1, 2011 19:07
Multiple single file builds using one "build script" for requirejs optimizer
//Load the requirejs optimizer
var requirejs = require('./path/to/r.js'),
//Set up basic config, include config that is
//common to all the optimize() calls.
basConfig = {
baseUrl: './some/path',
paths: {
//whatever is neded globally.
}
};
@jrburke
jrburke / build.js
Created December 22, 2011 05:58
Doing multiple almond builds with a nodejs script, example
//Download jquery.js and place it in the build, do not use require-jquery.js
//in the build, since each of the build layers just needs almond and not the
//full require.js file.
//This file is run in nodejs to do the build: node build.js
//Load the requirejs optimizer
var requirejs = require('./r.js');
//Set up basic config, include config that is
//common to all the requirejs.optimize() calls.
@scottjehl
scottjehl / getViewportSize.js
Created March 16, 2012 19:25
Reliably get viewport dimensions in JS
/*!
An experiment in getting accurate visible viewport dimensions across devices
(c) 2012 Scott Jehl.
MIT/GPLv2 Licence
*/
function viewportSize(){
var test = document.createElement( "div" );
test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";
@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 */
@andrewrocco
andrewrocco / check.html
Created April 24, 2012 17:55
CSS Media Check
<!doctype html>
<html>
<head>
<title>CSS Media Check</title>
<style type="text/css">
#mediaquery{
-webkit-transition: width .001s;
-moz-transition: width .001s;
@chriscoyier
chriscoyier / mq.css
Created October 3, 2012 18:24
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
@ffdead
ffdead / if-resolution.scss
Created December 5, 2012 12:32
SASS resolution media query mixin
/* @author 14islands.com
* SASS mixins for future proof resolution media query
*/
@mixin if-min-resolution($dppx) {
@include if-resolution(min, $dppx) {
@content;
}
}
@drublic
drublic / rem-fallback.less
Last active March 28, 2020 23:57
Fallback rem-mixin in Sass and LESS
@main-font-size: 16px;
.x-rem (@property, @value) {
// This is a workaround, inspired by https://github.com/borodean/less-properties
@px-fallback: @value * @main-font-size;
-: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;
-: ~`(function () { return ';@{property}: @{value}rem'; }())`;
}