19

How to make a vf page with the same look & feel as salesforce1, any ideas?

Improve this question

5 Answers 5

Reset to default
17

The best place to start with this is the Salesforce1 style guide at:

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

This details colours, fonts and has sample code to create components that match Salesforce1, such as buttons, cards, lists.

Improve this answer
5
  • Nice share.Good to know these are exposed on heruko
    – Mohith Shrivastava
    Jan 30, 2014 at 8:38
  • Bob, posting the style guide is great, but how are we meant to use the components within it? The default style sheets are not available in Visualforce pages within Salesforce1 and there is no link to download them for the style guide site. Now I could reverse engineer them from the style guide site source, but that doesn't seem the best way of going about things.
    – Alex Tennant
    Feb 13, 2014 at 9:15
  • 1
    You should be able to copy the resources from that site - if you are using chrome then right click to use the inspector. The advice from SFDC is to copy the stylesheets as they are subject to change without notice so relying on their style names isn't safe.
    – Bob Buzzard
    Feb 13, 2014 at 18:45
  • Like Alex, I'm a bit confused about taking that step to use the tools with what we have. Essentially, I have a page of Visualforce, full of apparent nono's such as pageBlock, pageBlockSection etc. The big question is how do I take this page and: 1) make it display as per desktop when viewing on desktop 2) make it display in a Salesforce1 fashion on the app Very little in the way of first steps handholding out there on the net. Not sure if it is assumption, but most guides are glossing over what needs to be done.
    – 44f
    May 28, 2014 at 15:47
  • Example: salesforce.com/us/developer/docs/salesforce1/Content/… Says what not to do but little guidance on how to use things properly. I started using <h1> and <div> - besides the errors I was getting, the formatting was completely style free for the <h1> aspect of things. Really confused as to how you're meant to take existing development and recode it to work on both desktop and mobile.
    – 44f
    May 28, 2014 at 15:52
12

I've written a jQuery plugin which will apply the styles from the style guide to simple HTML / Visualforce:

https://github.com/joshbirk/onestarter

There is a static resource in that repository that includes the CSS from the style guide as well as a jquery and related plugins to get started. The plugin also has some functions to easily handle things like the submit button and resolve differences between Chatter in the browser and Salesforce1.

Note - this is basically a preview of the plugin, still a bit of a WIP.

Improve this answer
8

A Salesforce1 Bootstrap theme was recently released by developers from the Salesforce Foundation. It is a quick and easy way to align with Salesforce1 style guidelines while using a framework that is quite familiar.

Getting started: http://developer.salesforcefoundation.org/bootstrap-sf1/index.html

Git repo: https://github.com/SalesforceFoundation/bootstrap-sf1

Improve this answer
1
  • I really want to know the scope Salesforce1 bootstrap, is it cover all component?How about page that embed with Chatter.
    – unidha
    Aug 28, 2015 at 4:34
1

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).

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/

Improve this answer
0

You should now be able to use the lightning design system to do this - https://www.lightningdesignsystem.com.

You'll just have to download the static resource, add the style sheets such as:

<apex:stylesheet value="{!URLFOR($Resource.slds0121, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

and then add the classes to your componenets. This has the advantage of being supported by Salesforce and you know that your page wil always have the same CSS that Salesforce uses internally

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .