Skip to content

Instantly share code, notes, and snippets.

@mikedijkstra
mikedijkstra / loader.html
Created January 16, 2017 19:04
Loader Module
<body class="preload">
<div class="loader"></div>
</body>
<script>
$(window).load(function() {
$("body").removeClass("preload");
});
</script>
@mikedijkstra
mikedijkstra / loader.scss
Created January 16, 2017 19:05
Loader Module
@mixin loader {
body.preload {
* {
transition: none !important;
animation-name: none !important;
}
.loader {
visibility: visible;
}
@mikedijkstra
mikedijkstra / footer.scss
Created January 16, 2017 19:05
Footer Module
@mikedijkstra
mikedijkstra / footer.html
Created January 16, 2017 19:06
Footer Module
@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 / 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 / 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 / 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 / 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 / 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;