stowball

// Mixin that allows to specify arbitrary CSS properties with and output rem with pixel fallback.
// Shorthand assignments are supported too!
// Based off http://intuio.at/en/blog/an-improved-sass-rem-mixin-for-unitless-numbers/
$baseLine: 16px;
 
@mixin rem($property, $values)
{
    // Placeholder variables
    $shorthand_px:  "";
    $shorthand_rem: "";

stowball

div {
	background: #000;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGYwIiBvZmZzZXQ9IjAuMiIvPjxzdG9wIHN0b3AtY29sb3I9IiMwZjAiIG9mZnNldD0iMC40Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDAwMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2cyMjkpIiAvPjwvc3ZnPg==);
	background: -moz-linear-gradient(top, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
	background: -webkit-linear-gradient(top, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
	background: linear-gradient(to bottom, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
	-pie-background: linear-gradient(top, #fff 0%, #0f0 20%, #0f0 40%, #000 100%);
}

Requirements. 1 mixin to produce

stowball

/*
	If a user chooses to not include the partial for modal styles,
	how can we automatically not include the modal function and its init?
	
	Ideally, carousel and modal would be in their own file. It's like we need Sass for JS
*/

(function() {
	carousel.init();
	modal.init();

stowball

.accordion {
	.js & {
		display: none;
	}
	.js .open + & {
		display: block;
	}
	li {
		border-top: 1px solid #e2e4e6;		
		&:first-child {

stowball

.selected {
	background: #000;
	color: #fff;
}

.even > li:first-child {
	@include nth-child(even, 'li') {
		@extend .selected;
	}
}

stowball

@mixin media-query($value, $ltie9: true, $operator: $min, $px: false) {
	@if ($operator == $max and $value < $site-width) {
		// Do nothing
	}
	@else {
		@if ($ltie9 == true) {
			.ltie9 & {
				@content;
			}
		}

stowball

Get Out Of Photoshop

• The Post PSD Era: http://bradfrostweb.com/blog/post/the-post-psd-era/
• Mocking Up is Hard To Do: http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do

Atomic Design

• An extract from Designing Atoms and Elements: http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
  • Smashing Book #3 from where it came: https://shop.smashingmagazine.com/smashing-book-3.html
• Atomic Web Design: http://bradfrostweb.com/blog/post/atomic-web-design/

stowball

.addthis_toolbox, .addthis_toolbox iframe {
	visibility: hidden !important;
}

.addthis-loaded .addthis_toolbox, .addthis-loaded .addthis_toolbox iframe {
	visibility: visible !important;
}

stowball

.svg image/svg+xml
.woff application/x-woff

stowball

// --------------------------------------------
//	Default Variables
// --------------------------------------------

// The largest size for the traditional fixed-width desktop site
$site-width: 980px;

// Variables for media query operators. Saves typing
$min: unquote('min-width:');
$max: unquote('max-width:');