├── .gitignore ├── plugins ├── vue-scrollactive.js ├── vue-in-viewport-directive.js └── vue-headroom.js ├── css ├── animate.scss └── spacing.scss ├── package.json ├── CHANGELOG.md ├── LICENSE ├── yarn.lock ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_STORE -------------------------------------------------------------------------------- /plugins/vue-scrollactive.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Scrollactive from 'vue-scrollactive' 3 | 4 | Vue.use(Scrollactive) 5 | -------------------------------------------------------------------------------- /plugins/vue-in-viewport-directive.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import inViewportDirective from 'vue-in-viewport-directive' 3 | 4 | Vue.directive('in-viewport', inViewportDirective) 5 | -------------------------------------------------------------------------------- /plugins/vue-headroom.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Headroom from 'headroom.js' 3 | 4 | Vue.directive('headroom', { 5 | inserted: function (el) { 6 | new Headroom(el).init() 7 | } 8 | }) 9 | -------------------------------------------------------------------------------- /css/animate.scss: -------------------------------------------------------------------------------- 1 | :not(.in-viewport).inview, 2 | :not(.in-viewport)>.inview1, 3 | :not(.in-viewport)>*>.inview2, 4 | :not(.in-viewport)>*>*>.inview3, 5 | :not(.in-viewport)>*>*>*>.inview4 { 6 | visibility: hidden; 7 | animation-name: none; 8 | } 9 | 10 | @for $s from 0 through 4 { 11 | .delay-#{$s} { 12 | animation-delay: 1s * $s; 13 | } 14 | @for $ms from 1 through 10 { 15 | .delay-#{$s}-#{$ms} { 16 | animation-delay: 0.1s * ($s * 10 + $ms); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xui-module", 3 | "version": "0.1.5", 4 | "license": "MIT", 5 | "contributors": [ 6 | { 7 | "name": "Meta " 8 | } 9 | ], 10 | "main": "index.js", 11 | "repository": "https://github.com/MetaCorp/xui-module", 12 | "publishConfig": { 13 | "access": "public" 14 | }, 15 | "dependencies": { 16 | "animate.css": "^3.5.2", 17 | "bulma": "^0.5.3", 18 | "headroom.js": "^0.9.4", 19 | "hover.css": "^2.2.1", 20 | "mdi": "^2.0.46", 21 | "vue-in-viewport-directive": "^1.1.4", 22 | "vue-scrollactive": "^0.4.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | 6 | ## [0.0.5](https://github.com/compare/v0.0.4...v0.0.5) (2017-10-08) 7 | 8 | 9 | 10 | 11 | ## [0.0.4](https://github.com/compare/v0.0.3...v0.0.4) (2017-10-08) 12 | 13 | 14 | 15 | 16 | ## [0.0.3](https://github.com/compare/v0.0.2...v0.0.3) (2017-10-08) 17 | 18 | 19 | 20 | 21 | ## [0.0.2](https://github.com/compare/v0.0.1...v0.0.2) (2017-10-08) 22 | 23 | 24 | 25 | 26 | ## 0.0.1 (2017-10-08) 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Meta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/spacing.scss: -------------------------------------------------------------------------------- 1 | $sizeUnit: rem; 2 | $marginKey: 'm'; 3 | $paddingKey: 'p'; 4 | $separator: '-'; 5 | $sizes: ( 6 | ('none', 0), 7 | ('xxs', 0.125), 8 | ('xs', 0.25), 9 | ('sm', 0.5), 10 | ('md', 1), 11 | ('lg', 2), 12 | ('xl', 4), 13 | ('xxl', 8), 14 | ); 15 | $positions: ( 16 | ('t', 'top'), 17 | ('r', 'right'), 18 | ('b', 'bottom'), 19 | ('l', 'left') 20 | ); 21 | 22 | @function sizeValue($key, $value) { 23 | @return if($key == 'none', 0, $value + $sizeUnit); 24 | } 25 | 26 | @each $size in $sizes { 27 | $sizeKey: nth($size, 1); 28 | $sizeValue: nth($size, 2); 29 | .#{$marginKey}#{$separator}#{$sizeKey} { 30 | margin-left: sizeValue($sizeKey, $sizeValue); 31 | } 32 | .#{$paddingKey}#{$separator}#{$sizeKey} { 33 | padding: sizeValue($sizeKey, $sizeValue); 34 | } 35 | @each $position in $positions { 36 | $posKey: nth($position, 1); 37 | $posValue: nth($position, 2); 38 | .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} { 39 | margin-#{$posValue}: sizeValue($sizeKey, $sizeValue); 40 | } 41 | .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} { 42 | padding-#{$posValue}: sizeValue($sizeKey, $sizeValue); 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | animate.css@^3.5.2: 6 | version "3.5.2" 7 | resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-3.5.2.tgz#91e668dc069a808e5e499514867b97aae0166c36" 8 | 9 | bezier-easing@^2.0.3: 10 | version "2.0.3" 11 | resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.0.3.tgz#cb493fddb7f8920ecca00973344ce0518885f17e" 12 | 13 | bulma@^0.5.3: 14 | version "0.5.3" 15 | resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.5.3.tgz#be93afb6246192505c30df3f9c1c29a97d319a13" 16 | 17 | headroom.js@^0.9.4: 18 | version "0.9.4" 19 | resolved "https://registry.yarnpkg.com/headroom.js/-/headroom.js-0.9.4.tgz#0c4e6b4563bb69df55aecdefaba3227566f2df5a" 20 | 21 | hover.css@^2.2.1: 22 | version "2.2.1" 23 | resolved "https://registry.yarnpkg.com/hover.css/-/hover.css-2.2.1.tgz#11d81525f7a8fa33b564fc322c07b454b6bc51a0" 24 | 25 | mdi@^2.0.46: 26 | version "2.0.46" 27 | resolved "https://registry.yarnpkg.com/mdi/-/mdi-2.0.46.tgz#65e07a7c622eda06e871cd6a336c60db8393e27a" 28 | 29 | scrollmonitor@^1.1.3: 30 | version "1.2.3" 31 | resolved "https://registry.yarnpkg.com/scrollmonitor/-/scrollmonitor-1.2.3.tgz#87bf912ca28da64796f529e8129fa4a9b106fb74" 32 | 33 | vue-in-viewport-directive@^1.1.4: 34 | version "1.1.4" 35 | resolved "https://registry.yarnpkg.com/vue-in-viewport-directive/-/vue-in-viewport-directive-1.1.4.tgz#7389242c0fe15a1c755c6d929b2cf65acef98501" 36 | dependencies: 37 | scrollmonitor "^1.1.3" 38 | 39 | vue-scrollactive@^0.4.5: 40 | version "0.4.5" 41 | resolved "https://registry.yarnpkg.com/vue-scrollactive/-/vue-scrollactive-0.4.5.tgz#2b0db1daf0bd3432fa4de75ac8fd6c182cf0a0f3" 42 | dependencies: 43 | bezier-easing "^2.0.3" 44 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | const defaultOptions = { 4 | 'bulma': { 5 | active: true 6 | }, 7 | 'mdi': { 8 | active: true 9 | }, 10 | 'animate.css': { 11 | active: true 12 | }, 13 | 'hover.css': { 14 | active: true 15 | }, 16 | 'animate': { 17 | active: true 18 | }, 19 | 'spacing': { 20 | active: true 21 | }, 22 | 'vue-in-viewport-directive': { 23 | active: true 24 | }, 25 | 'vue-scrollactive': { 26 | active: true 27 | }, 28 | 'vue-headroom': { 29 | active: true 30 | }, 31 | } 32 | 33 | module.exports = function xui (moduleOptions) { 34 | const options = Object.assign(defaultOptions, moduleOptions) 35 | 36 | options['bulma'].active && this.options.css.push('bulma') 37 | options['mdi'].active && this.options.css.push('mdi/css/materialdesignicons.min.css') 38 | options['animate.css'].active && this.options.css.push('animate.css/animate.min.css') 39 | options['hover.css'].active && this.options.css.push('hover.css/css/hover-min.css') 40 | options['animate'].active && this.options.css.push('xui-module/css/animate.scss') 41 | options['spacing'].active && this.options.css.push('xui-module/css/spacing.scss') 42 | 43 | options['vue-in-viewport-directive'].active && this.addPlugin({ 44 | src: resolve(__dirname, './plugins/vue-in-viewport-directive.js'), 45 | options: options['vue-in-viewport-directive'].options 46 | }) 47 | 48 | options['vue-scrollactive'].active && this.addPlugin({ 49 | src: resolve(__dirname, './plugins/vue-scrollactive.js'), 50 | options: options['vue-scrollactive'].options 51 | }) 52 | 53 | options['vue-headroom'].active && this.addPlugin({ 54 | src: resolve(__dirname, './plugins/vue-headroom.js'), 55 | options: options['vue-headroom'].options, 56 | ssr: false 57 | }) 58 | } 59 | 60 | module.exports.meta = require('./package.json') 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # xui-module 2 | [![npm (scoped with tag)](https://img.shields.io/npm/v/xui-module/latest.svg?style=flat-square)](https://npmjs.com/package/xui-module) 3 | [![npm](https://img.shields.io/npm/dt/xui-module.svg?style=flat-square)](https://npmjs.com/package/xui-module) 4 | [![CircleCI](https://img.shields.io/circleci/project/github/.svg?style=flat-square)](https://circleci.com/gh/) 5 | [![Codecov](https://img.shields.io/codecov/c/github/.svg?style=flat-square)](https://codecov.io/gh/) 6 | [![Dependencies](https://david-dm.org//status.svg?style=flat-square)](https://david-dm.org/) 7 | 8 | 9 | [![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com) 10 | 11 | > Light module to help design websites with Nuxt. [demo](https://hidden-earth-46741.herokuapp.com/) [source](https://github.com/MetaCorp/nuxt-xui) 12 | 13 | 14 | [📖 **Release Notes**](./CHANGELOG.md) 15 | 16 | ## Features 17 | 18 | This module install several libraries to make designing a website with Vue and Nuxt easy, including: 19 | 20 | + [Bulma](https://github.com/jgthms/bulma) ([website](http://bulma.io/)) 21 | + [Animate.css](https://github.com/daneden/animate.css/) ([website](https://daneden.github.io/animate.css/)) 22 | + [Hover.css](https://github.com/IanLunn/Hover) ([website](http://ianlunn.github.io/Hover/)) 23 | + [Material Design Icons](https://github.com/google/material-design-icons) ([website](https://material.io/icons/)) 24 | + [Headroom.js](https://github.com/WickyNilliams/headroom.js/) ([website](http://wicky.nillia.ms/headroom.js/)) ([playground](http://wicky.nillia.ms/headroom.js/playroom/)) 25 | + [Vue-scrollactive](https://github.com/eddiemf/vue-scrollactive) ([demo](https://eddiemf.github.io/vue-scrollactive/examples/example-1.html)) 26 | + [Vue-in-viewport-directive](https://github.com/BKWLD/vue-in-viewport-directive) 27 | 28 | ## Setup 29 | - Add `xui-module` dependency using yarn or npm to your project 30 | 31 | ```sh 32 | yarn add xui-module 33 | ``` 34 | or 35 | ```sh 36 | npm install xui-module --save 37 | ``` 38 | 39 | - Add `xui-module` to `modules` section of `nuxt.config.js` 40 | 41 | ```js 42 | { 43 | modules: [ 44 | // Simple usage 45 | 'xui-module', 46 | 47 | // With options 48 | ['xui-module', { /* module options */ }], 49 | ] 50 | } 51 | ``` 52 | 53 | - If needed, add sass-loader 54 | 55 | ```sh 56 | yarn add sass-loader node-sass 57 | ``` 58 | or 59 | ```sh 60 | npm install sass-loader node-sass --save-dev 61 | ``` 62 | 63 | 64 | ## Module Options 65 | 66 | You can parametrize Xui-module with these variables: 67 | 68 | - 'bulma' 69 | - 'mdi' 70 | - 'animate.css' 71 | - 'hover.css' 72 | - 'animate' 73 | - 'spacing' 74 | - 'vue-in-viewport-directive' 75 | - 'vue-scrollactive' 76 | - 'vue-headroom' 77 | 78 | example: 79 | 80 | ```js 81 | { 82 | 'bulma': { 83 | options: { /* bulma options */ } 84 | }, 85 | 'mdi': { 86 | active: false // Do not load Material Design Icons 87 | }, 88 | 'vue-scrollactive': { 89 | ssr: false // Turn off ssr for vue-scrollactive 90 | } 91 | } 92 | ``` 93 | 94 | ## License 95 | 96 | [MIT License](./LICENSE) 97 | 98 | Copyright (c) Meta --------------------------------------------------------------------------------