Lightweight, stylish, pure-css callouts? Yes please!
A collection of stylish, CSS-powered admonitions designed to enhance HTML-based documentations, webpages, static sites, and more. Most excitingly: without the need to use any JavaScript!! This repository provides a lightweight, pure CSS solution to create visually appealing callouts for a variety of purposes.
- Pure CSS Implementation: No external libraries or JavaScript required.
- Customisable Designs: Easily modify colours, borders, icons, and typography to match your brand or project style.
- Responsive Design: Crafted to perform beautifully on desktops, tablets, and mobile devices.
- Simple Integration: Copy the CSS file, or include into your HTML
<head>directly for instant transform!
Planned Improvements
- Smarter Configuration for Markdown: These admonitions is currently made to include into HTML files, some Markdown processors might allow the use of
<link ref='stylesheet'>might not all. Some processors basically ignores<div>attributes. My aim is to make it more simplier and hopefully allow it to work in a simplier way after configurations like the way MyST Markdown / MyST Parser, MkDocs, and Rentry do. - Flexibility of Switching between Themes: For websites that allows the switch between light and dark themes, the current colours might not work the best and ruin overall aesthetic instead. Although this CSS is meant for basic use, extend and allow it to switch seemlessly may allow wider use. I might need to further debate about this. The most importantly, it's the why I'm making all of these and if adding more features necessary.
- Possibly adding
Notice,Caution, andHighlightAdmonitions: The current number of admonition classes is pretty sufficient. However, as I explore other admonitions, these three are the ones that aren't currently included. Same as the previous point, I need to debate why I would still more admonition classes (might be more than just these three), and are they necessary. - Collapsible blocks: Specifically for
note,tip,hint, andseealso, the contents in this admonition is pretty much optional to be read. I think allowing admonitions to be collapsible would be pretty awesome.
Clone the repository, link the stylesheet in your project, and begin using the pre-defined classes to convert ordinary content into attention-grabbing admonitions. Whether you need a subtle hint or a bold warning, adjust the styles to suit your unique requirements.
- Link the css file as one of your stylesheet using the
<link>:
<head>
<link rel="stylesheet" href="https://admonitions.netlify.app/admonitions.css" />
</head>Warning
Any modifications on the CSS file might reflect direct changes to your website/webpage timely.
- Call admonitions with
<div>tag.
<div class="admonition class">
<div class="title">Admonition Title</div>
<div class="content">Admonition contents.</div>
</div>Tip
You may use <span> instead of <div> for title and content. I just personally like using <div> more.
Current available classes
noteinfoimportanttiphintwarningattentiondangererrorquestionseealso
Caution
Read more in Issues and Pull Requests for pull requests. Please reuse appropriately according to the MIT License.
You may clone this repository using Git.
git clone https://github.com/username/admonitions.gitYou may install Visual Studio Code's GitHub Repositories Extension and your forked repository there. If your aim is to commit a pull request later, you might want to install the GitHub Pull Request Extension as well.
Note
Note that installing the GitHub Repositories Extension might install two more extensions along: Remote Repositories and Azure Repos too.
Contributions, feedback, and improvements are welcome! Open issues or create pull requests if you have ideas for new features or enhancements. Let's build a community resource that elevates documentation aesthetics for everyone~
Please make sure you have read the Code of Conduct, or at least the official Open Source Guide before opening an issue and/or pull request.
Tip
If you're new to Pull Requests, you may follow GitHub's official guide on Contributing to a project or Web Dev Cody's "How to make a pull request on an open source project" video.
Important
Please only open issue/pull request about one issue each time. Any issues or pull requests with more than one problem stated/commit files each time will automatically be closed.
Elevate your documentation and let your important messages stand out with these modern, gorgeous, and customisable CSS admonitions!
These are where I take my inspirations from!
- KKKZOZ/hugo-admonitions
- admonition style by Haishan
- Blockquote Admonitions (Vanilla CSS) by 3PSY0N
- shhdharmen/keyboard-css
- MyST Markdown
- CSS for Admonition Extension on CommonMark
This repository is under the MIT License.