Explore the functionalities of an enhanced notification system, where traditional Bootstrap toasts are elevated with custom CSS for a unique aesthetic and enriched with JavaScript for expanded event handling capabilities. This bespoke notification solution not only adheres to modern design principles but also introduces a layer of interactivity, ensuring that messages are not just seen but are also engaging. Ideal for applications requiring a sophisticated touch in user communication, this system exemplifies how standard components can be transformed into exceptional user experiences.
The standard notifications serve as the backbone of our notification system, designed to deliver information in a clear, concise, and visually appealing manner. Tailored with custom CSS, these notifications stand out for their aesthetic coherence with the application's design language, ensuring that messages are both noticeable and aligned with the user interface. Whether it's alerting users to system updates, incoming messages, or timely reminders, these standard notifications are crafted to maintain user engagement without disrupting the overall user experience.
Flash notifications, on the other hand, are dynamically triggered by specific user actions or events, such as the completion of API requests. These notifications are particularly useful for immediate feedback, informing users about the success or failure of their actions, like the outcome of a form submission or a data update request. With the capability to reflect real-time results, flash notifications enhance interactivity and provide users with instant reassurance or guidance, making them an integral part of a responsive and user-centered interface.
The following are notification examples:
The following are flash notification examples:
In addition to the standard class there is a custom class that can be used to customize both the color and optionally the title:
Below is an example of CSS styling for a custom button:
/* Base styles for notification and button */
.notif-custom-1, .btn-custom-1 {
background-color: #699; /* Base color */
color: #fff;
}
/* Hover and focus states for button */
.btn-custom-1:hover,
.btn-custom-1:focus {
background-color: #7aa1a1; /* Slightly lighter shade for hover/focus states */
color: #fff;
/* Using rgb() with alpha value for modern color-function notation */
box-shadow: 0 3px 8px rgb(102 153 153 / 17%);
}
/* Disabled state for button */
.btn-custom-1:disabled {
background-color: #699; /* Base color */
border-color: #699;
}
/* Active state for button */
.btn-custom-1:active {
box-shadow: none;
}
/* Styles for .btn-custom-1 variants */
.btn-custom-1.btn-simple,
.btn-custom-1.btn-link {
color: #699; /* Base color */
}
/* Hover states for .btn-custom-1 variants */
.btn-custom-1.btn-simple:hover,
.btn-custom-1.btn-link:hover {
color: #7aa1a1; /* Slightly lighter shade for hover state */
background-color: transparent;
}
/* Disabled button within a fieldset that is disabled */
fieldset[disabled] .btn-custom-1 {
background-color: #699; /* Base color */
border-color: #699;
}
The following stylesheet <link> need to be placed in the <head> and the <script> need to be placed near the end of the pages:
<!-- CSS Files -->
<link rel="stylesheet" href="/assets/css/notif.min.css" media="screen"/>
<!-- JS Files -->
<script src="/assets/js/notif-flash.min.js"></script>
The following code shows some ideas of the implementation:
$('#myButtonNotif1').click(function() { showNotification('This is an alert message!', 'alert'); });
$('#myButtonNotif2').click(function() { showNotification('This is an info message!', 'info'); });
$('#myButtonNotif3').click(function() { showNotification('This is a success message!', 'success'); });
$('#myButtonNotif4').click(function() { showNotification('This is an error message!', 'error'); });
$('#myButtonNotif5').click(function() { showNotification('This is a warning message!', 'warning'); });
$('#myButtonNotifCustom1').click(function() { showNotification('This is a custom color message!', 'notif-custom-1'); });
$('#myButtonNotifCustom2').click(function() { showNotification('This is a custom color and title message!', 'notif-custom-2', 'Customized title');