Skip to content

Instantly share code, notes, and snippets.

Robin Rendle robinrendle

View GitHub Profile
robinrendle / sprite-mixin.scss
Created Nov 23, 2012
Erskine's sprite mixin
View sprite-mixin.scss
@mixin sprite-bg($crop, $x:0, $y:$x, $hover:true) {
@each $part in $sprite {
@if ($part == $crop) {
$i:index($sprite, $part);
@if $i == 0 {
@warn "sprite-bg can't find '#{$crop}' in $sprite";
View index.html
<!DOCTYPE html>
<link href='' rel='stylesheet' type='text/css'>
<h1 class="ex1">mask-image</h1>
<h1 class="ex2">mask-image</h1>
<h1 class="ex3">mask-image</h1>
robinrendle / gist:8040635
Created Dec 19, 2013
The dreaded alt: the class names that we give components ought to be more descriptive than this.
View gist:8040635
.list--ticked-alt {
@extend .cf;
background-color: $color--red;
width: percentage(25/100);
robinrendle / reset.css
Last active Apr 15, 2020
A CSS reset with sane defaults
View reset.css
/*Box sizing (the nuclear option) */
*, *:before, *:after {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Fix font rendering defaults */
html, button {
robinrendle / trim.scss
Created Jan 20, 2015
Mixin for sorting all child elements’ margin + padding
View trim.scss
// stolen from @charlotte_dann :
@mixin trim(){
> *:first-child {
> *:last-child {
margin-bottom: 0;
robinrendle /
Last active Jun 29, 2020
Getting set up with Browsersync and Webpack

Fixing our local environment with Browsersync

Whenever we change our templates we still have to use our build script and this can get annoying. Thankfully with webpack-dev-server and BrowserSync we can fix this:

npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server

BrowserSync will act like a proxy, waiting for webpack to do its thing and then reloading the browser for us.

You can’t perform that action at this time.