Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View thybzi's full-sized avatar

Evgeni Dmitriev thybzi

15 followers · 19 following
View GitHub Profile
@thybzi
thybzi / combinate.styl
Created February 23, 2016 01:41
Stylus selector combinator mixin: http://codepen.io/thybzi/pen/GobVEX
//**
//* Put CSS combinator between current selector and subj -- in direct and reversed order
//* Apply CSS rules block to resulting selector
//* Example output: .parent .curr + .subj, .parent .subj + .curr { color: red; }
//* Limitation: current selector must have a separent level in selector tree (e.g. & > .curr)
//* @param {string} subj Another selector to combinate with
//* @param {string='+'} comb CSS combinator (can be: '+', '~', '>' or ' ')
//*/
combinate(subj, comb='+')
scurr = selectors()[-1]
@thybzi
thybzi / ostap.styl
Last active February 23, 2016 10:31
Ostap Bender: The Great Combinator (of Stylus): http://codepen.io/thybzi/pen/PZMPob
// Get both inverse and forward combinated subject and current selector
// Example: .parent > .curr + .subj, .parent > .subj + .curr
// If subj is omitted, get current selector combinated with itself
// Example: .parent > .curr + .curr
// Limitation: Fails if parent selector level contains more that one combinator
// Limitation: Nesting calls cause exception
combinate(comb, subj='^[-1..-1]')
parts = ('&' + pad-combinator(comb) + subj)
if subj != '^[-1..-1]'
push(parts, combinate-inv(comb, subj))
@thybzi
thybzi / less2styl.html
Last active March 7, 2016 22:34
less2styl (ivi style)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script>
function fade2rbga(match, color, percentage) {
return 'rgba(' + color + ', ' + (parseFloat(percentage) / 100) + ')';
}
function less2styl() {
@thybzi
thybzi / position.styl
Last active April 12, 2016 17:47
position.styl v2.0 :: see http://codepen.io/thybzi/pen/eZGrRW/?editors=0100
/**
* Set `position` property, as well as `top`, `right`, `bottom`, `left` properties
* After the first argument, accepts 1 to 4 additional args, ordered and working "as for padding"
* To skip any of values, set it to `null`
* @mixin
* @example position(absolute, 5px, 10px, 0, auto)
* @example position(absolute, 5px, null, 0, auto)
* @example position(fixed, 5px, 10px)
* @example position(fixed, 0)
*/
@thybzi
thybzi / types.styl
Last active April 28, 2016 13:24
Stylus detected types — for use with `typeof()` and `is a`: http://codepen.io/thybzi/pen/MKMGoK
/*! bool, null */
typeof() // -> "null"
typeof(null) // -> "null"
typeof(undefined) // -> "ident"
typeof(false) // -> "boolean"
typeof(no) // -> "ident"
/*! color */
typeof(#ff0000) // -> "rgba"
typeof(#f00) // -> "rgba"
@thybzi
thybzi / position.less
Last active August 11, 2016 20:49
http://codepen.io/thybzi/pen/xOmmOj?editors=0100
/**
* Apply position value, and 0 to 4 offset values
* Offsets (length or `auto`) are treated similar to `padding` value
* Any of offsets may be `null`, in that case it is counted but not used
* @example .position(absolute, 5px, 2px) // position: absolute, 5px for top and bottom, 2px for left and right
* @example .position(relative, 5px, 2px, 3px) // position: relative, top: 5px, bottom: 3px, 2px for left and right
* @example .position(fixed, 5px, 2px, null) // position: fixed, top: 5px, nothing for bottom, 2px for left and right
* @example .position(static) // applies just `position: static` (without any offsets)
*/
@thybzi
thybzi / createStyle.js
Last active October 5, 2016 07:52
function createStyle(data, useImportant, w) {
var styleElement, styleContent, selector, property, value;
w = w || window;
styleContent = '';
for (selector in data) {
if (!data.hasOwnProperty(selector)) continue;
styleContent += '\n' + selector + ' {\n';
for (property in data[selector]) {
if (!data[selector].hasOwnProperty(property)) continue;
@thybzi
thybzi / resize-svg-path.js
Created October 27, 2016 08:56
Resize SVG path to 512px height (e.g. for better usage with grunt-webfont)
#! /usr/bin/env node
// Usage: node resize-svg-path <currentHeight> <currentPath>
// E.g.: node resize-svg-path 32 "m0,16c0,-8.83656 7.16345,-16 16,-16c8.83655,0 16,7.16344 16,16c0,8.83656 -7.16345,16 -16,16c-8.83655,0 -16,-7.16344 -16,-16zm30,0c0,-7.73198 -6.26801,-14 -14,-14c-7.73199,0 -14,6.26802 -14,14c0,7.73198 6.26801,14 14,14c7.73199,0 14,-6.26802 14,-14zm-14,-1.41422l-3.53552,-3.53554l-1.41425,1.41422l3.53558,3.53554l-3.53558,3.53554l1.41425,1.41422l3.53552,-3.53554l3.53552,3.53554l1.41425,-1.41422l-3.53558,-3.53554l3.53558,-3.53554l-1.41425,-1.41422l-3.53552,3.53554z"
(function () {
'use strict';
// Read command line arguments
var args = process.argv.slice(2);
var parse = require('parse-svg-path');
var scale = require('scale-svg-path');
@thybzi
thybzi / less-import-tree.js
Created April 1, 2017 23:05
LESS import tree; using https://github.com/es128/progeny
// usage: node less-import-tree.js myfile.less
// change dirPath to whatever you need
var args = process.argv.slice(2);
var path = require('path');
var progeny = require('progeny');
var dirPath = 'resources/less';
var fileName = args[0];
var filePath = path.join(dirPath, fileName);
@thybzi
thybzi / idle-refresh.js
Last active April 10, 2017 14:34
(function() {
window.lastActivityTime = 0;
window.refreshInterval = 10000;
window.idleInterval = 60000;
resetRefreshTimer();
document.body.addEventListener('mousemove', resetRefreshTimer);
document.body.addEventListener('keypress', resetRefreshTimer);
setTimeout(refresh, window.refreshInterval);