在开始实作画面之前，我们先来了解一下常见的 UI Framework，并了解他们的设计方式，以便後续做设计上的 sass 结构参考吧！

常见的 UI Framework

透过开源使用的 UI Framework ，让我们可以快速生成页面样式而不用从头手刻，针对需要客制的地方修改即可。现今已经有搭配各种 js 而生成的 Framework ，使用起来相当方便，以下就带大家看看常见的那些吧。

Boostrap

最基本搭配 html 的，大家耳熟能详的那位应该就是 Bootstrap 了吧！使用方法也很简单 npm , yarn 引入即可。

可以看到他的结构，是用大量的 Partial 组装，让每个物件有独立的 scss ，之後在 boostrap.scss 中引入所有元件 style。

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
// ... 以下略：Ｄ

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

React - UI Framework

Material UI

这个算是 Android 最常见的 Material Design 衍生的 ui framework，其见面设计几乎就跟一般 Android 手机的样式一样，可搭配使用的元件也很多，社群讨论度也十分热络，是个蛮常被使用的系列之一。

MUI: The React component library you always wanted

Ant Design

中国设计的 Framework ，整体设计感觉起来年轻有活力，配色也很活泼，比较特别的是他的 grid 系统切分成24格，可以针对更细微的 column 去做设定。

Ant Design - The world's second most popular React UI framework

Vue - UI Framework

Vuetify

Vue 系列最常见的应该就是他，也是基於 Material Design Framework 下的设计，同样也提供的很多元件以供你快速实作技能。

Vuetify - A Material Design Framework for Vue.js

Element +

同样拥有大量的元件可以使用，也是十分方便的 UI Framework，是搭配 Typescript 做开发，比较特别的是有预设做国际化的设计优化，如果是做多国语言会十分方便，不用再额外引入 i18n 自己处理。

Element Plus - The world's most popular Vue 3 UI framework

Angular - UI Framework

Angular Material

一样就是每个阵营都会有的 Material Design components 哈哈，这应该也不用多做介绍了吧！基本的元件一样也都十分足够。

Angular Material

Angular UI

比较意外的是，Angular 系列的 UI Component 好像少很多？资源不比其他两位丰富 是太难吗？ 但是却有一个是独立拉出各个 component 组合的 Angular UI ，而 github 上的内容也是针对各元件有相应 repo 可以去做参考。

AngularUI

以上，介绍完了，阿哩嘎多～～明天来刻刻啦！

除此之外，也欢迎大家走走逛逛关於我们团队夥伴的文章

lu23770127 - SASS 基础初学三十天

10u1 - 糟了！是世界奇观！

juck30808 - Python - 数位行销分析与 Youtube API 教学

HLD - 浅谈物件导向与Design Pattern介绍

SiQing47 - 前端？後端？你早晚都要全端的，何不从现在开始？