Skip to content

🍱 A collection of lightweight, versatile layout primitives for building Vue.js apps.

License

Notifications You must be signed in to change notification settings

phillipcurl/mise-en-place

Repository files navigation

mise-en-place

Version Version License

A collection of layout primitives for building Vue.js apps.

Edit mise-en-place-demo

Usage

Directly in the browser

Drop the library in with a <script> tag alongside Vue to globally install all components:

<div id="app">
  <layout>...</layout>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/mise-en-place"></script>
<script>
  new Vue({ el: "#app" });
</script>

Or, if you only want to use a small subset of components, drop them in individually:

<div id="app">
  <layout></layout>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/mise-en-place/Layout"></script>
<script>
  new Vue({ el: "#app" });
</script>

In a module system

Install the library with NPM:

npm install mise-en-place

Then register the library as a plugin to globally install all components:

import MiseEnPlace from "mise-en-place";

Vue.use(MiseEnPlace);

Or, import components individually for local registration:

import { Layout } from "mise-en-place";

export default {
  components: { Layout }
};

TODO

  • icon
  • button
  • link
  • icon-button
  • icon-link
  • columns
  • column
  • fix grid
  • grid-area (for named grid areas)
  • divider