Skip to content

Instantly share code, notes, and snippets.

View HelgaZhizhka's full-sized avatar
👁️‍🗨️

Olga Zhyzhka HelgaZhizhka

👁️‍🗨️
14 followers · 15 following
View GitHub Profile
@gregorynicholas
gregorynicholas / css-fonts.css
Created June 8, 2011 17:32
CSS Fonts Schemes
p – balanced for paragraphs or body copy

t – balanced for headlines or titles
Arial, “Helvetica Neue”, Helvetica, sans-serif - p, t
Baskerville, “Times New Roman”, Times, serif - p
Baskerville, Times, “Times New Roman”, serif - t
Cambria, Georgia, Times, “Times New Roman”, serif - p, t
“Century Gothic”, “Apple Gothic”, sans-serif - p, t
@sj26
sj26 / jquery.touch.js
Created June 16, 2011 02:43
Zepto touch for jQuery
(function($){
var touch = {}, touchTimeout;
function parentIfText(node){
return 'tagName' in node ? node : node.parentNode;
}
function swipeDirection(x1, x2, y1, y2){
var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2);
if (xDelta >= yDelta) {
@nateps
nateps / gist:1172490
Created August 26, 2011 01:38
Hide the address bar in a fullscreen iPhone or Android web app
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<title>Test fullscreen</title>
<style>
html, body {
margin: 0;
padding: 0;
@zhilinskiy
zhilinskiy / CSS: Fonts Stacks
Created January 24, 2013 08:00
CSS: Fonts Stacks
/**
*
* Font Staks
*http://sixrevisions.com/css/css-typography-01/
*
* Wide sans serif: Verdana, Geneva
Narrow sans serif: Tahoma, Arial, Helvetica
Wide serif: Georgia, Utopia
Narrow serif: Times, Times New Roman
Monospace: Courier, Courier New, Lucida Console
@hawkz
hawkz / rem-fallback.less
Last active December 14, 2015 08:08 — forked from drublic/rem-fallback.less
Quick modification for multiple values - not the most concise, but this is being compiled pre-upload...
@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'; }())`;
}
.x-rem (@property, @v1, @v2) {
@px-v1: @v1 * @main-font-size;
@davidtheclark
davidtheclark / isElementInViewport.js
Created May 4, 2013 02:00
JavaScript: Is element in viewport?
/*
No jQuery necessary.
Thanks to Dan's StackOverflow answer for this:
http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
*/
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
@avilaj
avilaj / rems.styl
Last active December 17, 2015 23:49
Stylus rems converter with fallback I haven't tested it very much. License MIT
// License MIT
// Author: Jorge Avila <jorge.e.avila@gmail.com>
// Example:
// body
// -rems('margin', 10 20 30 40)
basefont = 16px
-rems(property, sizes)
rems = new array()
pixs = new array()
@kiennt2
kiennt2 / swiper slider with thumbs carousel
Last active August 17, 2017 21:09
swiper slider with thumbs carousel
@joekukish
joekukish / calc-mixin.styl
Created August 12, 2014 18:48
Stylus `calc()` mixin
// Adds the vendor prefixes for calc.
//
// Usage:
// width: calc('30% - 10px');
// If variables are needed they need to be specified this way.
// width: calc('40% \- %s' % (10px));
calc() {
// vendors to be used by this function
calc-vendors = webkit moz;
@kogakure
kogakure / gist:27b6e02034bae4ed7c70
Last active December 18, 2019 15:00
Pure CSS multiline text with ellipsis
/* http://martinwolf.org/2013/01/29/pure-css-multiline-text-with-ellipsis/ */
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;
h2 {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;