Proposal for a mobile-first generator for Yeoman

proposal.md

We want to create a mobile-first scaffolding solution for Yeoman that helps web app developers quickly kickstart projects with sane defaults.

Some of the problems we felt would be useful to address are:

• Selection of a UI framework with a mobile-first grid system and sane default breakpoints
• Boilerplate scaffolding of a basic RWD layout so you can just start coding
• Conditional inclusion of FastClick to avoid touch event delays (where needed)
• Appcache manifest generation
• A solution for high DPI images as part of your build process
  • Option 1: Developers always provide highest resolution assets. Build step to resize the image to correct sizes for display densitites and apply correct src-set attribute to the image <img src="highest.png" src-set="1x highest.1x.png 1.6x highest.1.6x.png">
  • Option 2: Super-compression on a 2-3x density image that is resized, however this comes with a performance hit in the browser when it comes to resizing
• Recommendations of an abstraction library to work with offline storage based on what is supported
• Prompt to include a minimalist DOM manipulation library (jQuery minimal or Zepto)
• Potentially having a solution for layout/rendering testing
• Single-command access to device testing in the cloud with BrowserStack or Sauce Labs
• Maybe automate the creation and testing on mobile emulators (e.g Create the configurations required (if adb is installed) to create a suite of emulators you can test on with the correct configurations for a range of devices...)

Here is what the prompts workflow for this might look like:

$ yo mobile

> Would you like to use Twitter Bootstrap 3.0 pre, PureCSS or TopCoat? (y/n)
Y

> Would you like to include layout boilerplate for this framework? (y/n)
Y

> For DOM manipulation, include jQuery (minimal), Zepto or no library? Enter choice.
jquery

> Conditionally include the FastClick library when needed? (y/n)
n

> Generate an Application cache manifest for the project? (y/n)
Y

> Super-compress high-resolution images during build for Hi-Dpi needs? (y/n)
y

> Include a helper library for delegating what to use for offline storage? (y/n)
y

> Include boilerplate for using the Fullscreen API? (y/n)
n

> Use BrowserStack, SauceLabs or none for your cloud device-testing needs? (y/n)
browserstack

# you would then later use this via `grunt preview nexus7` etc.

We're interested in getting feedback on what could be improved with this proposed workflow.

Are we giving users too many options? Are there any problems we're not yet considering?