Skip to content

Instantly share code, notes, and snippets.

Avatar

John Slegers jslegers

View GitHub Profile
@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 {
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 / 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>
@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 / 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 / superglobals.php
Last active Aug 29, 2015
Create a formatted list of all superglobals
View superglobals.php
<?php
// Generate a formatted list with all superglobals
//----------------------------------------------------
// Custom superglobal variable $_CUSTOM
$_CUSTOM = array('USERNAME' => 'john', 'USERID' => '18068416846');
// List here whichever superglobals you want to print
// This could be your own custom superglobals
$globals = array(
'$_SERVER' => $_SERVER, '$_ENV' => $_ENV,
View _generated-placeholders.scss
// This code will only work if you use Sass 3.3 (or higher)
// Configuration :
// -----------------------------------------
$screensizes : (
'default' : 0 infinity,
'mobile' : 0 767px,
'phone' : 0 480px,
'tablet' : 481px 767px,
View __math.scss
// Some code is my own
// Some code is coming from https://github.com/adambom/Sass-Math/blob/master/math.scss
// Some code is coming from http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
// Some code coming from http://thesassway.com/advanced/math-sequences-with-sass
@function power($base, $exponent) {
$ret: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$ret: $ret * $base;
@jslegers
jslegers / selfdescriptive.php
Last active Jan 8, 2016
self descriptive number
View selfdescriptive.php
<?php
// PHP implementation of my solution for James Grimes's puzzle @ https://www.youtube.com/watch?v=K6Qc4oK_HqY
// The following function calculates the (only) self descriptive number for any number of digits
//
// With "self descriptive number", I mean :
// -------------------
// The first digit tells me how many zeros are in the number
// The second digit tells me how many ones are in the number
// The third digit tells me how many twos are in the number
View eat-sleep-code-repeat.js
(function repeat() {
eat();
sleep();
code();
repeat();
})();
You can’t perform that action at this time.