A very simple ultra-tiny toast message Library for the web. (Less than 3KB (JS + CSS)). ⚖️
Visit the Toast-It Official Website for watching "me" in action. 👀
If you like this Project, BUY ME A COFFE ☕️
- Another things in beta phase
- Classic ToastIt CSS stylesheet
- Modern ToastIt CSS stylesheet
- Emoji friendly
- How to test modern CSS
Download the minified version of toastitv1.0-min.css and toastitv1.0-min.js files and add them into your Web Project using the following sintax:
- Add the CSS file in the
<head>metatag in every HTML document where you need to use Toast-It.
<link rel="stylesheet" href="./css/toastitv1.0.min.css">Or you can also import it into your primary CSS file by importing the toastitv1.0 CSS file via CSS @import.
@import url("./css/toastitv1.0.min.css");- Add to the top of your JS main file the
importstatement for importing the Toast-It JS file. 🔝
import ToastIt from "./js/toastitv1.0.min.js";- Just configure the onlny four basic parameters to start using Toasti-It. ⚙️
ToastIt.now({
close: true, // true || false
style: 'success', // info, success, warn, error
timer: 3700, //max: 10000
message: `I'm a Toast-It message.`
}
)These parameters must be added using a literal object structure into the parenthesis of the .now() method.
- Your webapp is ready to enjoy this simple but effective library.
- The main main JS file(s) where you declare
Toast-It JSmust be declared astype="module". - We can't use this JS library as a CDN, yet. In the upcoming version we'll add this optional feature.
- The main main JS file(s) where you declare
If you prefer to use the CDN version of Toastit-JS, please download the minified version of toastitv1.0-cdn.js or the minified version of it.
Remember to declare it in your JS code before the main JS file of your project.
<head>
<script src="./js/toastitv1.0-cdn.min.js"></script>
<script defer src="./js/main.js"></script>
</head>The CSS file is the same for both JS libraries.
Watch the following example where you can show how Toast-It runs in a desktop webapp.
And here is another example to watch about Toast-It runs in mobile screens. PS: Please, be always consistency with the length of toast messages to show.
We have launched the final version of ToastIt JS module and ToastIt JS CDN the first week of April 2024. The current final version is the 1.0.
In this beta version 1.1 we are including the posibility to configure a right, center or left position for the Toast message on screen.
Stay tuned for more information.
ToastIt.now({
close: true, // true || false
style: 'success', // info, success, warn, error
timer: 3700, //max: 10000
position: 'right', // left, center, or right
message: `I'm a Toast-It message.`
}
)The current beta version is fully functional but only as a Module Library. If you want to try, don't forget to also download the CSS file. The filename we are working on is toastitv1.1-beta.js located at the developers folder.
🤚🏼 Please do not use this version in Production!!
These features are under revision. We'll inform you throw this way if this features will be available or discarded.
- To stack more than one notification on screen (2024-03-08)
- Use Toast-It JS by CDN referencing
- Let to change the Toast-It position on screen
- Unlock the support for more than 10 seconds of the toast messages
- Fix the bug of
ToastItwhen its shown from a<dialog>with::backdropstyle - Cut or Truncate text messages exceeded in length
-
Automatically hide the 'close' button, to free up space for long message text (discarded) - To add a fallback action based on double click or double tap over the Toast-It to close the message
🔔 Recently (2024-06-06) the modern CSS file came to its final version.
We are developing some additional Stylesheet files to improve the only option offered by Toast-It JS. In the coming weeks you can profit the first one, modern CSS stylesheet, to replace the default CSS stylesheet. This new option will offer a clean and less invasive colour pallette.
Also the modern CSS stylesheet file is such friendly for using an emoji with the shown message.
🔔 If you want to try this another CSS Styles, download the toastitv1.0.modern.css file from the /developer folder. This version can be modified for you if you want to make some improvements over the beta version's code. If you don't want to make improvements, please download a beta version of this CSS located at the /src folder.