Show Apex Messages in Salesforce Lightning Design System

Apex Messages in Salesforce are used in displaying messages in standard visualforce pages. Commonly I will implement a Global Apex Class to handle all sort of apex messages on visualforce pages.

global with sharing class  PageUtility{
 
    global static void showMsg(ApexPages.Severity sev, String message)
    {
        ApexPages.Message msg = new ApexPages.Message(sev, message);
        ApexPages.addMessage(msg);
    }
    global static void showConfirm(Object conf)
    {
        showMsg(ApexPages.Severity.Confirm,String.Valueof(conf));
    }
    global static void showInfo(Object info)
    {
        showMsg(ApexPages.Severity.Info,String.Valueof(info));
    }
 
    global static void showWarning(Object warn)
    {
        showMsg(ApexPages.Severity.Warning,String.Valueof(warn));
    }
 
    global static void showError(Object err)
    {
        showMsg(ApexPages.Severity.Error,String.Valueof(err));
    }

}

So now you can easily to call these methods by simply calling in Apex Controller:

    public void init(){
     
        PageUtility.showError('Message Message');
        PageUtility.showWarning('Warning Message');
        PageUtility.showConfirm('Confirm Message');
        PageUtility.showInfo('Information Message');
    }

But how can we convert this standard UI to SLDS?
You can follow below steps:

1. Add "Lightning Design System CSS" into your org as static resource and include it into your visualforce Page
2. Include css into your page and wrap items around slds Class

From SLDS library the classes are as below
success--slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture
failure ---slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture
info ---slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture

3. Apply trick by using Jquery and CSS

<apex:page controller="TestPageUtilityCls" standardStylesheets="false" >
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <apex:stylesheet value="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css"/>

<style>
.msgIcon {
    display: none!important
}
.customMessage * {
    color: #fff!important
}
.customMessage {
    margin: 5px 0!important;
    max-width: 1280px;
    opacity: 1!important;
    width: 100%;
    font-size: 12px;
    border: 0px;
    padding-left: 10px;
}
.message {
    opacity: .1
}
</style>


<script>
    $(document).ready(function(){
       overridePageMessages();  
    });
     
    function overridePageMessages(){  
        var textureEffect = '';
        textureEffect = 'slds-theme--alert-texture';
                   
        $('.warningM3').addClass('slds-notify slds-notify--toast slds-theme--warning customMessage '+textureEffect);        
        $('.confirmM3').addClass('slds-notify slds-notify--alert slds-theme--success  customMessage '+textureEffect);  
        $('.errorM3').addClass('slds-notify slds-notify--alert slds-theme--error customMessage '+textureEffect);                
        $('.infoM3').addClass('slds-notify slds-notify--toast customMessage '+textureEffect);  
     
$('.warningM3').removeClass('warningM3');
$('.confirmM3').removeClass('confirmM3');  
        $('.errorM3').removeClass('errorM3');
        $('.infoM3').removeClass('infoM3');
     
    }
</script>
 
 
    <div class="slds">
        <apex:pagemessages/>
    </div>

 
</apex:page>