Notification

This page demonstrates reusable notification styles inspired by Bootstrap-style status messaging, plus custom variants for caution and blueprint-style presentation.

The close buttons work in this example, and the restore control below can bring back previously dismissed notifications so each variant can still be reviewed.

Bootstrap-Inspired Notifications

Success Notification

HTML

<div class="notification notification-success">
  <a class="close" data-dismiss="notification" href="#">×</a>
  Example notification for <em>.notification-success</em>.
</div>

CSS

.notification-success {
  color: #272;
  background-color: #dfd;
}

Information Notification

HTML

<div class="notification notification-info">
  <a class="close" data-dismiss="notification" href="#">×</a>
  Example notification for <em>.notification-info</em>.
</div>

CSS

.notification-info {
  color: #278;
  background-color: #def;
}

Warning Notification

HTML

<div class="notification notification-warning">
  <a class="close" data-dismiss="notification" href="#">×</a>
  Example notification for <em>.notification-warning</em>.
</div>

CSS

.notification-warning {
  color: #750;
  background-color: #ffe;
}

Error Notification

HTML

<div class="notification notification-error" style="display:block">
  <a class="close" data-dismiss="notification" href="#">×</a>
  Example notification for <em>.notification-error</em>.
</div>

CSS

.notification-error {
  color: #933;
  background-color: #fdd;
}

Custom Notifications

Caution Notification

HTML

<div class="notification notification-caution">
  <div class="notification-inner">
    <a class="close" data-dismiss="notification" href="#">×</a>
    Example notification for <em>.notification-caution</em>.
  </div>
</div>

CSS

.notification-caution {
  background: -webkit-repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
  background:    -moz-repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
  background:      -o-repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
  background:         repeating-linear-gradient(45deg, #000, #000 30px, #dd0 30px, #dd0 60px);
  color: black;
  font-weight: bold;
  padding: 8px;
}
.notification-caution .notification-inner {
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  padding: 0px 8px;
  background: #dd0;
}
@media (max-width: 767px) { /* & below Tablet only */
  .notification-caution .notification-inner {
    padding: 3px 8px;
  }
}

Blueprint Notification

HTML

<div class="notification notification-blueprint">
  <a class="close" data-dismiss="notification" href="#">×</a>
  Example notification for <em>.notification-blueprint</em>.
</div>

CSS

.notification-blueprint {
  background-color: #49d;
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: 16px 16px;
  /*background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: 15px 15px;*/
  background-image:         linear-gradient(   rgba(255, 255, 255, .3) 1px, transparent 1px),
                            linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
                            linear-gradient(   rgba(255, 255, 255, .1) 1px, transparent 1px),
                            linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-image: -webkit-linear-gradient(   rgba(255, 255, 255, .3) 1px, transparent 1px),
                    -webkit-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
                    -webkit-linear-gradient(   rgba(255, 255, 255, .1) 1px, transparent 1px),
                    -webkit-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-image:    -moz-linear-gradient(   rgba(255, 255, 255, .3) 1px, transparent 1px),
                       -moz-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
                       -moz-linear-gradient(   rgba(255, 255, 255, .1) 1px, transparent 1px),
                       -moz-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-image:     -ms-linear-gradient(   rgba(255, 255, 255, .3) 1px, transparent 1px),
                        -ms-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
                        -ms-linear-gradient(   rgba(255, 255, 255, .1) 1px, transparent 1px),
                        -ms-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-image:      -o-linear-gradient(   rgba(255, 255, 255, .3) 1px, transparent 1px),
                         -o-linear-gradient(0, rgba(255, 255, 255, .3) 1px, transparent 1px),
                         -o-linear-gradient(   rgba(255, 255, 255, .1) 1px, transparent 1px),
                         -o-linear-gradient(0, rgba(255, 255, 255, .1) 1px, transparent 1px);
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}

Notifications as Sections

Below are notification-styled <section> elements that already adjust with window resizing.

Base CSS

This stylesheet provides the shared notification visual styles (`notification`, `notification-*`, `notification-inner`). The example page JavaScript handles dismiss/restore behavior separately.

.notification {
  border-radius: 8px;
  margin: 16px 0px;
  padding: 0.5em 16px;
  word-wrap: break-word;
}

.notification .close {
  color: inherit;
  float: right;
  font-size: 26px;
  font-weight: bold;
  line-height: 1;
  margin-left: 0.5em;
}

.notification .close:hover {
  opacity: 0.5;
}

.notification .close:active {
  opacity: 0.25;
}

@media (max-width: 767px) { /* & below Tablet only */
  .notification {
    border-radius: 0px;
    border-width: 1px 0px;
    margin: 0px;
  }
  .notification .close {
    font-size: 1.35em;
    line-height: 22px;
  }
}

JavaScript Behavior

The reusable component listens for clicks on elements with data-dismiss="notification", hides the closest notification, and exposes restore methods for page-level controls.

// asset/js/component/notification.js
var controller = window.createNotificationController({ root: document });
controller.restoreAll();
controller.getDismissedNotifications();

The page-specific script initializes the component, wires the restore button, and keeps the status line updated.

// asset/js/content/example/notification.js
var controller = window.createNotificationController({ root: document });

document.getElementById('notification-example-restore').addEventListener('click', function () {
  controller.restoreAll();
});

document.addEventListener('notification:dismissed', updateStatus);
document.addEventListener('notification:restored-all', updateStatus);

Files for This Page

• project/example/in/example/notification.html - Page structure, examples, and code snippets.
• project/example/in/asset/css/content/example/notification.scss - Shared notification visual styles.
• project/example/in/asset/js/component/notification.js - Reusable dismiss/restore notification behavior.
• project/example/in/asset/js/content/example/notification.js - Page init for the restore control panel and status updates.

Attribution