The Markup · h5bp/mobile-boilerplate Wiki Conditional comment for Window Phone 7 Conditional comment to add class iem7 for Window Phone 7 Mobile viewport optimization The HandheldFriendly meta-tag was used initially by older Palm and Blackberry models as well as browsers like AvantGo. Microsoft introduced the MobileOptimized tag for the PocketPC. This is more widely supported by modern smartphones, including but not limited to: iOS, Android, Palm Pre, Blackberry, Windows Phone 7. Home screen icon set For the iPhone 4 with high-resolution Retina Display For the first-generation iPad For non-Retina iPhone, iPod Touch, and Android 2.1+ devices For Nokia devices Mobile Internet Explorer ClearType Technology Mobile Internet Explorer allows us to activate ClearType technology for smoothing fonts for easy reading iOS web app Makes the web page run in full screen mode when launched from the home screen icon; also hides the address bar and component bar at the top and bottom of the browser. Styles the bar at the top of the browser
Toast | A Simple CSS Framework Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing. .unit.one-of-four .unit.one-of-three .unit.two-of-three .unit.one-of-two .unit.span-grid .unit.two-of-five .unit.three-of-five No floats, no clearfix; no worries. By using display: inline-block, Toast saves the headache of clearing floats, and allows you to use floats what they were originally intended for - not for laying out websites. Responsibly responsive. Toast includes two main states - a single column layout for narrow screen and mobile devices, and a multi-column layout up to a default width of 960px. IE7 is dead - long live IE8. Using pain-free CSS properties like box-sizing and display: inline-block hasn't come without it's sacrifices; Toast only supports Internet Explorer 8 and up. Usage Using Toast couldn’t be simpler. Notes
Ultimate Guide To Responsive Web Design: Tools and Examples It is estimated that within two years mobile internet users will overtake the desktop internet users. The rapid advancement of mobile internet has enabled more and more people to use their mobile device as a primary web browsing tool. What does it mean for web development? Well, the usual development for just a couple of screen resolutions is already dying out. Mobile is the new trend and most of the businesses are recognizing it. Not sure where to start? 1WD’s Very Own Responsive Website Design eBook! 1stwebdesigner’s very own Responsive Website Design eBook will guide you through the basics, along with great practices and solid advice. Learn more about 1stwebdesigner’s amazing ebooks! Tools 1. Less Framework is a CSS grid system for designing adaptive websites. 2. Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography. 3. 4. 5. 320 and up 6. FitText makes font-sizes flexible. 7. 8. 9. 10. inuit.css 11. 12.
Topcoat css-x-fire - Allows editing CSS properties in the IDE from Firebug CSS editor Installation - Screenshots - FAQ - About Many front-end web developers use Firebug for pixelpushing and style tweaking since it has an excellent live view CSS editor. It allows the developer to concentrate on CSS styling without having to refresh the browser. Unfortunately Firebug does not know about your source files. What if the web IDE - which knows about the source files - could record the changes made in Firebug and apply them on the source code? See it in action - watch this video (thanks to "goyocode"). Grab the plugin with the plugin manager or from Style with pleasure! This plugin is no longer under development. Source code still available at HTML 5 mobile web app from start to finish HTML 5 mobile web app from start to finish It seems that these days the first app that anyone interested in mobile apps codes is a to-do list. The market places are overflowing with to do list managers, advanced to do list tracking and so forth. The app should be simple with a basic list of tasks which are not to be done and the ability to store the tasks in local storage for the user. We're going to cover the design along with adding of custom jQuery Mobile theme swatches, and then add functionality. Mocking up the Design Open up the mobjectify editor. Create a page and give it a header with some heading like 'Not To Do'. Since the primary focus of our app is going to be the list, it makes more sense to have it full screen rather than inset. So far so good, let's link our tasks to a confirmation page asking the user whether to mark the tasks as done or not done. Click on the list items and in the 'link to' field, enter #confirm to link it to the confirm page. Add Custom theme colors
KNACSS, a simple and lightweight CSS framework Less Framework 4 Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins. The three sets of typography presets are aligned to a 24 px baseline grid; one is based on 16 px body text, one on 17 px, and one on 18 px. Both sets contain several harmonious type sizes calculated using the Golden Ratio. Technically The idea is to first code the Default Layout (992 px), and then use CSS3 media queries to code several child layouts: 768, 480, and 320 px. If you think of Mobile First as progressive enhancement, Less Framework will feel more like graceful degradation; old desktop and mobile browsers will only use the default 992 px layout. Philosophically The goal of Less Framework is to make building websites with multiple layouts efficient, and to make the layouts feel consistent. Less Framework is simple.