Shards — A Free & Modern UI Kit based on Bootstrap 4

Shards is a modern design system board on Bootstrap 4 that comes packed with 10 extra custom components and two pre-building landing pages. It's also lightweight with its stylesheet weighting only ~12kb minified and gzipped.

Colors
We've enhanced Bootstrap's semantic color selection with brighter color variations in order to improve the contrast and accessibility.

Typography
Shards uses Poppins as its primary typefaces for headings and the system's UI font with a Roboto-first fallback (only on non-Apple devices) for the remaining content.

Icon Packs
Shards supports by default both Material and FontAwesome packs. Icons can be placed in almost any element without the need of modifying the kit.
• Over 900+ Icons
•Over 600+ Icons

Form Controls
All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user experience.

Custom Controls
The default custom form fields are improved and extended. One of the new additions being the toggle switch control.

Form Validations
Form validations is also improved to match the new overall form feel, while following the same interaction principles for consistency.

Slider Controls
Sliders are also a new custom control and can be integrated almost anywhere with minimal markup (a single element) and extended customisation options via JavaScript.

Cards
We wanted cards to stand out and bring depth without changing their original structure. All of this while allowing them to play well with other components.

Buttons
Two new buttons modifiers are introduced in Shards that allows you to create pill-shaped and squared buttons for both filled and outlined variations for an extended range of possible combinations.

Navbars
Create beautiful, bold and responsive navbars using the same Bootstrap 4 markup structure you already know and love.

Extras
That's not all! We've prepared two free landing pages built using mostly Shards and some custom styling to help you start your next project later.

🔑 Key features

• Packed with 2 pre-built landing pages and 11 custom components.
• Both SCSS and Sketch files are included so you can get your hands dirty and experiment with it.
• Compatible with both Material and Font Awesome icon packs.
• Tiny, with its CSS weighing ~12 kb minified and gzipped.
• Responsive by design.
• Well documented.
• It's free!

What are you waiting for? Go ahead and build something! Can't wait to see what you come up with! If you like Shards, make sure you click the follow button and share it with your friends too!

Special thanks to Catalin Nick (https://dribbble.com/hisk) for designing and working for this.

Your feedback and opinions are very important to us! Should you have a question, concern or suggestion - don't hesitate to reach us out on our social media pages and we'll answer as soon as we can.

• Facebook - https://facebook.com/epiccoders.co/
• Twitter - https://twitter.com/CoEpic
• Instagram - https://www.instagram.com/epicpxls/

You may also email us at contact@epicpxls.com

Thank you and enjoy designing!
EpicPxls <3