Skip to content

Instantly share code, notes, and snippets.

Avatar
📝
Blogging furiously

Robin Rendle robinrendle

📝
Blogging furiously
View GitHub Profile
@robinrendle
robinrendle / browsersync-webpack.md
Last active Jun 29, 2020
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 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;
-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.