Developers Who Are in the Know Are Touting Shards

From a web designer's standpoint, you can never have enough good UI toolkits in your arsenal. If you're looking for something a little different - something that will get you noticed, you should check out Shards.

Based on Bootstrap 4, Shards was created by designrevision and is a free library for creating modern-looking UIs. It has the following features:

1. Lightweight Code: only 12 KB minified and gzipped
2. Responsive Design: adapts to any device
3. Color Enhancement: builds upon Bootstrap's semantic color selection for better contrast and accessibility
4. High-Quality Typography: uses Poppins for headings
5. Fully Documented: no need to guess how to use a component
6. Modern Design System
7. Extra Components (x10) and Unique Custom Landing Pages (x2)
8. Icon Packs Support: works with both Material and Font Awesome packs
9. Full Source Code

Here are some of the UI elements you can create with Shards:

* Simple Forms * Icon-Styled Controls * Custom Controls (Checkboxes, Radio Buttons, Toggles, Dropdowns, File Input) * Validation Controls * Sliders * Date Pickers * Cards * Buttons (Normal, Squared, Pill-Shaped) * Progress Bars * Modal Controls * Badges * Tooltips and Popovers * Alerts * Navbars

How To Install

After downloading Shards, to use it unzip the archive and upload shards.min.css to your website and include it in the head section of your html file. Make sure you do this after including the Bootstrap stylesheet. Also, if use any of the Shards custom controls, you must include a reference to the Shards JavaScript file before the closing body tag.

In addition to Bootstrap, Shards is dependent on JQuery for custom components, and some Bootstrap components will require popper.js.

If you find any of this confusing, don't worry: Shards has a starter html template on their website that will guide you on how to reference all necessary dependencies.

Without question, Shards is a UI toolkit that all web designers should try. Its potential is unlimited.