sfdc-styleguide usage questions in Salesforce1

I am trying to follow http://sfdc-styleguide.herokuapp.com/ ‘s usage of components and style classes. I have been unable to find references to any of the style classes described in the component section. A concise example of this to look at is the progress spinner.

The progress spinner on sfdc-styleguide specs:

<div class="tc">
  <img src="assets/loading-gray.gif" alt="loading" class="sq-20 dib">

While looking at one/one.app I see

<div class=" indicato forceLoadingIndicator oneCenterStage " role="alert" data-aura-rendered-by="803:1.1">
  <img class="loading large uiImage" alt="Loading" src="/auraFW/resources/aura/s.gif" data-aura-rendered-by="807:1.1">

where the actual loader image is defined in the app.css stylesheet as a background: url(data:image/svg+xml;base64string)

While I understand the efficiency of using the base64 string over a separate resource, none of the other classes really line up. For example, there is no sq-20 or tc class in any stylesheet I can find within the actual SF1 app or a custom VF iFrame.

This seems to occur across all of the components mentioned in the sfdc-styleguide that I have checked (list, lookup, progress indicator).

Has anyone had better luck with this (maybe I missed an include somewhere?) Did I misinterpret the purpose of this guide, I thought it pointed out existing classes that would be included in SF1 somehow and we could take advantage of. Are we supposed to just rip off the stylesheet assets from this guide and include them or otherwise land near their look?


It looks like you need to take whatever assets you need and use them as opposed to referencing some sort of “published” styles. From the Salesforce1 App Developer Guide’s Visual Design Considerations section:

Directly referencing Salesforce1 style sheets in your pages, or
depending on styles found in them, isn’t supported. As Salesforce1
evolves, the styles will change in ways that you won’t expect. Pages
that depend on unsupported styles may eventually break.

Source : Link , Question Author : Mike Tetlow , Answer Author : Peter Knolle

Leave a Comment