Juan Gallardo JGallardo
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.
JGallardo
/ modifying-css-in-rails-projects
Last active
December 22, 2015 22:29
How to modify the CSS for a rails project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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: | |
| # |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ----------------------------------------- | |
| Global | |
| ----------------------------------------- */ | |
| $(window).load(checkWindowSize); | |
| $(window).resize(checkWindowSize); | |
| /* ----------------------------------------- | |
| Home Page - shipping.aspx | |
| ----------------------------------------- */ | |
| $('div#homelinks div').addClass('panel'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ----------------------------------------- | |
| 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 { |