Skip to content

Instantly share code, notes, and snippets.

View dbox's full-sized avatar

Daniel Box dbox

58 followers · 74 following
View GitHub Profile
@dbox
dbox / axis-test.sss
Last active September 10, 2016 04:15
:root
// font stack
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
--helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif
--helvetica-neue: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif
--serif: Georgia, Cambria, 'Times New Roman', Times, serif
--monospace: Monaco, Menlo, Consolas, 'Courier New', monospace
// defaults
--base-font-size: 16px
@dbox
dbox / colors-by-use.md
Created June 9, 2016 21:05

Example colors by use

// General
$color-primary:           $cyan;
$color-secondary:         $tomato;

// Backgrounds
$highlight-background:    $white;
$main-background:         $off-white;
@dbox
dbox / index.html
Created March 17, 2016 13:13
pm prototyping
html
body
.container
header
nav navbar
div Adjective, SEO description – San Francisco Townhomes & Apartment Living.
nav.sticky
ul
li
@dbox
dbox / wp-database-update.md
Created February 3, 2016 16:58
update wp database
  1. login to caissa media temple
  2. go to databases
  3. go to staging database
  4. click on export
  5. do advanced export and download zipped sql file
  6. download uploads from staging(edited)
  7. delete uploads on local
  8. move uploads download from staging to local
  9. login to projects@kurtnoble media temple
  10. go to databases
@dbox
dbox / waypoints-basic.scss
Created January 19, 2016 16:49
waypoints basic
// Create a basic animation triggered by waypoints
// Defaults to fade-in-up type animation, but useful for simple fades or slides.
@mixin waypoint-basic(
$y-start: 30px,
$opacity-start: 0,
$x-start: 0,
$y-end: 0,
$opacity-end: 1,
$x-end: 0,
$duration: .2s,
@dbox
dbox / mq-sample.scss
Last active January 16, 2016 18:45
"responsive first" breakbpoint structure
section.section-title {
// rules
article { }
h1 { }
p { }
.specific-div { }
// Rules for only smaller sizes
@include media('<tablet') {
// rules
@dbox
dbox / knapsack concat
Created January 13, 2016 17:06
knapsack concat
cat knapsack/_animation.scss knapsack/_code.scss knapsack/_forms.scss knapsack/_layout.scss knapsack/_reset.scss knapsack/_tables.scss knapsack/_typography.scss knapsack/_ui.scss knapsack/_utilities.scss >> test/concat.scss
@dbox
dbox / select.css
Created December 17, 2015 05:24
.custom-select {
border: 1px solid rgba(0,0,0,0.25);
border-radius: 0.2em;
display: block;
padding: 0;
position: relative;
background: #fff;
color: rgba(0,0,0,0.7);
width: 200px;
}
@dbox
dbox / knapsack-publish.md
Last active July 15, 2016 17:34
Publishing instructions for knapsack

Publish

  1. run concat: cat knapsack/_settings.scss knapsack/_utilities.scss knapsack/_typography.scss knapsack/_animation.scss knapsack/_code.scss knapsack/_layout.scss knapsack/_tables.scss knapsack/_reset.scss knapsack/_ui.scss knapsack/_forms.scss >> test/concat.scss
  2. Build the docs: sassdocify knapsack
  3. Push the docs: cd .pages && git push -uf origin gh-pages
  4. Version-up in package.json
  5. Add git tags: git tag x.x.x
  6. Push git tags: git push origin x.x.x
  7. cd ..
  8. Publish to npm: npm publish
  9. Add release notes
@dbox
dbox / Adobe-ask-experts.md
Last active August 1, 2021 13:34
Answer for adobe ask the experts

Q: What is your favorite Css 'trick'?

Responsive images in CSS are pretty easy: just set the width: 100% and height: auto and you're good to go. Things get a little unpredictable, though, when dealing with background images. Since putting a height on the element causes lots of responsive headaches, one workaround is to have the container scale by its aspect ratio. This can be achieved by setting a few attributes to the element's :after tag:

.my-element {
  overflow: hidden;
  position: relative;
}
.my-element:after {
 content: "";