I am creating a mobile app with an iOS 7 theme, meaning lots of transparencies, blurs, and animations.
Does anyone know if the current JS frameworks out there (blur.js, fabric.js) will suffice in terms of performance for blurs and transparencies? Or am I stuck with going the native route.
This isn't the best question in the world, but in short, yes. I've been working on a similar project and have almost completed it. I can assure you the vast array of available CSS and jQuery markup will be sufficient for your needs.
iOS 7 Bootstrap:
https://github.com/brandonjordan1/iOS7-bootstrap
It's only in it's first version but it's the only one.
Related
Sorry for the silly question but I've been looking around on the internet all afternoon with not much success due to the many many frameworks out there (too many).
I am a java web developer who normally doesn't deal with CSS. At my company we have to support ie6 for some stupid reason. I'm looking for a css framework I can use that will get me up and running quickly with some buttons, menu's and layouts and I don't want to just dload any old web template. Would be nice if I took the opportunity to set up the css myself.
Can anyone suggest some good tools/frameworks that will get me up and running quickly? I can't use bootstrap because it does not look compatible with ie6.
If you wish to build a website which is compatible with IE 6 (This is end month of 2013 where it has ie 11) I recommend using YAML http://www.yaml.de/ . It has clear documentation with examples. You can also use http://www.cascade-framework.com/ which has minimum CSS which required for a website/web application development. Also, YUI you can use http://yuilibrary.com/yui/environments/ .
Hope it helps.
sorry i don't use any css framewrok supported IE6,but i think older versions of some css framework may support IE6 like http://www.blueprintcss.org you can try.
Try Cascade Framework. It's about as feature rich as Bootstrap and has a grid system more flexible than any other grid systems around.
I´m planing to use Cordova v3 to develop a generic application to target mobile devices using HTML/CSS. Which is the best solution in order to reuse most of the html but having the visual style for each mobile platform? Which will be the best css/framework to use in this case (preferably free)?
Thanks in advance.
As you said "but having the visual style for each mobile platform?" I understand you are searching for a native look in the apps. the other answers are good frameworks however unless you want to spend time tweaking css they will not look similar to a native UI (visually).
I have worked with Twitter bootstrap and jQM. So far so good but for a native UI look I will go for the following options which I think are the best.
These are my top choices after spending a considerable time looking for a jQM alternative as I am not really happy with it in specific aspects.
EDIT: I am adding two new options based on my experience and what I have found so far (ionic and onsen ui).
Ionic Framework
http://ionicframework.com/
Intended to develop hybrid app using Angular JS is a really gem.
I have been working with it and it has really helped me to develop faster than when using jQuery.
It also was UI elements that you can use out of the box and they are styled properly for iOS and Android although I think its style is more iOS-lish.
Pros
Angular JS based framework
Speed up the development process because of angular JS powers
Very well documented and a lot of examples and tutorials and recipes.
You could use the CSS without using angular if it is required
Free and open source
theming is done via CSS or SASS
Enough components out of the box to start building and app.
Cons
Maybe reading the ionic documentation and the Angular ties if you want to enjoy all of its powers, but it worth it.
Onsen UI
http://s.onsen.io/
I have not work yet with it but it looks like a really complete UI option for hybrid apps.
Pros
Work with Angular and jQuery was well
Free and Open SourceFree and Open Source
It has a theming tool which make easier to customize the look in case you are afraid of CSS or SASS.
Kendo UI mobile
http://www.kendoui.com/mobile.aspx
Pros
It help you create a native look with already native UI looking elements for Android, iOS, Windows Phone, BB.
Incorporates an MVC framework
Theming machine like jQM theme roller
Looks solid (I am looking forward to use it soon)
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Cons
It is not free for commercial use.
PhoneJS
http://phonejs.devexpress.com
Pros
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Optionally support Knockout.js for MVVM user interface development
Cons
Seems like its community is far less reduced in comparison with kendo, so I am not sure how much people are out there using it and that could help later.
It is not free for commercial use.
Chocolate chip UI
http://chocolatechip-ui.com
Pros
iOS 7, Android Jelly Bean and Windows Phone 8 UI looking
Open Source and the project looks active
jQuery compatible
ChocolateChip-UI uses its own JavaScript library, ChocolateChip, for DOM manipulation, Ajax requests, etc. It is very similar to jQuery. (they claim have better performance than jQuery and Zepto)
Cons
Doesn´t seems that have a wide community out there
Steroids
http://www.appgyver.com/steroids
If you feel like a adventure explorer take a took at steroids, which is cordova compatible and they claim you UI will perform as well as native.
It is quite new, I haven´t give it a try but I seems promising, however as still is not widely used I did not decided to use it as having a lot of people using it is helpful when you face problems.
NOTE: If other have interesting alternatives to experiences with this or other UI frameworks for cordova/phonegap please share!
My suggestion would be jQuery Mobile which supports almost all mobile devices in the market.
For the list of supported devices: http://jquerymobile.com/gbs/
1) It provides a native feel for each device platform.
2) Supports all platform
3) Easy support and 3rd party plugins
It's been said by some that jQuery mobile might be slow.. but you can tweak its settings to make it good.
You could use Onsen UI. It claims to be faster than jQuery and has its own theme roller and is built to be compatible with PhoneGap/Cordova.
try you using twitter bootstrap, http://getbootstrap.com..
might be a solution for you, because twitter bootstrap is framework for html and responsive code for all device,, check resolution web in http://quirktools.com/screenfly.. and you can convert web with phonegap..
I am new to monotouch and wanted to know if there is a simple way to implement css styling in any of the types of views/viewcontrollers? I have read about WebViews, worked with UIViewControllers, but I want to build an app that is basic styling for now that I can update later with css styling from a design organization. Anyone know anything about this?
iOS 5 has some limited support for global styling. Miguel has a post that explains how to use it in MonoTouch.
Interestingly enough there was a project on Kickstarter.com which ended up getting funded which allows you to use CSS3 to style iOS and soon Android apps. It actaully works really well.
Pixate.com
I was wondering if anybody knows of any css resources that are geared strictly towards mobile web apps?
I am building a mobile app using backbone and zepto, but am missing a framework for handling the main user interface components.
I know there is jQuery mobile and ST2 (and yes I know you can just grab their css), but I was wondering if there are any resources that are standalone mobile css libraries and focus on using css transitions to mimic device behaviors?
topcoat.io is still in an early stage, but is developing quite fast.
For simple example application have a look at: Sample Mobile / PhoneGap Application with Backbone.js and Topcoat
Question is a bit older, but I just stumbled across it. Maybe this is useful for someone :)
I don't know of any css frameworks that are strictly mobile but these ones are very good and have media queries that help make their stuff look good on mobile devices. Bootstrap is highly modular so it is a great starting point:
bootstrap - http://twitter.github.com/bootstrap/
foundation - http://foundation.zurb.com/
There's now Kendo Mobile available that does this, but it's not free or that cheap though.
http://www.kendoui.com/mobile.aspx
I'm looking for a set of CSS or scripts which mimic the UI (only the UI) of default applications on the iPhone/iPad, Blackberry and base Android apps?
I have a client who needs the ability to preview content and form pages on the various OS', but in their desktop browser (Chrome, FF, IE(ugh)). Ofcourse, there are dozens and dozens of standalone emulators, but I cannot find any one who may have created CSS or scripts to mimic how these would look, in the browser - e.g. default button stylings, colours, etc. not the logic of the app, but just the way it could look - with the best example I can find being : http://groupaware.mobi/iphone/#_Windows
Anyone with ideas?
thanks!
For iOS:
http://code.google.com/p/iphone-universal/
and
http://www.peterhintondesign.co.uk/journal/index.php/iphone-css-template/
which is based on the first one.
I'm sorry but until now I have only been able to find templates regarding the Iphone and not the BlackBerry nor Android UI. (I've tried to find them myself before too.)
A great template for CSS (Photoshop CS4 or higher needed) based on the Iphone is:
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Also the links by tomwadley, especially the prior link, are also quite useful regarding coding and framework.
There's some answers in this book: http://oreilly.com/catalog/9780596805791/ about creating CSS styles to mimic iOS stuff. Also covers phonegap etc, might be useful.
jQuery Mobile (JQM): http://jquerymobile.com is a framework which does just that. At its simplest, it renders "standard" html elements as native OS elements for platforms like iOS and Android.
You don't have to use the JQM framework, of course; you could simple take what you need from the CSS that JQM employs. Either inspect the css directly or write a simple test page which loads JQM and inspect the CSS in Firebug or Chrome developer console.
Checkout iUI..probably what you are looking for.
http://www.iui-js.org/index.html
For the android, try this implementation of Holo Light and Dark: http://vezquex.com/projects/holo-css/