typographist-vue-devtools v3.2.1
Typographist vue devtools
Typographist vue devtools is part of the Typographist ecosystem. It is necessary to develop and debug web apps on vue with the help of vertical rhythm.
Installation
User yarn or npm
yarn add typographist-vue-devtools -D
npm i typographist-static-devtools -D
Connect Typographist-vue-devtools
Js
requireJs
const Typographist = require('typographist-vue-devtools');
es6 modules
import Typographist from 'typographist-vue-devtools';
How to use?
<template>
<div id="app">
<Typographist>
<TSwitch/>
<TDebugger>
<!-- your components -->
</TDebugger>
</Typographist>
</div>
</template>
<script>
import { Typographist, TSwitch, TDebugger } from 'typographist-vue-devtools';
export default {
name: 'app',
components: {
Typographist,
TSwitch,
TDebugger,
},
};
</script>
<style lang="scss">
@import '~typographist-vue-devtools/devtools.css';
</style>
TSwitch component
Change zIndex
<template>
<div id="app">
<Typographist>
<TSwitch :zIndex="3000"/>
<TDebugger>
<!-- your components -->
</TDebugger>
</Typographist>
</div>
</template>
Without TSwitch
<template>
<div id="app">
<Typographist>
<TDebugger>
<!-- your components -->
</TDebugger>
</Typographist>
</div>
</template>
Fluid rhythm
/* If your use */
:root {
@root (fluid);
}
Switch the rhythm to fluid.
<template>
<div id="app">
<Typographist root="fluid">
<TSwitch/>
<TDebugger>
<!-- your components -->
</TDebugger>
</Typographist>
</div>
</template>
Keyboard shortcuts
If you do not feel comfortable switching the rhythm step by step by pressing the button, you can use keyboard shortcuts
command | keys |
---|---|
show single rhythm | s + r |
show double rhythm | d + r |
hide rhythm | o + r |
Thanks
Special thanks to Dimensi
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago