Skip to content

Instantly share code, notes, and snippets.

View derekbtw's full-sized avatar
🌎
Internet explorer

Derek Bytheway derekbtw

🌎
Internet explorer
View GitHub Profile
@derekbtw
derekbtw / sanfrancisco.css
Created June 22, 2017 03:06
San Francisco Font
@charset "UTF-8";
@font-face {
font-family: "San Francisco";
font-weight: 100;
src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff");
}
@font-face {
font-family: "San Francisco";
font-weight: 200;
src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff");
@derekbtw
derekbtw / sanfrancisco-font.css
Created June 5, 2017 23:06
San Francisco Web Font
/**
* http://applemusic.tumblr.com/
* https://jsfiddle.net/xq56dmrh/
*/
/** Ultra Light */
@font-face {
font-family: "San Francisco";
font-weight: 100;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff");
@derekbtw
derekbtw / style-helper.min.css
Created May 1, 2017 17:18
Basic styles to speed up the design process. (Minified)
.m0{margin:0!important}.m1{margin:1em!important}.m2{margin:2em!important}.m3{margin:3em!important}.m4{margin:4em!important}.m5{margin:5em!important}.m6{margin:6em!important}.m7{margin:7em!important}.m8{margin:8em!important}.m9{margin:9em!important}.m10{margin:10em!important}.mt0{margin-top:0!important}.mt1{margin-top:1em!important}.mt2{margin-top:2em!important}.mt3{margin-top:3em!important}.mt4{margin-top:4em!important}.mt5{margin-top:5em!important}.mt6{margin-top:6em!important}.mt7{margin-top:7em!important}.mt8{margin-top:8em!important}.mt9{margin-top:9em!important}.mt10{margin-top:10em!important}.mr0{margin-right:0!important}.mr1{margin-right:1em!important}.mr2{margin-right:2em!important}.mr3{margin-right:3em!important}.mr4{margin-right:4em!important}.mr5{margin-right:5em!important}.mr6{margin-right:6em!important}.mr7{margin-right:7em!important}.mr8{margin-right:8em!important}.mr9{margin-right:9em!important}.mr10{margin-right:10em!important}.mb0{margin-bottom:0!important}.mb1{margin-bottom:1em!important}.mb
@derekbtw
derekbtw / style-helper.css
Created May 1, 2017 17:17
Basic styles to speed up the design process. (Extended)
/* Margins */
.m0 {
margin: 0 !important;
}
.m1 {
margin: 1em !important;
}
.m2 {
margin: 2em !important;
}
@derekbtw
derekbtw / rule-creator.sass
Last active April 23, 2017 06:47
Creates rules "x-y" (.h-1 { height: 1px} .h-2 {height: 2px} etc.)
$total-px: 100
$rule: h-
$property: height
$px: ()
@for $i from 1 through $total-px
#{$rule}#{$i}
#{$property}: $i#{px}
@derekbtw
derekbtw / snippets.cson
Last active April 23, 2017 04:29
Atom Snippets - These are just my personal Atom snippets (Fast Sass prefixes, bootstrap templates, and much more)
# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
@derekbtw
derekbtw / centered.css
Created April 23, 2017 03:15
Align element directly in the center of the screen (vertically & horizontally) with CSS
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@derekbtw
derekbtw / vertically-align.scss
Created April 23, 2017 03:09
Vertically align anything with only 3 lines of CSS (Sass mixin included)
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* Mixin */
@mixin vertical-align($position: relative) {
position: $position;
@derekbtw
derekbtw / package.json
Last active July 1, 2021 07:42
polymer live reload
// npm install browser-sync --save-dev
// npm run dev
{
"name": "polymer-starter-kit",
"license": "BSD-3-Clause",
"devDependencies": {
"browser-sync": "^2.18.8",
"eslint": "^3.12.0",
"eslint-config-google": "^0.7.1",
"eslint-plugin-html": "^1.7.0"
@derekbtw
derekbtw / create-script.sh
Created April 14, 2017 14:37
Bash script to create a header for bash scripts
#!/bin/bash -
#title :mkscript.sh
#description :This script will make a header for a bash script.
#author :bgw
#date :20111101
#version :0.4
#usage :bash mkscript.sh
#notes :Install Vim and Emacs to use this script.
#bash_version :4.1.5(1)-release
#==============================================================================