Lightning Design System with Lightning Component

Posted on Updated on

Hi All,

Salesforce just made a major announcement ahead of Dreamforce by introducing Lightning Design System.With the Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering your styles.

After browsing the docs I decided to have a try with a SLDS.In this article I am just telling a basic example of SLDS and how you can use it with Lightning Component? If you haven’t looked at the SLDS yet, the best place to start is by getting your Trailhead badge for the Lightning Design System module.

I just updated my previous post with SLDS you can find the orignal post here, you can use Apex class from this post.

img1

Application :

<aura:application controller="bklightning.WClassController">
	<!-- REQUIRED SLDS CSS -->
	<ltng:require styles="/resource/SLDS080/assets/styles/salesforce-lightning-design-system-vf.css"/>
	
	<aura:attribute name="accounts" type="bklightning.WrapperClass"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	
	<!-- REQUIRED SLDS WRAPPER -->
	<div class="slds">
		<!-- Page Header -->
		<div class="slds-page-header">
			<div class="slds-grid">
				<div class="slds-col slds-has-flexi-truncate">
				  <h1 class="slds-text-heading--medium slds-truncate" title="Account Information">Account Information</h1>
				</div>
			</div>
		</div>
		<!-- TABLE - BADGE COMPONENT -->
		<table class="slds-table slds-table--bordered">
		  <thead>
			<tr class="slds-text-heading--label">
			  <th scope="col">
				<span class="slds-truncate">Name</span>
			  </th>
			  <th scope="col">
				<span class="slds-truncate">Contact</span>
			  </th>
			  <th scope="col">
				<span class="slds-truncate">Active</span>
			  </th>
			</tr>
		  </thead>
		  <tbody>
			<aura:iteration items="{!v.accounts}" var="account">
				<tr class="slds-hint-parent">
				  <td data-label="activity">
					<span class="slds-truncate">{!account.acc.Name}</span>
				  </td>
				  <td data-label="stage">
					<span class="slds-truncate">{!account.count}</span>
				  </td>
				  <td data-label="confidence">
					<span class="slds-truncate">{!account.acc.bklightning__Active__c}</span>
				  </td>
				</tr>
			</aura:iteration>
		  </tbody>
		</table><!-- TABLE - BADGE COMPONENT -->
		
	</div><!-- REQUIRED SLDS WRAPPER -->
	
</aura:application>

The markup is wrapped in a div with the class ‘slds’ as the LDS is namespaced – so any styles that I use need to be inside an ancestor with this class or they will revert back to very ordinary looking HTML.Lightning Design System works like Bootstrap.The only draw back of LDS is it only provides you CSS(Designs) not functionality.Means if you want to fire an event onclick of button you have to write JAVACRIPT/JQUERY/CSS or use external jquery/css.

So That’s It.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s