There are projects I have worked on which are highly organized affairs.  There project managers, timelines, the occasional scrum meeting, quality assurance tests to pass and all manner of boxes to check and letters to dot and cross before anything is made public.

This is not one of those projects.  However, I’ve delayed posting about it long enough that Brian Kwong (AKA @Kwongerific AKA The Salesforce Wizard) has actually already beaten me to the punch by writing up his first impressions of OneStarter, a jQuery plugin I’ve written to make it easier to style pages (particularly Visualforce) to look like the Salesforce1 mobile interface.

A little backstory here: like many developers I’ve been tinkering with Visualforce in Salesforce1 since around Dreamforce of last year.  With these attempts, I kept using existing frameworks like our Mobile Templates or Bootstrap to make my pages mobile friendly.  It worked, but it didn’t entirely match the style of Salesforce1.

Enter the Salesforce1 Style Guide

As it turns out, there is an online resource to help developers style pages like the Salesforce1: The Salesforce1 Style Guide.  This shows several examples of how the HTML within the Salesforce1 mobile interface is built out, complete with CSS styles.  This is great, but I had a couple of complications in trying to use it … the first was there was no handy download to get all the CSS and supporting files, and the second that quite a bit of the CSS relies on using several different classes.  That was when I started pulling things together and it occurred to me that jQuery could handle the CSS transformations for me.

The Target Audience

One thing I find interesting about Salesforce1 is that it is well geared to what we’ve been calling micromoments.  This is different than an app design which is trying to create a wholesale solution for a business process.  This is more in line with a custom button or link on a page layout.  My goal was is to give a developer who was trying create a solution out of a page or two a solution where they didn’t spend as much time styling the application as they did building it out in the first place.

If you are building out a truly complex application for Salesforce1, then OneStarter may still help – but isn’t probably your biggest concern.  More on that later.

What does OneStarter do?

OneStarter basically has three goals:

1. Easy packaging of CSS which matches closely to the Salesforce1 style guide
2. Use jQuery’s DOM manipulation to automatically apply as many styles as feasible
3. Add navigation functionality which resembles Salesforce1 or otherwise connects to it, namely:
   1. A carousel UI widget to mimic the carousel navigation on many Salesforce1 layouts
   2. Interactivity with the top navigation submit button
   3. Handle adjustments depending on a page being displayed as a left nav app, record action or global action

…and I don’t expect it to get much more complicated than that.  There may be more widgets to add in the future, but the focus of OneStarter will be this core functionality.

How is it used?

First, go to the github repo.  Clone or download the zip of the repo locally.  There are both zip and staticresource files, which are basically the same thing with different extension – but one might be more useful than the other depending on how you are deploying.  Then basically:

1. Add the Static Resources to your Visualforce page

A full set of them would look like this:

Note that TouchSwipe is only needed if you are using the carousel widget, and the publisher is just to use any of the action related functions (like accessing the submit button).

2. Write some HTML, for example:

3. Call OneStarter with jQuery
From jQuery’s document read event, call OneStarter to apply the additional styling:

Which in this specific case will apply the styles to everything in the div with the id of “one-app”. Note that some styling will occur just from including the CSS itself (but not too much).  Now we see something like:

To see more examples checkout the pages folder within the github repo.

The Right Tool for the Right Job

OneStarter is meant to get simple interfaces styled like Salesforce1 quickly, but it is not meant to replace other MVC style frameworks (Angular, Backbone, Ember, etc.) or even necessarily to replace UI frameworks like Bootstrap (see Sam’s recent post on using Twitter BootStrap with Visualforce).  It’s another tool in your toolkit – but be sure you are doing all your due diligence before jumping into your next project.

What’s Next?

OneStarter is a work in progress and I’ll be enhancing it and the documentation around it in the near future.  If you do use it and want enhancements or find issues with it, use github to file those.  Or better, grab a fork and jump into the code.  Give me a shoutout about it on twitter. Keep an eye on the blogs for upcoming posts about updates, different tricks and use cases for OneStarter.  I’ll do some deeper dives into some of the more specific aspects like using the carousel widget and communicating with navigation elements like the submit button soon.