Skip to content
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.
Vue JavaScript CSS Other
Branch: next
Clone or download

Latest commit

Latest commit bacf281 May 26, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build update code style May 12, 2020
docs-src add Switch component May 17, 2020
src fix common attrs issue May 26, 2020
static create statuc dir Jan 6, 2020
.editorconfig add .editorconfig Jul 9, 2017
.eslintignore add static dir Jan 6, 2020
.eslintrc.js disable max-len May 11, 2020
.gitignore remove package-lock from list Nov 9, 2018
.npmignore add public path Jan 30, 2018
.stylelintrc.json
CHANGELOG.md
CONTRIBUTING.md updated Nov 10, 2018
LICENSE create license Feb 20, 2018
README.md update logo source Nov 11, 2018
TODO.md update todolist Nov 20, 2018
package-lock.json 3.0.0-beta29 May 26, 2020
package.json 3.0.0-beta29 May 26, 2020
prepublish.sh update prepublish tasks Nov 10, 2018

README.md

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!

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 and module.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 or postinstall scripts. Note that use ./node_modules/.bin/framevuerk-builder instead of framevuerk-builder if you run this command manually in 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

Contributing

Please read CONTRIBUTING.md for details.

You can’t perform that action at this time.