Mobile-first Bootstrap 4 UI Kit – Shards

Preview:

Description:

Shards is a free, responsive UI toolkit which helps you create modern, mobile-friendly web apps using Bootstrap 4 framework. Sketch and SCSS files are included.

Elements and components included:

• Elegant colors.
• Typography.
• Material and FontAwesome icon packs.
• Form Controls.
• Sliders.
• Datepickers.
• Card layout.
• Buttons.
• Progress Bars.
• Modals.
• Badges.
• Alerts.
• Tooltips & Popovers.
• Navbars.

Basic usage:

Include the ‘shards.min.css’ to your Bootstrap 4 web page and you’re ready to go.

<!-- CSS Dependencies -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/shards.min.css">
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/shards.js"></script>

Read the full document for more information.

Changelog:

v2.1.0 (10/15/2018)

• Changed: Custom controls, fixed misalignments.
• Changed: Form controls misalignments and height adjustments.
• Added: Support for .text-body and .text-monospace utils.