Jim Jeffers jimjeffers
jimjeffers
/ gist:46766
Created
January 14, 2009 03:38
A set of best practices you can paste into your CSS to keep members on the same page.
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
| /* KEEP OUR CSS CLEAN | |
| Some guidelines to follow: | |
| 1. Break code down into sections. i.e. =BRANDING, =BODY, = WIDGETX, =WIDGETY, etc. | |
| 2. Keep your rules alphabetically sorted. | |
| 3. Only put one selector per line for a block of rules that apply to multiple selectors. | |
| 4. Indent your rules, only one rule per line. | |
| example: | |
| element#id, |
jimjeffers
/ 960grid.html
Created
February 1, 2009 01:42
CSS/XHTML for displaying a 960 grid overlay on a website.
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>960.gs Grid</title> | |
| <style type="text/css"> | |
| #grid { | |
| background: rgba(255,255,255,0.1); | |
| height: 100%; |
jimjeffers
/ Easy Columns
Created
February 26, 2009 21:30
Give any div a class 'column' and if it's absolutely positioned this jQuery script will fix the height of the container for you.
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
| // Fix any absolutely positioned columns if necessary. | |
| $(document).ready( function(){ | |
| $('.column').each(function(){ | |
| var cur = $(this); | |
| if(cur.css('position') == 'absolute') { | |
| var parent = $(cur.parent().get(0)); | |
| if(cur.height() > parent.height()) { | |
| parent.css('height',cur.height()); | |
| } | |
| } |
jimjeffers
/ NoHassleDropDown.js
Created
February 27, 2009 16:23
Give any element a class of '.sub_navigation' and bam you have a hover show/hide with timeouts for better usability. Requires jQuery.
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
| // Handle any drop down navigation systems. | |
| $(document).ready(function(){ | |
| $('.sub_navigation').each(function() { | |
| var menu = $(this); | |
| menu.hide(); | |
| var parent = $(menu.parent().get(0)); | |
| var timeout = false; | |
| parent.hover(function(){ | |
| if(!timeout && !menu.is(':visible')) { | |
| timeout = setTimeout(function(){ |
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>This is a page SUCKA!</title> | |
| <style type="text/css" media="screen"> | |
| ul#primary_navigation { | |
| display: block; | |
| overflow: auto; |
jimjeffers
/ asset_bundler.rb
Created
February 4, 2010 08:16
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
| # Joins multiple assets into a single file. | |
| # Just like asset caching in Ruby on Rails | |
| # Except we also minify with the yui-compressor! | |
| require "rubygems" | |
| require "yui/compressor" # sudo gem install -r yui-compressor | |
| # Specify paths for your assets. | |
| paths = { | |
| :js => "javascripts/", | |
| :css => "stylesheets/" |
jimjeffers
/ be_generic.css
Created
March 7, 2010 05:20
Example CSS snippets referenced on my blog: http://donttrustthisguy.com/2010/03/07/the-art-and-zen-of-writing-css/
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
| /* The two rules below would accomplish the same thing. */ | |
| div#primary_content p { | |
| font-size: 0.875em; | |
| } | |
| p { | |
| font-size: 0.875em; | |
| } |
jimjeffers
/ inner_shadow.css
Created
March 24, 2010 06:57
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
| /* How to fake Photoshops 'innershadow' layer effect with CSS3 modules and rgba. */ | |
| h1 { | |
| background: rgba(255,255,255,.25); | |
| border-radius:5px; | |
| -o-border-radius:5px; | |
| -icab-border-radius:5px; | |
| -khtml-border-radius:5px; | |
| -moz-border-radius:5px; | |
| -webkit-border-radius:5px; |
jimjeffers
/ jquery.plugin.formtastic_radios.coffee
Created
March 29, 2010 06:07
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
| jQuery.fn.formtasticCustomRadios: (options) -> | |
| defaults: { | |
| activeClass: "checked" | |
| inactiveClass: "unchecked" | |
| customClass: false | |
| defaultClass: "custom_radio" | |
| rowClass: false | |
| spanClass: "radio_button_element" | |
| } | |
| settings: jQuery.extend(defaults,options) |
jimjeffers
/ jquery.plugin.custom_select.coffee
Created
March 29, 2010 06:09
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
| jQuery.fn.formtasticCustomSelect: (options) -> | |
| defaults: { | |
| activeClass: "active" | |
| containerClass: "custom_select_container" | |
| customClass: false | |
| defaultClass: "custom_select" | |
| dropdownClass: "custom_select_dropdown" | |
| inactiveClass: "inactive" | |
| indicatorClass: "custom_select_indicator" | |
| linkClass: "custom_select_link" |
OlderNewer