Skip to content

Instantly share code, notes, and snippets.

Avatar

John Slegers jslegers

View GitHub Profile
@jslegers
jslegers / gist:6562976
Created Sep 14, 2013
Hiding mobile specific content on IE6-8
View gist:6562976
/* Add the desktop-hidden class to any HTML tag that contains mobile specific content */
.desktop-hidden {
*display:none !important; /* IE6-7 */
}
@media \0 screen {
.desktop-hidden {
display:none !important; /* IE8 only */
@jslegers
jslegers / style.scss
Created Jul 26, 2013
A CodePen by Hugo Giraudel. Sass mixin for scrollbar styling - Because I can't ever remember the right syntax for scrollbars styling in WebKit, here is a little Sass mixin to do it for you.
View style.scss
@import "compass";
/**
* Mixin scrollbar
*/
@mixin scrollbar($size, $primary, $secondary: lighten($primary, 25%)) {
::-webkit-scrollbar {
width: $size;
height: $size;
}
@jslegers
jslegers / index.html
Last active Jan 16, 2020
Simple 2 player version of the "connect four" game. All code is MIT licenced.
View index.html
<body>
<span id="a">red</span>
<span id="b">yellow</span>
<span id="n">Are you sure you want to start a new game?</span>
<span id="w">The %s player won.
Do you want to play a new game?</span>
<div id="game">It's the <span id="c"></span>&nbsp;player's move.
<table id="gameboard">
<tr>
<td id="c-1-1"></td>
View jslegers-responsive-mixin.scss
/*
Scoped Media Query Mixins - an element query workaround.
@mixin respond-to-all : generates @media () {}
@mixin respond-to-screen : generates @media screen and () {}
@mixin respond-to-screen-only : generates @media screen only and () {}
Accepts the following input :
@jslegers
jslegers / _clearfix.scss
Last active Oct 30, 2018
Clearfix code without duplication
View _clearfix.scss
%display-block-hacked {
display: block;
*zoom: 1;
}
%clear-both {
clear : both;
}
%blank-as-table {
You can’t perform that action at this time.