Unless you’ve spent the last 18 months under a literal rock, you’ve no doubt heard about Lightning and how it can help you build apps faster. We’ve spoken with many developers in the Salesforce community over the past 18 months about their transition to Lightning, and have received great feedback that we are using to deliver tools and features that make it easier for you to use Lightning Components. That is why I am excited by the new Base Lightning Components that we delivered in the Winter ’17 release. Over the next few weeks, I will be writing several posts to introduce you to this new resource.

Designing (and Enhancing) Beautiful Apps is not Easy

Before we dive into Base Lightning Components, let’s talk about why we created them. That story goes all the way back to the early pilot releases of Lightning where a common story we heard from the pilot participants was: “that UI looks cool, how do we make our apps look like that?”

Having worked with CSS for the better part of 20 years, I’ve formed an opinion that I am sure you will agree with: the “C” in CSS often stands for confusing! This is especially true when you are trying to reverse engineer someone else’s CSS – and even more so when the CSS is the core of a large enterprise application. That is the reason we created the Salesforce Lightning Design System (SLDS) and its CSS framework. Using the Lightning Design System, you can simply find the components that you need for your Lightning application – complete with markup and CSS. It could not be simpler — or so we thought.

In reality, modifying the markup for specific component states is not always easy due to the lack of JavaScript, a side-effect of the framework-agnostic nature of SLDS. In speaking with developers about this challenge, we’ve heard that an “SLDS version of element X” would help make this easier. Base Lightning Components were born to address not only this request but also to help streamline Lightning development and make it even faster. In building out the Base Lightning Components, the team also took the opportunity to refactor code for optimum performance, and leverage some of the intrinsic browser capabilities such as client-side validation.

Inputs, Radio Buttons and Checkboxes – Oh My!

Deciding which components to build first was a matter of looking at the common patterns across both internal and external teams. It should come as no surprise that the building blocks for forms, such as inputs, radio buttons, and checkboxes, were literally everywhere, and therefore a logical first choice. However, there were also building blocks for grouping information and defining application layout.

With Winter ’17, we’ve published 18 Base Lightning Components that provide building blocks for form-based components, structural components like tabs and cards, and finally, two layout components based on the responsive grid system of SLDS. You can find the complete list in the Lightning Components Developer Guide, in the Component Reference area. As you look at the list, it is important to remember that, at least initially, these components will not “do everything under the sun,” but should address approximately 80% of use cases. We encourage feedback as you begin to build with them so that we can better understand functional gaps and plan for enhancements.

Getting Started with Base Lightning Components

So how do you go about using Base Lightning Components when building Lightning applications? The first step is to familiarize yourself with the individual components using the Lightning Component Reference docs. You will quickly notice that each of the components follows a similar pattern. First, each component is identified by the lightning: namespace and the name of the component. From there, every component has a list of attributes, just like any standard HTML element. For example, a button might look like this:

Notice the “variant” attribute. A variant is a version of the component that simply looks different from the default. In addition to the documentation for the Base Lightning Components, it can be helpful to explore the SLDS component list to see visual representations of components and their variants.

Moving forward, the list of components from the SLDS site will be the basis for new Base Lightning Components. In other words, if it is in SLDS, you can have a reasonable expectation that you will see a corresponding Base Lightning Component in a future release.

Next time, we will take a closer look at some of the individual Base Lightning Components and demonstrate how you can use them to build a holistic Lightning application.