dbox

// Freaking easy responsive rows of items by @chriscoyier (http://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/)

@mixin rowMachine($numPerRow, $margin) {
	width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);	
	&:nth-child(n) {
		margin-bottom: $margin;
		margin-right: $margin;
	}
	&:nth-child(#{$numPerRow}n) {
		margin-right: 0;

dbox

// Variables
// ––––––––––––––––––––––––––––––––––––––––––––––––
$base-font-size         = 16px
$global-border-radius   = 4px


//
// REM Calculator
//
// Calculates and returns the REM value based on PX input

dbox

// Headings
// –––––––––––––––––––––––––––––––––––––––––––
h1, h2, h3, h4, h5, h6
  display block
  margin 1rem 0
  font-weight normal

  // Remove the margin-top on all :first-child headers
  // as the padding on the parent *almost* always makes up for it
  &:first-child

dbox

Options -Multiviews

RewriteEngine On
RewriteBase /

# 404 page
ErrorDocument 404 404.html

# Clean URLs
RewriteRule ^apartments$ /apartments.html [L]

dbox

├── dist/
|   ├── css/
|   |   └── rrssb.min.css
|   ├── images/ 
|   |   └── facebook.min.svg  etc etc
|   ├── js/
|   |   └── vendor/
|   |   |   └── jquery.1.10.2.min.js
| | | └── modernizr-2.6.2-respond-1.1.0.min.js

dbox

Headshots

• Ideally 570x570 for retina support
• Minimum 285x285 - last resort if we're scraping from web - won't be retina
• Square Crops preffered
• Save as full quality jpeg

Hero image

• ideal: 2560 x 1240
• ideal image ratio: 2x width to 1x height
• Minimum width: 1200

dbox

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]

dbox

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

dbox

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

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