Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/framevuerk/framevuerk
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.
https://github.com/framevuerk/framevuerk
configurable framework javascript js ltr multi-language multilanguage responsive rtl toolkit ui ux vue
Last synced: 3 months ago
JSON representation
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.
- Host: GitHub
- URL: https://github.com/framevuerk/framevuerk
- Owner: framevuerk
- License: mit
- Created: 2017-03-08T12:52:31.000Z (over 7 years ago)
- Default Branch: next
- Last Pushed: 2022-12-10T16:09:39.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T01:42:25.615Z (7 months ago)
- Topics: configurable, framework, javascript, js, ltr, multi-language, multilanguage, responsive, rtl, toolkit, ui, ux, vue
- Language: Vue
- Homepage: http://framevuerk.com/
- Size: 7.82 MB
- Stars: 266
- Watchers: 6
- Forks: 18
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Framevuerk
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!
```terminal
npm i vue
npm i framevuerk
```
And put these on your main script: (Also commonjs syntax and require is available.)
```javascript
// 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 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.
```html
My Awesome App
```
## 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.
```terminal
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 and `module.exports` format)
```json
{
"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` or `postinstall` scripts. Note that use **./node_modules/.bin/framevuerk-builder** instead of **framevuerk-builder** if you run this command manually in terminal
```terminal
framevuerk-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 Demo](http://framevuerk.com)
## Contributing
Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details.