SalesforceFoundation/bootstrap-sf1

Introduction

If you haven't seen it already, please check out the Lightning Design System as it may be more appropriate for your project.

This is a Bootstrap based theme developed by the Salesforce.com Foundation's Business Applications team. The aim is to provide a solid and complete theme for Bootstrap that matches the SFDC Salesforce1 styleguide. More information about the contents of this theme is available at the Bootstrap-sf1 companion site.

The general look and feel is inspired by the SFDC Styleguide. There is some intention of building theme variations for different application contexts (visualforce, salesforce1, chatter), but this work has not been done at this time.

The Proxima Nova Soft fonts are not included in this repository. To match the SFDC styles you will need to include this font in your page.

Getting Started

To use the theme you just need to include the dist/ folder in your project and include bootstrap.css or bootstrap.min.css in your page. For use inside of a VisualForce page or Lightning Component you may need to use the namespaced CSS in bootstrap-namespaced.css.

You can download the theme using bower:

bower install bootstrap-sf1

Or you can download the zip.

Development

You will need:

• Git
• Node
• Bower
• Grunt

Things never to do:

• Edit any CSS files in dist/ directly
• Edit any html page in pages/ or the index.html file directly
• Edit any less file in the less/generated folder directly

These files are generated automatically and your changes will be overwritten. You have been warned. :)

First clone the repo and navigate into the directory:

git clone https://github.com/SalesforceFoundation/bootstrap-sf1.git
cd bootstrap-sf1

Next

npm install
bower install

There are a number of files that are generated for you as you make changes to the less files. To facilitate this process start the grunt watch machinery with:

grunt serve

This will also start up a local webserver at http://localhost:8000. As you edit Less files or templates Grunt will automatically compile the CSS and HTML for the docs so long as you have grunt serve running.