+ Start a Discussion
JeriMorrisJeriMorris 

Visualforce styling for the Salesforce1 app

Is it just me, or has Salesforce not released a stylesheet for Visualforce code developed for use with the Salesforce1 app?

I've looked through developer.force.com, and while I see lots of presentations with very simple demos Salesforce and others, and lots of third-party code (including components and stylesheets) in Github, I don't see anything that says, "if you're developing Visualforce that will be used in the Salesforce1 app, here is the stylesheet you should use."

I've seen the Heroku style guide, but that's general guidelines - it doesn't go the extra step of providing actual CSS styles.

I know there's more to developing VF for SF1 than just CSS styles, like components for page layouts (headers, footers, etc.), carousels, input fields, etc., and I've seen some managed packages containing these things that some third-parties have put together, but I don't see a set of standard VF for SF1 components.

Without this kind of standardization, isn't every app developed for SF1 going to look different - won't my org have apps with a mish-mash of styles?

If I'm building VF pages that will run in the SF1 app, what resources does Salesforce provide to ensure that my app appears somewhat consistent with the rest of the SF1 app and with VF pages developed by others?
Sonam_SFDCSonam_SFDC
Was checking on your request and found the following trianing which has been released for users who wish to create VF pages for Salesforce1:
https://help.salesforce.com/HTTrainingModulesDetail?courseId=a1S30000000hZmZEAU

Have you already checked the above, if not, pls go through..
JeriMorrisJeriMorris
Thanks, but not exactly the level of detail I'm looking for. It's still very high level.

Also, it's interesting that some documentation I've read (http://www.salesforce.com/us/developer/docs/salesforce1/Content/vf_dev_best_practices_components_to_avoid.htm) says to avoid using pageblock components in VF pages for SF1, and yet the demo in the video shows a page with a pageBlock.

I've found documentation on the "Mobile Design Templates" (https://developer.salesforce.com/en/mobile/services/mobile-templates), but it's not clear to me that these templates are designed for use in VF - the doc seems to reference "web and hybrid apps," rather than talking specifically about VF pages for the SF1 app.
Abhinav GuptaAbhinav Gupta
You checked this great guide from Salesforce UX team : http://sfdc-styleguide.herokuapp.com/
Mohith Kumar ShrivastavaMohith Kumar Shrivastava
You can use Jquery One-Starter pack from Josh to build pages of medium complexity .

https://developer.salesforce.com/blogs/developer-relations/2014/03/styling-for-salesforce1-mobile-with-the-onestarter-jquery-plugin.html

Hope this helps .Thanks