Skip to content

Instantly share code, notes, and snippets.

@brianblakely
Created June 21, 2012 20:47
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save brianblakely/2968418 to your computer and use it in GitHub Desktop.
Save brianblakely/2968418 to your computer and use it in GitHub Desktop.
Star Rules
* {
/* makes border and padding grow inward from width & height
- mix-and-match units for various box model properties
- ex. width: 25%; padding: 15px;
- no workie in IE7
*/
-moz-box-sizing: border-box;
box-sizing: border-box;
/* hiding overflow creates a block formatting context
- a BFC contains floating children and is pushed out by margins
- allows designer to be cognizant of breaks from grid
- may mess with box-shadow or other effects which do not occupy layout
*/
overflow: hidden;
/* elements will render in a text-like flow, but accept box model properties
- potentially get a lot of floating behavior automatically
- great for vertical alignment
- IE7 only works with elements that are inline by default
*/
display: inline-block;
/* prevent ugly selection of text and elements in your UI; adjusts cursor appropriately
- enable on elements in a curated fashion with the value "text"
- enable on input elements, or else they may be disabled
- remember to change the cursor to "auto" or "text" for an element when you
enable selection on it
- does not work in IE<10
*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: default;
/* prevent UI elements from displaying a context menu on long-tap
- enable on elements in a curated fashion with the value "default"
- only works in iOS as of this writing
*/
-webkit-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
-o-touch-callout: none;
touch-callout: none;
/* remove UA-default "touched" treatment for <a> and JS mouse events
- enable on elements in a curated fashion with any color value
- remember to add your own treatments if you use this
- you should be using touch events on supporting UAs anyway
- only works in iOS as of this writing
*/
-webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
-ms-tap-highlight-color: transparent;
-o-tap-highlight-color: transparent;
tap-highlight-color: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment