https://github.com/fluentifyjs/fluentify

A Vue component framework based on Fluent Design System
https://github.com/fluentifyjs/fluentify

components fluent fluent-design fluent-design-system hacktoberfest microsoft vue vue-components vue2 vuejs vuejs2

Last synced: 2 months ago
JSON representation

A Vue component framework based on Fluent Design System

• Host: GitHub
• URL: https://github.com/fluentifyjs/fluentify
• Owner: FluentifyJs
• License: mit
• Created: 2018-12-24T16:15:15.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T09:02:58.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T23:20:13.665Z (2 months ago)
• Topics: components, fluent, fluent-design, fluent-design-system, hacktoberfest, microsoft, vue, vue-components, vue2, vuejs, vuejs2
• Language: JavaScript
• Homepage:
• Size: 6.3 MB
• Stars: 17
• Watchers: 2
• Forks: 1
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
![fluentify-opengraph](https://user-images.githubusercontent.com/4184558/67981054-169c3600-fc20-11e9-83e1-52f695776774.png)

[![codebeat badge](https://codebeat.co/badges/d2cb26e8-55e3-40a7-b4be-bc9811f0cd98)](https://codebeat.co/projects/github-com-fluentifyjs-fluentify-master)

![image](https://img.shields.io/npm/dm/@fluentify/fluentify.svg)

![image](https://img.shields.io/npm/v/@fluentify/fluentify.svg)

![image](https://img.shields.io/npm/l/@fluentify/fluentify.svg)

![Javascript and css linting](https://github.com/FluentifyJs/fluentify/workflows/Javascript%20and%20css%20linting/badge.svg)

![CodeQL](https://github.com/FluentifyJs/fluentify/workflows/CodeQL/badge.svg)

### [View demo](https://fluent.ayw.io/)

## This Components framework is *Work in progress*, please keep that in mind that it's not ready for production yet, feel free to contribute and get it ready faster 

# Todo:

## Components

- [x] Container

- [x] Grid - Rows and Columns using css grid (Room for improvements)

- [x] Button

- [x] List

- [x] List item

- [x] List item avatar

- [x] List item content (with support of single line, double line and triple line)

- [ ] Card

- [ ] Video player

- [x] Menu component

- [ ] Modal / Dialog

- [ ] Date picker

- [ ] Date calendar picker

- [ ] Time picker

- [ ] Color picker

- [ ] Flyout / Snackbar

- [x] Progressbar linear

- [ ] Progressbar circular

- [x] Input field

- [x] Checkbox input

- [x] Radio input

- [x] Radio Group

- [ ] Select (Missing arrow icon)

- [ ] File picker

- [ ] Textarea

- [ ] Datalist

- [ ] Divider

- [ ] Data table

- [ ] Image component

- [ ] Switch

- [x] Slider (horizontal/vertical)

- [ ] Rating

- [ ] Autocomplete / Auto-suggest input

- [ ] Context menu

- [ ] Navigation view (Content of view will be the list component)

- [ ] Command bar

- [ ] Tree view

- [ ] Pivot

- [ ] Icon component

# Classes

- [ ] Typography

- [ ] Colors

- [ ] Padding helper

- [ ] Margin helper

- [ ] Display helper (block, inline, inline-block etc)

- [ ] MDL2 icon font

# Theme

- [ ] Custom colors support

- [ ] Dark theme for all components

# Website

- [ ] Main page

- [ ] Documentation

- [ ] Theme generator

- [ ] Codepen template