Daniel Box dbox

Example colors by use

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

// Backgrounds
$highlight-background:    $white;
$main-background:         $off-white;

login to caissa media temple
go to databases
go to staging database
click on export
do advanced export and download zipped sql file
download uploads from staging(edited)
delete uploads on local
move uploads download from staging to local
login to projects@kurtnoble media temple
go to databases

Publish

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
Build the docs: sassdocify knapsack
Push the docs: cd .pages && git push -uf origin gh-pages
Version-up in package.json
Add git tags: git tag x.x.x
Push git tags: git push origin x.x.x
cd ..
Publish to npm: npm publish
Add release notes

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: "";

	: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

	html
	body
	.container
	header
	nav navbar
	div Adjective, SEO description – San Francisco Townhomes & Apartment Living.

	nav.sticky
	ul
	li

	// 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,

	section.section-title {
	// rules
	article { }
	h1 { }
	p { }
	.specific-div { }

	// Rules for only smaller sizes
	@include media('<tablet') {
	// rules

	.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;
	}