[go: up one dir, main page]
Menu ▾ ▴

Tree [92b5e7] 1.1.0 /
 History

HTTPS git://
HTTPS access

File Date Author Commit
 build 2018-02-13 nainemom nainemom [16de68] updated
 docs-src 2018-03-07 nainemom nainemom [9baaa7] resolve #19
 locale 2018-02-21 nainemom nainemom [b85107] clean-up
 src 2018-03-07 nainemom nainemom [9baaa7] resolve #19
 .editorconfig 2017-07-09 nainemom nainemom [6c7b41] add .editorconfig
 .eslintignore 2018-01-27 nainemom nainemom [e3564f] create .eslintignore
 .eslintrc.js 2018-01-27 nainemom nainemom [c22316] create .eslintrc.js
 .framevuerkrc.json 2018-02-03 nainemom nainemom [714507] remove config-name
 .gitignore 2017-12-10 nainemom nainemom [f9c8cf] add package-lock.json and yarn.lock
 .npmignore 2018-01-30 nainemom nainemom [6ce252] add public path
 .postcssrc.js 2018-01-27 nainemom nainemom [307893] create .postcssrc.js
 .stylelintrc.json 2018-01-27 nainemom nainemom [695a60] create .stylelintrc.json
 LICENSE 2018-02-20 nainemom nainemom [4749b7] create license
 README.md 2018-02-20 nainemom nainemom [cd544a] add license badge
 package.json 2018-03-07 nainemom nainemom [92b5e7] version++
 prepublish.sh 2018-02-03 nainemom nainemom [9d0c78] updated

Read Me

Framevuerk

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


Setup

First at all, you should install Framevuerk and of course Vue from terminal.

npm install vue --save
npm install framevuerk --save

You can also install these, just if you want active touch actions support, fvDatepicker jalaali dates supoort and icons.

npm install idate --save
npm install hammerjs --save
npm install font-awesome --save

And just follow the example and use it! (commonjs syntax and require also available)

// Vue package
import Vue from 'vue'

// Framevuerk main js file
import Framevuerk from 'framevuerk/dist/framevuerk.js'

// If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
import 'framevuerk/dist/framevuerk.css'

// IDate package, just if you want support jalaali dates for fvDatepicker
import IDate from 'idate'
Framevuerk.use('date', IDate)

// Hammer package, just if you want active touch actions support
import Hammer from 'hammerjs'
Framevuerk.use('hammer', Hammer)

// Font-Awesome icons, just if you want active icons
// If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
import 'font-awesome/css/font-awesome.css'

// Active Framevuerk...
Vue.use(Framevuerk)

// And finally, Initializing app
const app = new Vue({
  el: "#app"
});"

Finally you need to create your template just like this.

<html>
  <head>
    <link rel="stylesheet" href="path/to/your/app.css"/>
  </head>
  <body>
    <fv-main id="app">
      <!-- Your Content -->
    </fv-main>
    <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, create a file called .framevuerkrc.js in root of your project and put these on:

module.export = {
  // config name
  'config-name': 'foobar',

  // your locale and direction.
  locale: 'en', // or 'fa'
  direction: 'ltr', // or 'rtl'

  // theme colors:
  'primary-color': '#41b883',
  'danger-color': '#dd4b39',
  'warning-color': '#ef8f00',
  'info-color': '#14b0cf',
  'bg-color': '#f9f9f9',

  // base padding size
  padding: '15px',

  // base animation speed
  'transition-speed': '0.35s',

  // base border radius applied to buttons, inputs and etc.
  'border-radius': '4px',

  // base shadow size applied to header, footer, form elements and etc.
  'shadow-size': '3px'
}

And output files goes to ./node_modules/framevuerk/dist directory:

  • framevuerk-foobar.js
  • framevuerk-foobar.css
  • framevuerk-foobar.min.js
  • framevuerk-foobar.min.css

You can also use .framevuerkrc.json, .framevuerkrc or framevuerk key inside your package.json to pass this variables to Framevuerk!

Framevuerk apply these config on before every install or by this cli command:

framevuerk build lib
# or
./node_modules/.bin/framevuerk build lib

You are now config your app to use Framevuerk! Let's go to use our components:
Full Documention and Demo