How to do Visualforce page with the same look & feel as salesforce1? [duplicate]

Question

Hi i have develloped VF pages1.i have accesing in Saleforce1 Mobile App.But the VF UI is different with Mobile UI. How to change VF to Saleforce1 Mobile App UI

Answer 1

http://sfdc-styleguide.herokuapp.com/

Have a look at the above Style guide for salesoforce 1 and that should help you to build pages similar to Salesforce 1.

Answer 2

Right now to apply CSS you have to reverse engineer it and copy to your visualforce page. Recently I have implemeted this by copying CSS for Salesforce1 pages and applying it to our custom visualforce pages.

Keep remember that custom visualforce pages open in iframe when accessed in Salesforce1 environment So you will not be able to access SFOne CSS by applying .selector or by Javascript.

All CSS applied in Salesforce1 is under the parent selector .oneStyle. So wrap your html code in a container div and apply .oneStyle class to it. This will make sure that all Salesforce1 css effects will we mobile compatible. And copy CSS style for each element from SFOne and copy it to you visualforce page. Thats not the best way but little understanding of css may not require best method (if exists). Do not provide container width also.

For more information here basic details has been provided to give Salesforce1 look and feel to pages: http://intmist.wordpress.com/2014/02/16/salesforce1-look-and-feel-customise-visualforce-pages-for-salesforce1/

Copied from:salesforce1 look & feel in Visualforce

Answer 3

As per my knowledge , you have to use the doctype ="html.5.0" attribute inside you can also refer to following URL'S for designing salesforce 1 templates :

blogs.developerforce.com/developer-relations/2013/12/things-to-know-about-s1.html http://res.cloudinary.com/hy4kyit2a/image/upload/s1_dev_cheatsheet_cheatsheet.pdf http://www2.developerforce.com/en/mobile/services/mobile-templates