Introducing Bootstrap SF1
UDPATE 8/6/2014: I have had a couple people in the community express some confusion as to the purpose and intent of this project. After rereading this post I also realized that I could have made a few things more clear:
- This is not an official project of salesforce.com
- This is a project released by the Salesforce.com Foundation.
- This project should be viewed as an extension of the excellent work done by the salesforce.com UX team on the SFDC Styleguide.
- This project is NOT a replacement for the SFDC Styleguide, our goal is to make the process of keeping this in-sync with the styleguide fluid and automatic but the truth will always be in the SFDC Styleguide.
I have also gone ahead and updated a little of the content in this post to better reflect the purpose of and sentiment behind the project. Please excuse the interruption.
We have lots of projects and a small team. We love Bootstrap because it allows our entire team to easily and rapidly prototype and build responsive UI. We also love the SFDC styleguide for Salesforce1 apps for its great look and feel. Wouldn’t it be awesome if the two were merged? Well, that’s the goal of Bootstrap SF1: to blend Bootstrap easy with Salesforce1 awesome.
Bootstrap SF1 is a theme for Bootstrap that aims for general consistency with the SFDC styleguide. Why? So that we can quickly build apps for Salesforce1. But we aren’t trying to match the styleguide exactly because we have some more diverse needs (and have our own opinions). Our projects are diverse and may be deployed as Visualforce pages for use in Salesforce1 or in the standard UI for both mobile and desktop. We also deploy projects out on Heroku from time to time. We also need the base theme to be easy to extend and maintain and need it to be easier to wield than the styles in the styleguide.
With all of this in mind, I started the project with a few goals:
- Use Less for CSS development. Less makes it easy to write extensible CSS, especially as Bootstrap is developed using Less.
- Make local theme development easy with Grunt. The theme documentation is easy to spin up locally, which makes testing and iteration easy and efficient.
- Provide new components to make the juicy bits of the styleguide, such as cards and icons, easy to wield.
- Never force anyone to use numeric class names for the custom icons . . . seriously.
- Automatically generate a namespaced CSS file so that the theme is easy to use even in Visualforce pages with the header enabled.
Oh, I should give a little warning, this project is pretty new to the world. We are using it in a few projects, but it is under active development and has a few rough edges. We’re also planning to make it more complete and consistent with the styleguide. If you are reading this in the future, ignore this warning, I am sure everything is done . . . Okay, with that out of the way let’s move along.
In the theme section of the docs you can see a big list of common Bootstrap elements with some Salesforce1 goodness. But the real fun happens on the new icons and especially in the new components sections of the docs.
(Updated) You may be thinking to yourself, “Why not just include the SFDC styleguide CSS file in your project?” Well, we started there, and in many cases that would be a very reasonable approach, but for various reasons we wanted to use markup and styling conventions more inline with Bootstrap. Our team is more familiar with Bootstrap and the SFDC Styleguide presented its own learning curve. In addition, as we often deploy projects that will be rendered in Salesforce1 or Visualforce pages in the browser we need to make it as easy as possible to swap out different CSS. To mitigate some of the markup opinions of the SFDC Styleguide we have abstracted some of their styles into more Bootstrap-esque classes. Case in point, take this example from the Styleguide:
One thing I wanted to do was make the markup a little cleaner, less opinionated (so that it is easier to make CSS changes without changing markup), and more consistent with Bootstrap. As such you can create the same list in Bootstrap SF1 like so:
Now, the really fun part is at the top. See that class
context-contact? That class applies the icons to each card in the list. Have a list of mixed cards? No problem, just move the class on the card directly and you guessed it, swap in
context-event. If you have something custom you can use a custom icon like
context-c-heart. (Refer to the complete list of icons for more examples.)
Renders like so:
I really hope you find this project to be of benefit as you build your own awesome apps for Salesforce1. Here at the Foundation we are really taking our own medicine and have made Bootstrap-SF1 our default starting point for our projects moving forward. Expect to see the project expand and grow over the next few months.
You can check out the getting started guide if you want to jump right in and start using the theme.
You can also log any issues you find over on the issue tracker on github.