@fluentify/fluentify

Fluent design system components based framework for Vue.js

Version: 0.2.0 Updated: 09/18/2020

By: FluentifyJs License: MIT

Downloads Last 30 Days: 7

Install

npm i @fluentify/fluentify
yarn add @fluentify/fluentify

Repository: https://github.com/FluentifyJs/fluentify

CDNs

bundle.run: https://bundle.run/@fluentify/fluentify

jsDelivr: https://cdn.jsdelivr.net/npm/@fluentify/fluentify

unpkg: https://unpkg.com/@fluentify/fluentify

fluentify-opengraph

codebeat badge image image image Javascript and css linting CodeQL

View demo

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

  • Container
  • Grid - Rows and Columns using css grid (Room for improvements)
  • Button
  • List
  • List item
  • List item avatar
  • List item content (with support of single line, double line and triple line)
  • Card
  • Video player
  • Menu component
  • Modal / Dialog
  • Date picker
  • Date calendar picker
  • Time picker
  • Color picker
  • Flyout / Snackbar
  • Progressbar linear
  • Progressbar circular
  • Input field
  • Checkbox input
  • Radio input
  • Radio Group
  • Select (Missing arrow icon)
  • File picker
  • Textarea
  • Datalist
  • Divider
  • Data table
  • Image component
  • Switch
  • 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
Categories: Vue js