stoikerty / dabblet.css

Last active July 6, 2022 15:37

SVG alternative to fittext.js, see http://dabblet.com/gist/5231222

	/* SVG alternative to fittext.js */

	div {
	width: 300px;
	height: 150px;
	float: left;
	margin-right : 10px;
	background: #f06;
	font: bold 150% sans-serif;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);

stoikerty / dabblet.css

Created March 24, 2013 12:06

draggable iOS-like switch (webkit-only, also works in iOS safari)

	/* draggable iOS-like switch (webkit-only, also works in iOS safari) */

	/* Don't get your hopes up for using this in anything else besides
	* webkittys, ::webkit-slider-thumb is proprietary.
	* Here's some more info if you're interested:
	* http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range
	* http://css-tricks.com/almanac/properties/a/appearance/
	*/

	.switch {

stoikerty / dabblet.css

Last active December 15, 2015 11:49

Making transparency work on IE8

	/**
	* Making transparency work on IE8
	*/


	.element{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;

stoikerty / .gitignore

Created April 17, 2013 07:49 — forked from mrrooijen/.gitignore

	.DS_Store
	*.swp
	*.swo
	Gemfile.lock

stoikerty / Issue with nested anchor tags. Slim v1.3.8

Created May 10, 2013 16:14

Edit: It is not a slim issue, it's the browser that refuses to parse it that way because certain kinds of "phrasing content"-nesting are not standard compliant. See: https://github.com/slim-template/slim/issues/324 ------ Issue with nested anchor tags. Slim v1.3.8 The div with the class `.problem` is placed beside the anchor tag 2, instead of in…

	div
	div
	div
	a.item
	\| 1
	a.item
	\| 2
	div.problem
	a.item
	\| 3

stoikerty / index.slim

Created June 4, 2013 13:53

A CodePen by Stoikerty. Oranges and Lemons - A Reflow story - How to reset a CSS transition by removing and adding a class, via javascript. Reflow needs to be triggered between the class change, this is accomplished using element.offsetWidth.

	#awesome-element
	/ We all like to
	\| Woohoo

stoikerty / svg-left-center

Last active December 26, 2015 01:29

A snippet of code to remind myself the power of svg independent positioning

	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
	<g transform="scale(0.4 0.4)">
	<polygon points="0,0 100,0 50,100"/>
	</g>
	</svg>

	<svg class="svg-triangle" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
	<polygon points="0,0 100,0 50,100"/>
	</svg>

stoikerty / gist:40ee7d3ee6016a485092

Last active April 9, 2020 18:59

Mixin for creating Google’s “Material Design” in SCSS

	// Creating Google’s “Material Design” in SCSS
	// (specifically Material Shadow, uses compass)
	// see: http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-paper-craft

	// Demo: http://codepen.io/stoikerty/full/Glwxi/

	// Animating Box-Shadow is EXPENSIVE:
	// http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#toc-

	// Moving between z-index-depths is done via opacity & multiple

stoikerty / javascript.js

Last active May 31, 2020 14:02

Gulp + Browserify - multi-file recipe (JSX, coffeescript, uglify & sourcemaps)

	// Config that can be loaded externally, similar
	// to [gulp-starter](https://github.com/greypants/gulp-starter)

	var src = './app/assets';
	var dest = './public';
	var config = {
	javascript: {
	src: src + '/javascript_app/*/.{js,coffee}',
	rootFiles: [
	{

stoikerty / what-forces-layout.md

Last active May 14, 2020 13:40 — forked from paulirish/what-forces-layout.md

What forces layout/reflow in Chrome. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

Jorge Antunes stoikerty

What forces layout / reflow

Element

Box metrics