- ×
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.
Filed under user interfaceShow AllFramevuerk
Fast, Responsive, Without Dependencies, Both Direction Support and Configurable UI Framework based on Vue.js.
Setup
First of all, you should install Framevuerk and of course Vue from terminal and just follow the example and use it!
npm i vue npm i framevuerk
And put these on your main script: (Also commonjs syntax and require is available.)
// Vue package import Vue from 'vue' // Framevuerk main script import Framevuerk from 'framevuerk/dist/framevuerk.js' // Framevuerk main style // Also you can include this via <link rel="stylesheet"> in your template import 'framevuerk/dist/framevuerk.css' // Activate Vue.use(Framevuerk) // Initializing App new Vue({ el: '#app' })
Finally you need to create your template just like this.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Awesome App</title> <link rel="stylesheet" href="path/to/your/app.css"> </head> <body> <fvMain id="app"> <!-- Your App goes here --> </fvMain> <script src="path/to/your/app.js"></script> </body> </html>
Customize
Framevuerk can have different language, direction, and colors based on the user's taste. To setup your custom version, you should install framevuerk-builder package.
npm i framevuerk-builder -D
And your config or list of configs array in
.json
file. (Also you can deliver same content via.js
file andmodule.exports
format){ "config-name": "foobar", "direction": "ltr", "primary-color": "#41b883", "secondary-color": "#35485d", "danger-color": "#dd4b39", "warning-color": "#ef8f00", "info-color": "#14b0cf", "bg-color": "#fff", "header-bg-color": "#35485d", "sidebar-bg-color": "#3a3a3a", "footer-bg-color": "#3a3a3a", "padding": "1em", "transition-speed": "0.35s", "border-radius": "2px", "shadow-size": "1px" }
Finally you can build framevuerk by this cli command. Don't forgot to put your builder command to your
build
orpostinstall
scripts. Note that use ./node_modules/.bin/framevuerk-builder instead of framevuerk-builder if you run this command manually in terminalframevuerk-builder -d "path/to/framevuerk/source/dir" -o "path/to/receive/builded/files" -c "path/to/config/file" # --dir, -d path to framevuerk source folder. default: "./node_modules/framevuerk" # --output-dir, -o path to output files. default: "./node_modules/framevuerk/dist" # --config, -c path to config file. used default config if not set.
And output files goes to --output-dir directory:
- framevuerk-foobar.js
- framevuerk-foobar.min.js
- framevuerk-foobar.css
- framevuerk-foobar.min.css
You are now config your app to use
Framevuerk
! Let's go to use our components: Full Documention and DemoContributing
Please read CONTRIBUTING.md for details.