Skip to content

Instantly share code, notes, and snippets.

Blogging furiously

Robin Rendle robinrendle

Blogging furiously
View GitHub Profile
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.

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 / reset.css
Last active Sep 30, 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 / 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);
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 / 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";
You can’t perform that action at this time.