castlecss-docs/views/notifications.html

Documentation website for CastleCSS

{% set currentPageId = 'notifications' %}{% set pageTitle = 'Notifications - CastleCSS' %}{% include "inc/header.html" %}

	<!-- Main -->
	<div class="b0_12 b4_14 b4_push_01">
		<div class="p p-b3-3x">
			<div class="block">
				<h1>Notifications / alerts</h1>
				<p class="intro">The right way to inform your visitors</p>
				<p class="alert">
					Note: You need castlecss-notifications or the full package of CastleCSS for this.
				</p>
				<p>Use the <code>notify</code> and <code>alert</code> classes to make your messages stand out.</p>
				<p>Overwrite colors using your own <a href="variables.html">variable.scss</a> or overwrite all notifications/alerts with your own notifications.scss file.</p>
			</div>
			<div class="block">
				<div class="alert mb">Friendly alert with a <a href="#">link</a></div>
				<div class="alert-positive mb">Positive alert with a <a href="#">link</a></div>
				<div class="alert-warning mb">Alert with a warning and a <a href="#">link</a></div>
				<div class="alert-negative mb">Negative alert and a <a href="#">link</a></div>
				<pre class="brush: xml;">
					<div class="alert">...</div>
					<div class="alert-warning">...</div>
					<div class="alert-positive">...</div>
					<div class="alert-negative">...</div></pre>
			</div>
			<div class="block">
				<div class="notify mb">Notification</div>
				<div class="notify-positive mb">Positive notification</div>
				<div class="notify-warning mb">Warning notification</div>
				<div class="notify-negative mb">Negative notificiation</div>
				<pre class="brush: xml;">
					<div class="notify">...</div>
					<div class="notify-warning">...</div>
					<div class="notify-positive">...</div>
					<div class="notify-negative">...</div></pre>
			</div>
		</div>
	</div>
	<!-- End main -->

{% include "inc/footer.html" %}