Skip to content

Instantly share code, notes, and snippets.

View robinrendle's full-sized avatar
📝
Blogging furiously

Robin Rendle robinrendle

📝
Blogging furiously
View GitHub Profile
@robinrendle
robinrendle / browsersync-webpack.md
Last active February 27, 2024 12:04
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
robinrendle / reset.css
Last active July 24, 2021 01:20
A CSS reset with sane defaults
/*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 / sprite-mixin.scss
Created November 23, 2012 16:20
Erskine's sprite mixin
@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";
}
@robinrendle
robinrendle / gist:8040635
Created December 19, 2013 15:11
The dreaded alt: the class names that we give components ought to be more descriptive than this.
.list--ticked-alt {
@extend .cf;
background-color: $color--red;
width: percentage(25/100);
}
<!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 / trim.scss
Created January 20, 2015 12:52
Mixin for sorting all child elements’ margin + padding
// stolen from @charlotte_dann : https://twitter.com/charlotte_dann/status/557511812430983168
@mixin trim(){
> *:first-child {
}
> *:last-child {
margin-bottom: 0;
}
}