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: about 2 months ago
JSON representation

Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

Lists

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.