box-sizing: border-box; will take padding into account so 100% width doesn’t spill off the page and 100px item with 10px padding stays at 100px instead of 120px… The padding is counted inside the width… [NOTE: May need vendor prefixes and IE hack] % values for widths… target(px)/context(px) = result%) Media queries Resources http://www.youtube.com/watch?feature=player_embedded&v=wDdrI7N-mWM
<figure> <img alt=”” src=”path/to/your/image.jpg” /> <figcaption>Here is the legend for your image</figcaption> </figure> counter-reset which is used to initialize and reset one or several counters counter-increment which is used to increment one or several counters counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display […]
Define CSS breakpoints with media queries (ie. button for small width vs. full menu for wider) Hide button for wider, thus… The JS can react when the button is visible or not for appropriate device behaviors Resources Behavioral Breakpoints
Things to consider when developing in today’s web landscape: Screen size Input types (keyboard, mouse, touch) Common postures/modes of use (ie. phone users mostly use just their thumb which warrants larger touch areas and single-column layout) Consider having content on sides of screen for tablets instead of the traditional middle of the screen for laptops and […]
Save to local storage via .setItem() with a key/value pair localStorage.setItem(‘my_key’, ‘array,string,whatever’); Pull from local storage via .getItem() using the key localStorage.getItem(‘my_key’);
If you’re not using Modernizr to pull in the shiv, just add a call to the shiv directly in the head of the HTML… <!–[if lt IE 9]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
Remove HTML <!– comments –> from your WordPress content. WordPress seems to choke on it and remove content following the comment even though it’s closed properly.