Skip to content

Instantly share code, notes, and snippets.

Robin Rendle robinrendle

Block or report user

Report or block robinrendle

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@robinrendle
robinrendle / browsersync-webpack.md
Last active Nov 18, 2019
Getting set up with Browsersync and Webpack
View browsersync-webpack.md

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
robinrendle / trim.scss
Created Jan 20, 2015
Mixin for sorting all child elements’ margin + padding
View trim.scss
// stolen from @charlotte_dann : https://twitter.com/charlotte_dann/status/557511812430983168
@mixin trim(){
> *:first-child {
}
> *:last-child {
margin-bottom: 0;
}
}
@robinrendle
robinrendle / reset.css
Last active Aug 27, 2019
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;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
/* Fix font rendering defaults */
html, button {
@robinrendle
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>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h1 class="ex1">mask-image</h1>
<h1 class="ex2">mask-image</h1>
<h1 class="ex3">mask-image</h1>
@robinrendle
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) {
$i:0;
@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.