https://github.com/phillipcurl/mise-en-place

:bento: A collection of lightweight, versatile layout primitives for building Vue.js apps.
https://github.com/phillipcurl/mise-en-place

css css-flexbox css-grid layout layout-primitives vue vue-components vuejs

Last synced: about 4 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/phillipcurl/mise-en-place
• Owner: phillipcurl
• License: mit
• Created: 2019-11-13T13:17:32.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-29T08:25:27.000Z (about 2 months ago)
• Last Synced: 2024-10-13T21:29:49.297Z (about 1 month ago)
• Topics: css, css-flexbox, css-grid, layout, layout-primitives, vue, vue-components, vuejs
• Language: Vue
• Homepage: https://phillipcurl.github.io/mise-en-place
• Size: 913 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mise-en-place







  

  

  

  



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

[![Edit mise-en-place-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mise-en-place-demo-72l3z?fontsize=14&hidenavigation=1&theme=dark&view=preview)

## Usage

### Directly in the browser

Drop the library in with a `` tag alongside Vue to globally install all components:

```html

<div id="app">

  <layout>...</layout>

</div>

<script src="https://unpkg.com/vue">

  new Vue({ el: "#app" });

```

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

```html



  



  new Vue({ el: "#app" });

```

### In a module system

Install the library with NPM:

```bash

npm install mise-en-place

```

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

```js

import MiseEnPlace from "mise-en-place";

Vue.use(MiseEnPlace);

```

Or, import components individually for local registration:

```js

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