Skip to content

Instantly share code, notes, and snippets.

View atelierbram's full-sized avatar

Bram de Haan atelierbram

52 followers · 62 following
View GitHub Profile
@atelierbram
atelierbram / conditional-media-query-mixins.css
Last active January 3, 2016 17:29 — forked from anonymous/SassMeister-input.scss
.sidebar {
width: 33.33%;
}
@media (max-width: 600px) {
.sidebar {
width: 100%;
}
}
@media (min-width: 1250px) {
.sidebar {
@atelierbram
atelierbram / dir.sh
Last active January 4, 2016 10:19 — forked from derekwyatt/dir.sh
A BASH script to handle directory management: jump between directories from a list of last visited directories in terminal, triggered by shortcuts.
# https://gist.github.com/derekwyatt/1154129
# http://derekwyatt.org/2011/08/18/my-bash-directory-management.html
# A BASH script to handle directory management
# copy/paste this in you're .bashrc and be happy
# cd - You know what this does. And, yes, both cd - and cd {pat} {subst} should also work just fine
# ss - Short for "show stack"
# csd - Short for "change to stacked directory"
export DIRSTACK_MAX=15
DS=()
@atelierbram
atelierbram / gist:42cdf4734fb969164144
Created August 8, 2014 13:14 — forked from toddparker/gist:32fc9647ecc56ef2b38a
<html>
<head>
<title>Select styles with CSS only</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Some basic page styles */
body {
background-color: #fff;
font-family: helvetica, sans-serif;
margin: 4% 10%
@atelierbram
atelierbram / index.html
Last active August 29, 2015 14:06 — forked from alenabdula/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple AJAX Demo</title>
<!-- link to jQuery -->
<!-- You might want to
download local copy
of this file, otherwise
you'll need internet
@atelierbram
atelierbram / hnl.taphover.js
Last active August 29, 2015 14:10 — forked from c-kick/hnl.taphover.js
//taphover - a solution to the lack of hover on touch devices.
//more info: http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/
$('a.taphover').on('touchstart', function (e) {
'use strict'; //satisfy the code inspectors
var link = $(this); //preselect the link
if (link.hasClass('hover')) {
return true;
} else {
link.addClass('hover');
$('a.taphover').not(this).removeClass('hover');
@atelierbram
atelierbram / Makefile
Last active August 29, 2015 14:17 — forked from pwenzel/Makefile
# Example Makefile for compiling CSS and Javascript in watched folder
PHONY: optimize
css:
@cat assets/css/normalize.css assets/css/app.css > public/assets/all.css
@echo Built all.css
js:
@cat assets/js/jquery.js assets/js/jquery.cookie.js assets/js/app.js > public/assets/all.js
@atelierbram
atelierbram / _guides.scss
Last active August 29, 2015 14:23 — forked from CrocoDillon/_guides.scss
$guides-default-color: #4e68c7;
$guides-default-orientation: horizontal;
/**
* Creates guides, useful for prototyping.
*
* @param $guide-sets List of guides, which can be numbers (uses default
* color and orientation) or lists in the form (color orientation guides),
* where guides can be a single number or a list of numbers.
*/
@atelierbram
atelierbram / gist:4f366918b36965d3325e
Last active September 4, 2015 09:39
'use strict';
// -----------------------------------------------------------------------------
// Dependencies
// -----------------------------------------------------------------------------
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
@atelierbram
atelierbram / reset.css
Last active October 20, 2023 06:42 — forked from iegik/reset.css
CSS Typography reset
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
@atelierbram
atelierbram / matchMedia.js
Last active September 10, 2015 10:02 — forked from robnyman/matchMedia.js
matchMedia demo
(function () {
var matchMediaSupported = document.querySelector("#matchmedia-supported"),
width600 = document.querySelector("#width-600"),
height500 = document.querySelector("#height-500"),
portraitOrientation = document.querySelector("#portrait-orientation"),
width600Check,
height500Check,
portraitOrientationCheck;
if (window.matchMedia) {