Fontstrap

A mix of Font Awesome 5, Bootstrap 4, and custom features.

Latest Release 2.15.0

Full Screen Background

Example

...
<div class="full-screen-bg dark" data-image="dist/img/boot.jpg">
	<div class="title">Full Screen Dark Background Title</div>
</div>
...
<script>
	$('.full-screen-bg').fullScreenBackground();
</script>
...

Navbar Keep on Screen

Example

...
<nav class="navbar navbar-expand-lg">
	<a class="navbar-brand" href="#">Title</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNav">
		<ul class="nav navbar-nav">
			<li class="nav-item"><a class="nav-link" target="_blank" href="#">Bootstrap</a></li>
		</ul>
	</div>
</nav>
...
<script>
	$('.navbar').keepOnScreen();
</script>
...

Align Blocks

Example

...
<div class="uneven-list">
	<div class="list-item" style="height: 327px;"></div>
	<div class="list-item" style="height: 132px;"></div>
	<div class="list-item" style="height: 284px;"></div>
	<div class="list-item" style="height: 272px;"></div>
	<div class="list-item" style="height: 93px;"></div>
	<div class="list-item" style="height: 112px;"></div>
	<div class="list-item" style="height: 241px;"></div>
	<div class="list-item" style="height: 108px;"></div>
	<div class="list-item" style="height: 243px;"></div>
	<div class="list-item" style="height: 202px;"></div>
</div>
...
<script>
	$('.uneven-list').alignBlocks({
		countPerRow: 4,
		block: '.list-item',
		spaceBetween: 0
	});
</script>
...

Custom Switch

Example

<div class="fs-switch">
	<input type="checkbox" name="admin" value="user">
	<label class="fs-switch-magic"><i class="fa fa-check"></i><i class="fa fa-times"></i><div class="switch-handle"></div></label>
</div>
<label class="fs-switch-label">Admin <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" title="Add Admin Role"></i></label>

Offcanvas Menu

Example

...
<div class="offcanvas-menu bg-secondary">
	<div class="offcanvas-menu-header clearfix">
		<button class="pull-right offcanvas-menu-toggle p-3 text-white"><i class="fa fa-times"></i></button>
	</div>
	<ul>
		<li><a href="#"><i class="fa fa-home fa-fw mr-2"></i> Home</a></li>
		<li class='submenu-toggle'>
			<a href='#'><i class="fa fa-text fa-fw mr-2">WS</i> With Sub</a>
			<ul class="submenu">
				<li><a target="_blank" href="#"><i class="fa fa-text fa-fw mr-2">1</i> One</a></li>
				<li><a target="_blank" href="#"><i class="fa fa-text fa-fw mr-2">2</i> Two</a></li>
			</ul>
		</li>
		<li><a href="#"><i class="fa fa-text fa-fw mr-2">A</i> About</a></li>
	</ul>
</div>

<div class="offcanvas-main-content">
...
</div>
...

Image Popout

Example

...
<div class="card">
	<img class="card-img-top" src="img/example.jpg" alt="Image">
	<div class="card-body">
		<p class="card-text">Sed viverra augue tellus nulla sollicitudin scelerisque, scelerisque rutrum mauris pharetra tempor donec arcu, ante nunc ipsum donec nec dis vitae, ipsum tempor.</p>
	</div>
</div>
...
<script type="text/javascript">
	$(document).ready(function() {
		$('.card-img-top').imagePopOut();
	});
</script>

Zoom In

Example

...
<div class="card">
	<img class="card-img-top" src="img/example.jpg" data-magnification-times="3" data-magnification-direction="right" alt="Image">
	<div class="card-body">
		<p class="card-text">Sed viverra augue tellus nulla sollicitudin scelerisque, scelerisque rutrum mauris pharetra tempor donec arcu, ante nunc ipsum donec nec dis vitae, ipsum tempor.</p>
	</div>
</div>
...
<script type="text/javascript">
	$(document).ready(function() {
		$('.card-img-top').zoomIn();
	});
</script>

Local Storage

Example

* storage.get(id) - get data from storage with id.
* storage.save(id, data) - save data to storage with id and data to save.
* storage.delete(id) - delete data from storage with id.
* storage.exists(id) - check if data exist with given id.

DynamicToasts

Example

...
<div class="toasts-container fixed top right w-100 p-2"></div>
...
<script type="text/javascript">
	$(document).ready(function() {
		$('.toasts-container').dynamicToasts({message: 'Saved'});
	});
</script>

More to Come

Example