What design system can I use with Salesforce Communities

Question

We are considering building a portal based on Salesforce Communities. There a new "Build Your Own" template that comes with Communities, which is attractive to us as it would seem we would have a lot more control over the look of the site.

However, it doesn't have basic components, such as a Navigation menu. So, I assume I'd have to build one from scratch. But what should I build it upon? It needs to be responsive for different browsers. I tried to use LDS components and the HTML component in Communities, but it won't allow certain tags, like NAV. If the basic HTML component won't allow basic tags, I guess my only option is to create a custom Lightning component for the navigation bar.

But, what styling and layout framework should it use? LDS? Bootstrap? Custom? Does one build custom Lightning Components using LDS for Communities? What if you don't like the style LDS uses, since it likely won't match the company brand?

Answer 1

You can extend the base components for navigation in communities .To do so follow the official developer documentation for communities here

Below shows a simple example on how to build a vertical navigation using the component framework

<aura:component extends="forceCommunity:navigationMenuBase">
 <div class="slds-grid slds-grid--vertical slds-navigation-list--vertical">
   <ul onclick="{!c.onClick}">
       <aura:iteration items="{!v.menuItems}" var="item">
           <li class="{!item.active ? 'slds-is-active' : ''}">
               <a href="javascript:void(0);" data-menu-item-id="{!item.id}" class="slds-navigation-list--vertical__action slds-text-link--reset">
                   {!item.label}
               </a>
           </li>
       </aura:iteration>
   </ul>
 </div>
</aura:component>

Custom CSS file is as below

.THIS .slds-col .ui-widget {
    margin: 16px 0;
 }

 .THIS .slds-col.content {
    width: 1140px;
}

Notice here its easier to use LDS and LDS is automatically added in the builder for template based communities .

You can custom CSS on top of it for changes to font and CSS using the CSS file of the bundle .