Skip to content

Instantly share code, notes, and snippets.

View gabskoro's full-sized avatar

Gabrijel Škoro gabskoro

View GitHub Profile
@gabskoro
gabskoro / icon-underlin-fix.css
Last active May 20, 2019 14:21
Fixing icons underline problem on before or after pseudo elements used in a "a" tag on Internet Explorer
If you have a link with an icon, you can put the icon in a ::before pseudo element.
However, IE will add the underline also the to icon which is not the case in other browsers.
Also the link will have a underline not exactly below the text, it will cover also some part of the
left side, the reason for that is because the HTML white spacing.
Also you shouldn't add another class on the same element which changes padding-left because
you will override the one needed on the link
The best solution which will cover everything:
%icon-base {
@gabskoro
gabskoro / CSS vertical aligns
Last active October 23, 2017 11:37
CSS vertical aligns using ::after pseudo element on the parent
// Resource https://medium.com/@hayavuk/vertically-center-variable-height-elements-inside-a-container-using-css-2a2aa9dbe032
// NOTE: this doesn't work with min-height set on the parent
@mixin vc-parent() {
white-space: nowrap;
&:after {
content: '';
display: inline-block;
height: 100%;
@gabskoro
gabskoro / gist:966e0d923df3edb76d4c6c17c35f7c56
Created November 15, 2016 14:47
Accelerated Rails Downloads with NGINX
If you need to download large amount of files without but bogging down the app but still need to verify them through rails
https://mattbrictson.com/accelerated-rails-downloads
;[Element].forEach(function(self){
self.prototype.eventListenerList = {};
self.prototype._addEventListener = self.prototype.addEventListener;
self.prototype.addEventListener = function(type, handle, useCapture) {
useCapture = useCapture === void 0 ? false : useCapture;
var node = this;
node._addEventListener(type, handle, useCapture);
@gabskoro
gabskoro / global-variables.js
Created May 16, 2016 07:29
Detect global JavaScript variables with iframes
// http://evanhahn.com/detect-global-javascript-variables-using-iframes/
(function () {
// Create an iframe and put it in the <body>.
var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
// We'll use this to get a "pristine" window object.
var pristineWindow = iframe.contentWindow.window
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(document.querySelectorAll('*'), function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
});
@font-face {
font-family: 'Helvetica Neue';
src: url('HelveticaNeueLTPro-Lt.eot');
src: url('HelveticaNeueLTPro-Lt.eot?#iefix') format('embedded-opentype'),
local('Helvetica Neue'), url('HelveticaNeueLTPro-Lt.otf') format('opentype'),
url('HelveticaNeueLTPro-Lt.ttf') format('truetype'),
url('HelveticaNeueLTPro-Lt.woff') format('woff'),
url('HelveticaNeueLTPro-Lt.woff2') format('woff2');
font-weight: 100;
font-style: normal;
@gabskoro
gabskoro / custom-grid.css
Created February 20, 2016 18:33
Custom grid
.grid {
display: table;
table-layout: fixed;
width: 100%;
}
.col {
display: table-cell;
}
@gabskoro
gabskoro / triangle.css
Created February 3, 2016 12:44
Triangle
/* From: https://jsfiddle.net/josedvq/3HG6d/ */
<div class="triangle-up"></div>
<div class="triangle-right"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>