Joost Kiens JoostKiens
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # see http://editorconfig.org/ for usage | |
| # and editor support | |
| root = true | |
| [*] | |
| indent_style = space | |
| indent_size = 2 | |
| end_of_line = lf | |
| charset = utf-8 |
JoostKiens
/ _media-queries.less
Created
June 16, 2014 14:59
Named Media queries, drop in for bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Named media queries based on Bootstrap variables | |
| * Usage: | |
| * .module { | |
| * @media @lg { … } | |
| * @media @md, @sm { … } | |
| * @media @md-or-less { … } | |
| * } | |
| * | |
| * @lg-or-more (=> 1200) - - - |
JoostKiens
/ jquery.toggleHtml.js
Created
July 10, 2014 07:48
Advanced jQuery plugin to switch between one piece of html and another
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Copyright (C) 2014 Joost Kiens | |
| * | |
| * Permission is hereby granted, free of charge, to any person obtaining a | |
| * copy of this software and associated documentation files (the "Software"), | |
| * to deal in the Software without restriction, including without limitation | |
| * the rights to use, copy, modify, merge, publish, distribute, sublicense, | |
| * and/or sell copies of the Software, and to permit persons to whom the | |
| * Software is furnished to do so, subject to the following conditions: | |
| * |
JoostKiens
/ compass-HiDPI-images.scss
Last active
December 10, 2015 23:38
Cross-browser, slimmed-down Compass media query mixin for high-density images.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Author: @joostkiens | |
| * Licensed under the MIT license | |
| */ | |
| @mixin hr-image($lr-image, $hr-image) { | |
| background-image: url($lr-image); | |
| @media print, | |
| (-webkit-min-device-pixel-ratio: 1.25), | |
| (-o-min-device-pixel-ratio: 5/4), | |
| (min-resolution: 120dpi) { |
JoostKiens
/ sass-HiDPI-images.scss
Last active
December 10, 2015 23:38
Cross-browser, slimmed-down Sass media query mixin for high-density images.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Author: @joostkiens | |
| * Licensed under the MIT license | |
| */ | |
| @mixin hr-image($image, $width, $height) { | |
| @media print, | |
| (-webkit-min-device-pixel-ratio: 1.25), | |
| (-o-min-device-pixel-ratio: 5/4), | |
| (min-resolution: 120dpi) { | |
| background-image: url($image); |
JoostKiens
/ index.html
Last active
December 14, 2015 07:19
A CodePen by Joost Kiens. CSS Page curl - CSS Page curl with one div.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="curl"></div> | |
| <h1>CSS Page Curl</h1> | |
| <p>hover over page curl to resize</p> |
JoostKiens
/ graphy.css
Last active
June 21, 2016 02:08
Graphing paper like background with CSS3 gradients. Inpired by Graphy on Subtle Patterns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Author: @joostkiens | |
| * Licensed under the MIT license | |
| */ | |
| body { | |
| background: | |
| linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px), | |
| linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), | |
| linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px), | |
| linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), |
JoostKiens
/ convertImageToGrayscale.js
Created
February 19, 2015 12:50
Convert an image to grayscale using canvas, takes around 25 ms for an image of 500px x 400px
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define(function () { | |
| 'use strict'; | |
| var canvas = document.createElement('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| return function ($srcImg) { | |
| var deferred = $.Deferred(); | |
| var srcImg = $srcImg[0]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <input type="checkbox" id="floep"> | |
| <label for="floep">Floep</label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="flap" checked="checked"> | |
| <label for="flap">Flap</label> | |
| </div> |
JoostKiens
/ blockquote-microdata.html
Last active
February 6, 2017 17:50
HTML5 blockquote & citation in figure & figcaption with microdata
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| /** | |
| * Author: @joostkiens | |
| * Licensed under the MIT license | |
| */ | |
| --> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> |
OlderNewer