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:
This module also includes a javascript component, which you will have to load separately.
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
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.
× Error! It’s toe-tappingly tragic!
jQuery
Call the jQuery plugin on the alert, passing in any options.
var options = { console; }; ;
Alternatively, you can use the default options:
;
Examples
Base Alert
Hello world!
Error Alert
Error! It’s toe-tappingly tragic!
Dismissable Alert
× Welcome! If for any reason you’re not completely satisfied, I hate you.
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.