Shards - 一个基于Bootstrap 4的免费现代UI工具包(Shards — A Free & Modern UI Kit based on Bootstrap 4)

Shards - 一个基于Bootstrap 4的免费现代UI工具包(Shards — A Free & Modern UI Kit based on Bootstrap 4)插图

Shards - 一个基于Bootstrap 4的免费现代UI工具包(Shards — A Free & Modern UI Kit based on Bootstrap 4)插图1

-中文-

Shards是一个基于Bootstrap 4的现代设计系统,包含了10个额外的自定义组件和两个预建的登陆页面。它也是轻量级的,其样式表的重量只有~12kb,并经过了压缩处理。
颜色
 
我们加强了Bootstrap的语义颜色选择,使其具有更明亮的颜色变化,以提高对比度和可及性。
排版学
 
Shards使用Poppins作为其主要字体,用于标题和系统的UI字体,其余内容则使用Roboto优先的后备字体(仅在非苹果设备上)。
图标包
 
Shards默认支持Material和FontAwesome套件。图标可以放置在几乎任何元素中,而不需要修改套件。
 
- 超过900多个图标
 
-超过600多个图标
表格控制
 
所有的表单控件都改进了微转换和阴影,带来了深度,改善了整个用户体验。
自定义控制
 
默认的自定义表单字段得到了改进和扩展。其中一个新增加的功能是切换开关控制。
表格验证
 
表格验证也得到了改进,以配合新的整体表格感觉,同时遵循相同的交互原则以保持一致性。
滑块控制
 
滑块也是一个新的自定义控件,几乎可以用最小的标记(一个元素)和通过JavaScript扩展的自定义选项集成到任何地方。
卡片
 
我们希望卡牌能在不改变其原始结构的情况下脱颖而出并带来深度。所有这一切,同时允许它们与其他组件很好地配合使用。
钮扣
 
Shards中引入了两个新的按钮修改器,允许你创建丸状和方形的按钮,用于填充和勾勒的变化,以扩大可能的组合范围。
导航栏
 
使用你已经知道并喜爱的Bootstrap 4标记结构,创建美丽、大胆和响应式的导航条。
锦上添花
 
这还不是全部!我们准备了两个免费的着陆页,主要使用Shards和一些自定义的造型来帮助你以后开始你的下一个项目。
主要特点
 
包含2个预建的登陆页面和11个自定义组件。
SCSS和Sketch文件都包括在内,所以你可以动手实验一下。
与Material和Font Awesome图标包都兼容。
很小,其CSS的重量约为12kb,经过压缩和gzipped。
响应性的设计。
有据可查。
它是免费的!
 
你还在等什么呢?来吧,建造一些东西!迫不及待地想看到你想出的东西!如果你喜欢碎片,请确保你点击关注按钮,也与你的朋友分享它
特别感谢Catalin Nick(https://dribbble.com/hisk)的设计和工作。
 
您的反馈和意见对我们来说非常重要如果您有任何问题、担忧或建议--请不要犹豫,在我们的社交媒体页面上联系我们,我们会尽快回答。
 

 

谢谢你,祝你设计愉快!
 
EpicPxls <3

-英文-

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.

Thank you and enjoy designing!

EpicPxls <3

发表评论

后才能评论