lintel-contrib-alerts

Alerts for lintel.

Getting Started

This module requires Lintel.

If you haven't used Lintel before, be sure to check out the Getting Started guide, as it explains how to install and use this module. Once you're familiar with that process, you may install this module with this command:

bower install lintel-contrib-alerts --save

Once the module has been installed, you will have to load it in your main SASS file:

@import "bower_components/lintel-contrib-alerts/sass/alerts.scss"

This module also includes a javascript component, which you will have to load separately.

<script src="bower_components/lintel-contrib-alerts/dist/alerts.min.js" type="text/javascript"></script>

You can use wiredep or grunt-wiredep to automatically inject files in your build process.

Variables

Check the vars file in the sass folder to see the full list of variables you can customize.

$alert-padding-y

Default value: $cushion-y-md

Change the alert padding-top and padding-bottom.

$alert-padding-x

Default value: $cushion-x-md

Change the alert padding-left and padding-right.

$alert-margin-y

Default value: $cushion-y-lg

Change the alert margin-bottom.

$alert-border-radius

Default value: $border-radius-base

Change the alert border-radius.

$alert-close-*

Change the alert close-button vars.

$alert-*-bg

Change the background for a specific state. Use base for default style.

$alert-*-border

Change the border for a specific state. Use base for default style.

$alert-*-text

Change the text color for a specific state. Use base for default style.

Mixins

Check the mixins file in the sass folder to see how you can extend this module.

make-alert($bg, $border, $text)

Use this mixin to create a new alert state.

.alert-bacon {
  @include make-alert(#f00, #fff, #fff);
}

JavaScript

Options

Name | Type | Default | Description --------- | ------------------------------ | ------------------- | ----------- onHide | function | | Callback function to execute when alert is closed.

Methods

Name | Description --------- | ----------- close | Close alert.

Events

Event | Description -------------------- | ------------------------------ close.lt.alert | Fires immediately before alert is hidden. Can prevent alert from hiding here. closed.lt.alert | Fires immediately after alert is hidden.

Data-attr

Add data-toggle="alert-close" to the .alert-close button. You can add additional options as data-attributes.

<div class="alert alert-error">
  <button type="button" class="alert-close" data-toggle="alert-close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Error!</strong> It’s toe-tappingly tragic!
</div>

jQuery

Call the jQuery plugin on the alert, passing in any options.

var options = {
  onHide: function(alert, closeBtn) {
    console.log('onHide', this, alert, closeBtn);
  }
};

$('#myAlert').alert(options);

Alternatively, you can use the default options:

$('#myAlert').alert('close');

Examples

Base Alert

<div class="alert">
  Hello world!
</div>

Error Alert

<div class="alert alert-error">
  <strong>Error!</strong> It’s toe-tappingly tragic!
</div>

Dismissable Alert

<div class="alert alert-primary">
  <button type="button" class="alert-close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Welcome!</strong> If for any reason you’re not completely satisfied, I hate you.
</div>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

License

Copyright (c) 2014 Marius Craciunoiu. Licensed under the MIT license.