Skip to content

Instantly share code, notes, and snippets.

View AllThingsSmitty's full-sized avatar

Matt Smith AllThingsSmitty

2.1k followers · 6 following
View GitHub Profile
@AllThingsSmitty
AllThingsSmitty / hamburger.css
Last active November 22, 2017 09:41
Hamburger menu "open/close" icon
body {
height: 100%;
background: #262626;
}
.hamburger {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
width: 60px;
@AllThingsSmitty
AllThingsSmitty / code-highlight.css
Created October 31, 2017 10:41
CSS for highlighting code
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 / columns.css
Last active October 1, 2017 01:24
Columns with equal height using Flexbox
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html {
background: #444;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
line-height: 1.4;
}
*, *:before, *:after {
box-sizing: inherit;
}
@AllThingsSmitty
AllThingsSmitty / replace.js
Last active July 22, 2017 18:36
Using String.replace() with regular expressions
var myString = 'EXAMPLEstring';
var myNewString = myString.replace(/[A-Z]/g, '0');
console.log(myNewString);
function replaceFunc (a, b, c) {
console.log(a, b, c);
return a.toLowerCase();
}
var myOtherString = myString.replace(/[A-Z]/g, replaceFunc);
@AllThingsSmitty
AllThingsSmitty / flexbox-center-container.css
Created July 7, 2017 14:49
Snippet for vertical-/horizontal-aligned container
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
@AllThingsSmitty
AllThingsSmitty / flexible-type.css
Last active February 21, 2017 10:17
Use :root for flexible type
/* 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 / gist.md
Created December 20, 2016 12:18
Example of how to embed a Gist on GitHub Pages using Jekyll.

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 / responsive-font-size.css
Created May 12, 2015 15:01
Font size based on viewport size
/* base font size + viewport height + viewport width */
h1 {
font-size: calc(2rem + 4vh + 4vw);
}
/* responsive font-size responsive */
html {
font-size: calc(100% + .2vh + .2vw);
}
@AllThingsSmitty
AllThingsSmitty / touch-icons.htm
Last active September 22, 2016 06:49
Which touch-icon sizes to use for mobile
<!-- https://mathiasbynens.be/notes/touch-icons#sizes -->
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
@AllThingsSmitty
AllThingsSmitty / effect.css
Created February 19, 2015 15:40
iOS-like transparency effect in CSS with backdrop-filter
.modal {
padding: 1rem 2rem;
max-width: 50%;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.95);
color: #333;
font-family: sans-serif;
line-height: 1.5;
}
.modal a { color: #bf0222; }