Skip to content

Instantly share code, notes, and snippets.

$ brew tap universal-ctags/universal-ctags
$ brew install --HEAD universal-ctags
Add the following to ~/.vimrc.bundles.local
Plug 'ludovicchabant/vim-gutentags'
@mikedijkstra
mikedijkstra / fonts.scss
Created March 10, 2017 17:34
Fonts in Shopify
@font-face {
font-family: 'Apercu Regular';
src: url("{{'apercu-regular.eot' | asset_url }}");
src: url("{{'apercu-regular.eot?#iefix' | asset_url }}") format('embedded-opentype'),
url("{{'apercu-regular.woff' | asset_url }}") format('woff'),
url("{{'apercu-regular.woff2' | asset_url }}") format('woff2'),
url("{{'apercu-regular.ttf' | asset_url }}") format('truetype');
font-weight: normal;
font-style: normal;
}
@mikedijkstra
mikedijkstra / type-style.scss
Created January 16, 2017 20:33
Type Styles
@mixin t-base {
font-family: 'HelveticaNeue', Helvetica, Helmut, Arial, "Lucida Grande", sans-serif;
font-style: normal;
font-weight: normal;
}
@mixin t-italic {
font-family: 'HelveticaNeue-Italic', 'Helvetica-Oblique';
font-style: normal;
font-weight: normal;
@mikedijkstra
mikedijkstra / responsive_image.css
Created January 16, 2017 20:25
Responsive Image CSS
.u-responsive {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
width: auto;
}
@mikedijkstra
mikedijkstra / hyphenate.scss
Created January 16, 2017 20:21
Hyphenate Mixin
@mixin hyphenate {
-mds-word-break: break-all;
word-break: break-all;
word-break: break-word;
hyphens: auto;
}
@mikedijkstra
mikedijkstra / background_mask.scss
Created January 16, 2017 19:52
Background Mask Mixin
@mixin background-mask($background-color) {
position: relative;
&:before {
@include animated;
background-color: $background-color;
bottom: 0;
content: "";
left: 0;
right: 0;
@mikedijkstra
mikedijkstra / overlay.scss
Created January 16, 2017 19:07
Overly Module
@mixin overlay {
.overlay {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: opacity 0.3s ease-in-out;
&.is-collapsible {
@mikedijkstra
mikedijkstra / overlay.html
Last active January 16, 2017 19:08
Overlay Module
<div id="my-overlay" class="overlay is-collapsible"></div>
<a href="#" data-toggle="collapse" data-target="#my-overlay">Toggle Overlay</a>
@mikedijkstra
mikedijkstra / footer.html
Created January 16, 2017 19:06
Footer Module
@mikedijkstra
mikedijkstra / footer.scss
Created January 16, 2017 19:05
Footer Module