Material Design is gaining pace in the community of UI/UX designers and developers across the globe, I see adaption of material design among Rails/.Net and mobile platform. Clearly salesforce is next big platform to try material apps.
What is a Material Design :
Material is metaphor, it is a design paradigm provided by Google that offer brand new user experience to interact with an application. The colors collection, transition effects, UI components and animations effects. Yes, forget bootstrap, its the time to add more material to your applications.
Where do I find Material Design Libraries ?
This week, Google have officially launched Material Library (compiled CSS/JS) as stable release under the title 'Material Design-Lite'. I have been building many prototype using Angular and Material on top of Salesforce, before writing a blog post, I learned official annoucement from Google, about material design lite, which is powerful make is super easy to design powerful, interactive application on top of Salesforce.
How does the Material Applications look like ?
I believe this video embedded below, says more than words created by google, this video demonstrates the experience of material design and will make your re-think before you jump on designing your next project.
Who is using this design paradigm already ?
What is Materialize, is this Bootstrap Killer ?
Yes, it can potentially, but I do not say its a killer but it will make your rethink the way you design your application and if you are considering bootstrap, this is must try.
Let's jump start with Material Design with Salesforce
Import library from CDN (note the compiled library which is just 27kb extremely lightweight than Bootstrap) and you can refer to them easily from here. I have uploaded this library in the 'Feather Repo' so it can also be referenced from Github as CDN (learn how)
You can refer Feather Github Repo.
Just add the following
<link> and <script> elements into your HTML pages (27kB gzipped):Salesforce Remote Object to populate material table
Let's design a page with sidebar and header panel, and pull records on click of button using Salesforce Remote Objects
<body>
<!--Query Salesforce using Javascript Remote Objects-->
<apex:remoteObjects>
<!--Name the field you like to query-->
<apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Id,Name,BillingState, Phone" />
</apex:remoteObjects>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Salesforce with Material Design</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<!-- Accent-colored raised button with ripple -->
<button id="pullbutton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="DML()">
Pull Accounts
</button>
<a class="mdl-navigation__link" href="http://www.oyecode.com">Back to Article</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="http://www.oyecode.com">Oyecode Home</a>
<a class="mdl-navigation__link" href="">Material Forms</a>
</nav>
</div>
<main class="mdl-layout__content">
<div id="loader" class="mdl-spinner mdl-js-spinner is-active pre-loader"></div>
<div id="content" class="page-content">
<div class="demo-grid-1 mdl-grid">
<!-- Your content goes here -->
<div class="mdl-cell--12-col">
<table id="summaryOfResults" class="mdl-cell--12-col mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th style="text-align:center">Name</th>
<th style="text-align:center">Billing State</th>
<th style="text-align:center">Billing City</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</body>
</html>Result : Click to pull account or access live Visualforce Page here
Introducing Project Feather
A collection of material design mockups designed on top of Force.com Platform
I have been developing lightweight page templates that uses material design on top of Force.com Platform. Project feather is open source repo, where ill add collection of material templates to be shared with community. Please feel free to contribute and fork this repo and share your cool ideas to awesome salesforce community.
0 comments:
Post a Comment