Skip to content

Instantly share code, notes, and snippets.

Avatar

Matt Smith AllThingsSmitty

View GitHub Profile
@AllThingsSmitty
AllThingsSmitty / code-highlight.css
Created Oct 31, 2017
CSS for highlighting code
View code-highlight.css
code,
pre {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
padding: 3px;
}
code {
white-space: nowrap;
@AllThingsSmitty
AllThingsSmitty / css-reset.css
Created Oct 18, 2017
Snippet for CSS reset
View css-reset.css
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@AllThingsSmitty
AllThingsSmitty / system-fonts.css
Created Jul 12, 2017
Snippet for system fonts
View system-fonts.css
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
@AllThingsSmitty
AllThingsSmitty / flexbox-center-container.css
Created Jul 7, 2017
Snippet for vertical-/horizontal-aligned container
View flexbox-center-container.css
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
@AllThingsSmitty
AllThingsSmitty / gist.md
Created Dec 20, 2016
Example of how to embed a Gist on GitHub Pages using Jekyll.
View gist.md

Here's an example of how to embed a Gist on GitHub Pages:

{% gist 5555251 %}

All you need to do is copy and paste the Gist's ID from the URL (here 5555251), and add it to a gist tag surrounded by {% and %}.

@AllThingsSmitty
AllThingsSmitty / toggle.js
Created Oct 13, 2016
Toggle show/hide password
View toggle.js
function togglePassword() {
let passwordInput = document.getElementById('txtPassword');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
} else {
passwordInput.type = 'password';
}
}
(function () {
View disable-right-click.js
// credit: Louis Lazaris
window.addEventListener('contextmenu', function (e) {
console.log('context menu disabled');
e.preventDefault();
}, false);
document.addEventListener('mouseup', function (e) {
if (e.button === 2) {
console.log('right-click enabled');
}
@AllThingsSmitty
AllThingsSmitty / flexible-type.css
Last active Feb 21, 2017
Use :root for flexible type
View flexible-type.css
/* This has been added to CSS Protips https://github.com/AllThingsSmitty/css-protips */
/* The type font size in a responsive layout should be able to adjust with each viewport.
You can calculate the font size based on the viewport height and width using :root */
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
/* Now you can utilize the root em unit based on the value calculated by :root */
body {
@AllThingsSmitty
AllThingsSmitty / font-awesome-loaded.js
Created Apr 24, 2016
Dynamically check if Font Awesome CDN loaded
View font-awesome-loaded.js
function css(element, property) {
return window.getComputedStyle(element, null).getPropertyValue(property);
}
window.onload = function () {
var span = document.createElement('span');
span.className = 'fa';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
@AllThingsSmitty
AllThingsSmitty / responsive-images.htm
Last active Apr 11, 2016
Automatically art-directed responsive images
View responsive-images.htm
<!-- source article: http://cloudinary.com/blog/automatically_art_directed_responsive_images -->
<picture>
<!-- wide crop -->
<source
media="(min-width: 600px)"
srcset="http://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_600/on_the_phone.jpg 600w,
http://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1200/on_the_phone.jpg 1200w"
sizes="100vw">
You can’t perform that action at this time.