procload’s gists

procload / eqs_workaround.scss

Created July 2, 2013 19:55

Working around element queries.


	@mixin respond-to($viewport-width, $ie-version: 'lt-ie9') {
	@media only screen and (min-width: $viewport-width) {
	@content;
	}
	@if $ie-version == 'lt-ie9' {
	html.lt-ie9 & { // Using Paul Irish's conditional comments
	@content;
	}
	}

procload / fetch.rb

Created May 17, 2013 19:15

	def count_letters(given_string)
	given_arr = given_string.split('')
	puts "String length: #{given_arr.length}"
	hsh = {}

	given_arr.each do \|character\|
	hsh[character] = hsh.fetch(character,0) + 1
	end

	hsh.each_pair do \|key, val\|

procload / handy-mixins.scss

Last active December 17, 2015 09:19

Handy dandy SASS mixins. Some I wrote myself, others I've modified and the rest I've taken. Enjoy.

	// MATH & LAYOUT
	// --------------------------------------------------
	@function calc-em($target-px, $context: $base-font-size) {
	@return ($target-px / $context) * 1em;
	}

	/* One-true layout hack for equal height columns */
	@mixin equalize-column {
	margin-bottom: -99999px;
	padding-bottom: 99999px;

procload / dff.rb

Created April 29, 2013 20:19

	module Public::BidsHelper

	def bid_status_for(item, user = nil)
	user \|\|= current_user
	if item.high_bid_user_id.eql?(user.id)
	<<<<<<< HEAD
	html = %Q{<i class="icon-trophy winning"></i>}
	elsif item.bids.where(user_id: user.id).any?
	html = %q{<i class="icon-ban-circle outbid"></i>}
	=======

procload / Ample Style Guide: Rule block.scss

Created April 12, 2013 19:47

	.about {
	.content-block {
	padding: calc-em(20px) 0;
	} //content-block
	} //about

procload / Ample Style Guide: Directory Structure.txt

Created April 12, 2013 19:44

Proper SCSS directory structure.

	stylesheets
	│ ├── screen.scss
	│ └── print.scss
	├── pages
	│ ├── about.scss
	│ ├── blog.scss
	│ ├── contact.scss
	│ ├── home.scss
	│ └── listings.scss
	├── partials

procload / Ample Style Guide: Breakpoint Hierarchy.scss

Last active December 16, 2015 04:08

Correct breakpoint hierarchy

	.about-page {
	.content-header {
	background: $white;
	padding: calc-em(30px);
	width: 33%;
	@include respond-to('30em') {
	padding: calc-em(15px);
	width: 50%;
	} //30-em breakpoint
	} //content-header

procload / Ample Style Guide: Proper Commenting.scss

Last active December 16, 2015 04:08

Proper commenting

	// Global
	// --------------------------------------------------
	body {
	background: $bodyBackground image-url('backgrounds/bg-page.png') repeat;
	color: $textColor;
	line-height: 1.5;
	font-size: 100%;
	font-family: $baseFontFamily;
	} //body

procload / Ample Style Guide: Good SCSS Syntax.scss

Last active December 16, 2015 04:08

Good SCSS Syntax

	.about-page {
	h1 {
	color: $white;
	font-size: calc-em(32px);
	line-height: calc-em(24px, 32px);
	} //h1
	.content-block { background: $black; } //content-block
	} //about-page

procload / gist:5296312

Created April 2, 2013 21:21

Uncaught Error: Syntax error, unrecognized expression: <div id="ample-assets"><div class="background">      <a href="#" class="collapse">Close</a>      <div class="container">        <div id="ample-assets-tabs" class="tabs">          <div class="asset-refresh"></div>          <div class="asset-search">            <input type="text" id="asset-search" name="q" placeholder="Enter keywords..." />            <label for="asset-search">Search</label>          </div>          <a href="#" data-role="recent-assets" class="tab first-child">Recently Viewed</a><a href="#" data-role="image-assets" class="tab ">Images</a><a href="#" data-role="document-assets" class="tab ">Documents</a><a href="#" data-role="upload" class="tab ">Upload</a>          <a href="#" data-role="asset-search-results" class="tab asset-results">Results</a>          <span class="asset-loading"></span>        </div>        <div id="ample-assets-pages" class="pages">              <div id="recent-assets" class="page">      <ul></ul>    </div>    <div id=

Ryan Merrill procload