https://github.com/johndatserakis/vue-mock-layout
💻 Easily mock the layout of your Vue apps.
https://github.com/johndatserakis/vue-mock-layout
layout mock template vue
Last synced: 17 days ago
JSON representation
💻 Easily mock the layout of your Vue apps.
- Host: GitHub
- URL: https://github.com/johndatserakis/vue-mock-layout
- Owner: johndatserakis
- License: mit
- Created: 2019-03-18T13:29:20.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2019-03-28T20:54:05.000Z (about 6 years ago)
- Last Synced: 2024-05-29T11:20:43.841Z (11 months ago)
- Topics: layout, mock, template, vue
- Language: Vue
- Homepage: https://johndatserakis.github.io/vue-mock-layout
- Size: 407 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-mock-layout
Easily mock the layout of your Vue apps.
### Links
[View demo](https://promosis.github.io/vue-mock-layout/)
[View on npm](https://www.npmjs.com/package/vue-mock-layout)
[View on GitHub](https://github.com/promosis/vue-mock-layout)
### Install
```
# npm
npm i vue-mock-layout
#yarn
yarn add vue-mock-layout
```
Or you can include it through the browser at the bottom of your page along with the css:
```html
```
### About
When laying out the skeleton of a new site we found a need for an easy way to visualize different sections before they were worked on.
With `vue-mock-layout` you can quickly mock sections by customizing a few different options - for instance you can change the height of a mocked section. Changing the hight helps make the mockups more realistic because some sections are naturally a lot larger than others and that should be taken into account during the early stages. Other options include color, font-size, and text (plus more) - see the usage example below or see the code in the `./example` folder to get started.
### Usage Example
```html
@import '/path/to/node_modules/vue-mock-layout.css';
import 'vue-mock-layout/dist/vue-mock-layout.css'
import VueMockLayout from 'vue-mock-layout'
Vue.component('vue-mock-layout', VueMockLayout)
```
```html
```
Note - all props are optional. If you don't set any props then it will output a simple template section.
### Props
| prop | type | required | default | description |
|----------------|---------|----------|-----------------|-------------------------------------|
| mobileBreakpoint | Number | no | 992 | Width at which the mobile options are used |
| desktopHeight | Number | no | 200 | Height of the sections for desktops |
| mobileHeight | Number | no | 100 | Height of the sections for mobile |
| background | String | no | '#128AB2' | Background color |
| textColor | String | no | '#fff' | Text color |
| text | String | no | 'section' | Text to show in the section |
| fontSize | String | no | '2rem' | Text size |
### SASS Structure
```sass
.vue-mock-layout {
&__text {
}
}
```
### Browser Example
[See on CodePen](https://codepen.io/johndatserakis/pen/eXLYPG)
### Development
``` bash
# install dependencies
npm install
# serve with hot reload
npm run watch
# run the tests
npm run test
# build demo page
npm run build:example
# build
npm run build
```
### Other
Go ahead and fork the project! Submit an issue if needed. Have fun!
### License
[MIT](http://opensource.org/licenses/MIT)
Packaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup).