Skip to content

Instantly share code, notes, and snippets.

Avatar

Shaun Bent shaunbent

View GitHub Profile
View box-sizing.scss
/**
* If you have enable `box-sizing: border-box;` globally on your project you will need
* to reset this for ORB which still uses `box-sizing: content-box;`
*/
#blq-global,
#orb-banner,
#orb-footer {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
@shaunbent
shaunbent / 12-col-1008.js
Last active Jan 27, 2017
GEL Grid Bookmarklets
View 12-col-1008.js
// Save the following as bookmark in your browser
javascript:(function(){if(document.getElementsByClassName("gel-grid-overlay").length){document.getElementsByClassName("gel-grid-overlay")[0].remove()}var e="<div class=\"gel-grid-overlay__grid\"><div class=\"gel-grid-overlay__margin\" style=\"left: 0;\"></div>";for(i=0;i<12;i++){e+="<div class=\"gel-grid-overlay__column\"><div class=\"gel-grid-overlay__column-fill\"></div></div>"}e+="<div class=\"gel-grid-overlay__margin\" style=\"right: 0;\"></div>";e+="</div>";var t=document.createElement("div");t.className="gel-grid-overlay";t.innerHTML=e;var n=document.createElement("style");n.innerHTML=".gel-grid-overlay * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;);}.gel-grid-overlay {z-index: 2147483647; position: fixed; height: 100%; width: 100%; left: 0; top: 0;}.gel-grid-overlay__grid {position: relative; width: 100%; height: 100%; max-width: 1008px; margin: 0 auto; padding: 0 4px;}.gel-grid-overlay__column {display: inline-
@shaunbent
shaunbent / SassMeister-input.scss
Created Dec 15, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@mixin sport-brand($colour: 'black') {
@if $colour == 'white' {
color: #fff;
.no-svg & {
background-position: 0 -30px;
@shaunbent
shaunbent / SassMeister-input.scss
Last active Nov 27, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$gel-grid-1280-toggle-class: 'bp-1280';
$core: true;
$enhanced: true;
$gel-grid-1280-toggle-class: null !default;
@shaunbent
shaunbent / SassMeister-input.scss
Created Nov 26, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$gel-grid-1280-toggle-class: null !default;
$gel-grid-enable--1280-breakpoint: true !default;
@mixin gel-wrap-1280-breakpoint() {
content: '1280 CSS';
@shaunbent
shaunbent / SassMeister-input.scss
Created Oct 5, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.0-beta2)
// ----
@mixin foo() {
color: red;
@at-root {
.foo #{&} {
background: green;
@shaunbent
shaunbent / SassMeister-input.scss
Created Sep 2, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
// Colour them
$sport-yellow: #ffdf43;
$news-red: #bb1919;
$iplayer-pink: #f54997;
$live-blue: #1169f6;
@shaunbent
shaunbent / SassMeister-input.scss
Last active Aug 29, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@function map-combine($source, $map) {
@each $key, $value in $map {
$new: ($key: $value);
@if map-has-key($source, $key) {
@shaunbent
shaunbent / index.html
Created Jun 17, 2015
Stylesheet Loading
View index.html
<!--[if lte IE 8]>
<link rel="stylesheet" href="path/to/fixed.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="path/to/enhanced.css" />
<!--<![endif]-->
@shaunbent
shaunbent / SassMeister-input.scss
Created May 11, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);