JGallardo’s gists

JGallardo / footer-link-elements

Created September 14, 2013 00:34

I used this to align the elements inside of a mobile footer. The link name is on the left, a button is on the right.

	@media only screen and (min-width: 1px) and (max-width: 479px) {
	#footer { text-align: left; }
	#footer ul li {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 12px;
	}
	#footer ul li a span {
	display: table-cell;

JGallardo / modifying-css-in-rails-projects

Last active December 22, 2015 22:29

How to modify the CSS for a rails project

	Make all of your changes to the respective style sheet and then run the following commands. If you add a framework or theme, those are usually placed in vendor/assets/stylesheets. I can replace the second command with git add vendor/assets.

	1. Compile assets locally, run next command
	RAILS_ENV=production bundle exec rake assets:precompile

	2. Commit and push the new changes
	git add public/assets
	git commit -m "vendor compiled assets"

	3. Pull with rebase

JGallardo / config.yml

Created August 9, 2013 17:56

config.yml file that I am apparently making an mistake on since Heroku will not display content

	# Title and subheading for your site. Used on the home page and in page
	# titles.
	#
	title: "Practice Nesta Site"
	subtitle: "Nesta is pretty cool"

	# You should really specify your content's author when generating an
	# Atom feed. Specify at least one of name, uri or email, and Nesta will
	# include it in your feed. See the Atom spec for more info:
	#

JGallardo / normalize.css

Created August 8, 2013 02:01

Smaller version of normalize

	/! normalize.css v2.1.1 \| MIT License \| git.io/normalize /

	/* HTML5 display definitions*/
	article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}
	audio,canvas,video { display: inline-block; }
	audio:not([controls]) { display: none;height: 0; }
	[hidden] { display: none; }

	/* ======! Base !====== */
	html { background: #fff; color: #000;font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

JGallardo / mobilecheck.js

Created August 7, 2013 17:35

The purpose of this is to disable the link when not in mobile. The link has a telephone number, so convenient for mobile users to call out, but this same link needed to be disabled on non-mobile devices. The first block of code is for mobile detection. From http://detectmobilebrowsers.com/ But the connection between the two is missing here.

(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(n

JGallardo / telephone-link.html

Last active December 20, 2015 13:08

Example call-to-button. The purpose of this element is to be a call to action to actually call in, On mobile, the ability to just push it and call will be available. Otherwise on desktop, it is just a big visual cue. Now to add the Javascript to disable as a link when not on a mobile device.

	<div id="headerCTA">
	<div>
	<a href="tel:888-336-1301">
	<div>
	Schedule a pickup<br>
	888-336-1301
	</div>
	</a>
	</div>
	</div>

JGallardo / copyleft.html

Created July 25, 2013 05:51

This makes the "Copyleft symbol." Credit to the Stack Overflow user "Anonimo" for the help on the CSS http://stackoverflow.com/users/2178220/anonimo

	<style>
	.copy-left {
	display: inline-block;
	text-align: right;
	margin: 0;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;

JGallardo / nested.js

Created July 23, 2013 22:37

I have these nested statements and this works but I am looking to make a cleaner version so that I can scale this properly and it does not get too "spaghetti" like.

	/* -----------------------------------------
	Global
	----------------------------------------- */
	$(window).load(checkWindowSize);
	$(window).resize(checkWindowSize);

	/* -----------------------------------------
	Home Page - shipping.aspx
	----------------------------------------- */
	$('div#homelinks div').addClass('panel');

JGallardo / app.js

Last active December 20, 2015 03:49

Things that I have to nest for various cases for this responsive site.

	/* -----------------------------------------
	Global
	----------------------------------------- */
	$(window).load(checkWindowSize);
	$(window).resize(checkWindowSize);

	/*
	function checkWindowSize() {
	if ( $(window).width() < 380 ) {
	$('div#footer ul li').addClass('button medium secondary expanded');

JGallardo / top-bar.css

Created May 8, 2013 18:45

Default styling for navigation bar in the Foundation 4 framework.

	.top-bar {
	overflow: hidden;
	height: 45px;
	line-height: 45px;
	position: relative;
	background: rgb(35, 43, 45); }
	.top-bar ul {
	margin-bottom: 0;
	list-style: none; }
	.top-bar .row {

Juan Gallardo JGallardo