Skip to content

Instantly share code, notes, and snippets.

View dbox's full-sized avatar

Daniel Box dbox

63 followers · 74 following
View GitHub Profile
@dbox
dbox / Build-review.md
Last active April 6, 2022 17:29

While building

  • Please make sure you are building Mobile and Desktop at the same time
  • Keep an open tab with Figma and toggle between build

Before submitting for review

  • Matches Figma
  • Meta Image + Basic meta content
@dbox
dbox / spike-2.md
Created August 18, 2020 14:34

Spike 2 is for:

  • Marketing websites
  • landing pages
@dbox
dbox / postcss-mixin-custom-properties.css
Last active October 29, 2020 06:48
postcss mixin
/* some pre-defined custom properties in my code */
:root {
--default-transition-duration: .2s;
--default-easing: ease-out;
}
/* define mixin */
@define mixin transition(--transition-property: all, --transition-duration: var(--default-transition-duration), --easing: var(--default-easing) ) {
transition: --transition-property --transition-duration --easing;
}
@dbox
dbox / kni-mq-style.md
Last active July 10, 2017 14:27

1. Content should always dicate when to use a media query.

// an element that needs to break at exactly 540px
.item
  width: 100%
  
  @media(width >= 540px)
    width: 50%
@dbox
dbox / typekit.sgr
Created May 12, 2017 02:56
(function(d) {
const config = {
kitId: '{{typeKitId}}',
scriptTimeout: 3000,
async: true
},
h = d.documentElement,
t = setTimeout(function() {
h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
}, config.scriptTimeout),
@dbox
dbox / text-align.html
Created May 4, 2017 21:45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<title>National Bankcard</title>
<style type="text/css">
@dbox
dbox / teypkit-embed.htm
Created April 4, 2017 14:15
Sample typekit embed
<!-- typekit -->
<script>
(function(d) {
var config = {
kitId: 'ldj3frj',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
@dbox
dbox / fix.css
Created March 2, 2017 20:59
entireworld fix
body {
margin: 0 auto;
text-align: center;
font-size: 100%;
}
#content {
width: 98%;
padding: 3% 0% 0% 2%;
max-width: 900px;
@dbox
dbox / breakpoints.css
Last active January 24, 2017 04:22
breakpoints.css (cssnext)
/* breakpoints */
:root { /* px size at 16px base font size */
@custom-media --xs (width < 20em); /* 320px */
@custom-media --s (width < 28em); /* 448px */
@custom-media --m (width < 48em); /* 768px */
@custom-media --l (width < 64em); /* 1024px */
@custom-media --xl (width < 80em);
@dbox
dbox / rupture.css
Last active January 12, 2017 15:17
@Custom media example
/* breakpoints */
:root { /* px size at 16px base font size */
@custom-media --xs (width < 25em); /* 400px */
@custom-media --s (width < 35.7em); /* 600px */
@custom-media --m (width < 50em); /* 800px */
@custom-media --l (width < 65.625em); /* 1050px */
@custom-media --hd (width < 112.5