UI Design Philosophies
Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.
Fluent for Web
Microsoft's Fluent UI Web Components are designed to help you build Fluent web apps using extensible Web Components. he package composes the @microsoft/fast-foundation Web Component package and styles it with the Fluent design language.
With Fluent UI Web Components you can:
- Build a modern, standards-based, highly performant, highly accessible web front-end
- Build a web front end using only web platform code, no other frameworks, or
- Integrate with many popular frameworks like .NET, Blazor, Vue, React, etc.
- Build a web-standards UX built with W3C Web Component standards
- Leverage the existing Fluent UI design language as design tokens
- Customize the design language for your project by modifying and creating new design tokens
- Use the components out-of-the-box to build your web user experience or
- Customize, compose and build new Web Components based on the libraries that Fluent UI Web Components is built on, FAST
- Be part of a dynamic, open-web development community
Fluent for Windows
WinUI is a user interface layer that contains native controls and styles for building Windows apps. It embodies Fluent Design, giving each Windows app the polished feel that customers expect.
Fluent UI React Native
Fluent for iOS
Uses Fluent UI Apple which offers customizations and custom controls that deliver unique Fluent experiences to customers using iOS devices.
Fluent UI iOS includes an expanding library of controls written in Swift and supporting Objective-C. These controls implement the Fluent Design language and provide consistency across Microsoft experiences.
Fluent for Android
Uses Fluent UI Android which offers customizations and custom controls that deliver unique Fluent experiences to customers using Android devices.
Controls for Android
Fluent UI Android includes an expanding library of controls written in Kotlin. These controls implement the Fluent design language and bring consistency across Microsoft app experiences.
Fluent for macOS
Uses Fluent UI Apple which offers customizations and custom controls that deliver unique Fluent experiences to customers using macOS devices.
Controls for macOS
Fluent UI macOS includes an expanding library of controls written in Swift and supporting Objective-C. These controls implement the Fluent Design language and provide consistency across Microsoft experiences.
Fluent for cross-platform
FluentUI React Native is still in the alpha stages of development for both the components and the repo.i.e. | Windows | macOS | iOS | Android | |---------------------|---------------------|---------------------|-------------| | Alpha (in progress) | Alpha (in progress) | Alpha (in progress) | Coming Soon |
- Sass variables and mixins
- responsive grid system
- extensive prebuilt components
Bootstrap can be implemented with Angular, flutter
The angular way
Angular widgets built from the ground up using only Bootstrap 5 CSS with APIs designed for the Angular ecosystem.
The only dependencies are Angular, Bootstrap 5 CSS and Popper
// Installation for Angular CLI ng add @ng-bootstrap/ng-bootstrap
- Enterprise-class UI designed for web applications.
- A set of high-quality React components out of the box.
- Written in TypeScript with predictable static types.
- Whole package of design resources and development tools.
- Internationalization support for dozens of languages.
- Powerful theme customization in every detail.
- Modern browsers and Internet Explorer 11 (with polyfills)
- Server-side Rendering
React is used to encapsulate a library of components which embody our design language. We welcome the community to implement our design system in other front-end frameworks of their choice.
- Ant Design of React (official implementation)
- NG-ZORRO - Ant Design of Angular
- NG-ZORRO-MOBILE - Ant Design Mobile of Angular
- Ant Design of Vue
- Ant Design Blazor
- San UI Toolkit for Ant Design
- antizer (ClojureScript)
Frequency of change
- Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
- Monthly release: minor version at the end of every month for new features.
- Major version release is not included in this schedule for breaking change and new features.
- Adaptable system of components supporting best practices of UI design.
- Open-source code.
- Material streamlines collaboration btwn designers & developers.
Material is a design system created by Google to help teams build high-quality digital experiences for:
- the web
- Material Web Components: MDC Web integration for Web Components (using vanilla components)
- Material Components for React: MDC Web integration for React (using foundations/adapters). Please note that this project is no longer under active development.
Additional third-party integrations
- Preact Material Components
- RMWC: React Material Web Components (using foundations/adapters.)
- Angular MDC
- Blox Material: Angular Integration Library.
- Vue MDC Adapter: MDC Web Integration for Vue.js (using foundations/adapters.)
- Material Components Vue: MDC Web Integration for Vue.js (using vanilla components)
- BalmUI: Next Generation Material UI for Vue.js
- Ember Material Components: MDC Web integration for Ember (using vanilla components)
- MatBlazor: Material Design components for Blazor
- Svelte Material UI: A library of Svelte 3 - - Material UI components.
The last major update was may 2021
- MDC Web on other frameworks
- Introduction into material design
- Material design
- Ant Design of React
- Introduction into Ant Design
- Bootstrap widgets The angular way
- Get started with Bootstrap
- Bootstrap into Dart
- Bootstrap Versioning
- Ant Design Versioning
- Material design versioning
- Fluent Design System
- Fluent for web
- Fluent UI Web
- Fluent for iOS
- Fluent for Android
- Fluent for macOS
- Fluent for crossplatforms
- FluentUI React Native