npm package: @parcz/neon
Description: This template should help get you started developing with Vue 3 in Vite. You need to have node installed, we recommend to use v16.20.2 +.
Latest version: 0.0.7

# neon

This template should help get you started developing with Vue 3 in Vite. You need to have node installed, we recommend to use v16.20.2 +.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

At this point we haven't looked into extensions for other editors.

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

## Implement

### Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

### Using with build step

1. Open a Terminal/Command line, select one "create vite" commands from the list below and copy paste, <br>for instance `npm create vite@latest my-vue-app -- --template vue`

```sh
# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue
```

2. In the same terminal/command line follow the instructions presented. It's two commands, 

```sh
cd my-vue-app
```  

```sh
npm i @parcz/neon
```

3. Open up the project in your editor of choice

4. Find `main.js` and replate the contents of it with the following

```js
import { createApp } from 'vue'
import App from './App.vue'
import { NAction, NContainer, modifiers } from '@parcz/neon'
import '@parcz/neon/dist/neon.css'

const app = createApp(App)

/* neon */

app.component('n-action', NAction)
app.component('n-container', NContainer)

/* Directives */

app.directive('modifiers', modifiers)

/* current app.use installs */

app.mount('#app')
```

5. Find App.vue and add the following in the <template></template> area

```js
<n-action text="Neon button" v-modifiers="['primary']"></n-action>
```

6. Run the project with `npm run dev` and navigate to the url presented. You should now see a button that is imported from neon.

<br>
----
<br>

We recommend importing only the components you need, doing so will treeshaking possible. We import the css like this for now so you can test the library.

```js
/* src/main.js */

import { createApp } from 'vue'
import App from './App.vue'
import { NAction, NContainer, modifiers } from '@parcz/neon'
import '@parcz/neon/dist/neon.css'

const app = createApp(App)

/* neon */

app.component('n-action', NAction)
app.component('n-container', NContainer)

/* Directives */

app.directive('modifiers', modifiers)

/* current app.use installs */

app.mount('#app')

```

It is possible to import all of the components.

```js
/* src/main.js */

import { createApp } from 'vue'
import App from './App.vue'
import { neon, modifiers } from '@parcz/neon'
import '@parcz/neon/dist/neon.css'

const app = createApp(App)

/* neon */

app.use(neon)

/* Directives */

app.directive('modifiers', modifiers)

/* current app.use installs */

app.mount('#app')

```

It is also possible to import the files from a CDN.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Vue App with neon</title>

    <!-- Import Vue.js from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

    <!-- Import your neon library from jsDelivr -->
    <script src="https://cdn.jsdelivr.net/npm/@hurdal/neon/dist/neon.umd.js"></script>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hurdal/neon/dist/neon.css">
</head>

<body>
    <div id="app">
        <n-action text="Save"></n-action>
    </div>

    <script>
        const app = Vue.createApp({});

		app.use(DcLib);
    	app.mount('#app');
    </script>

</body>

</html>

```

## Styling guidelines

We use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). Just to name a few.

   - `width` > `inline-size`
   - `min-width` > `min-inline-size`
   - `max-width` > `max-inline-size`
   - `height` > `block-size`
   - `min-height` > `min-block-size`
   - `max-height` > `max-block-size`

### BEM (Block, Element, Modifier) Methodology**

BEM is a front-end naming methodology thought up outside the context of any particular programming environment. It's a way for developers to ensure that their CSS is scalable and maintainable. Here's a summary:

1. **Purpose**:

   - Makes CSS more readable and understandable.
   - Simplifies naming conventions.
   - Creates a rigid structure that helps in scaling and maintaining large codebases.


2. **Components**:

   - **Block**: A standalone entity that is meaningful on its own. E.g., `header`, `container`, `menu`.
   - **Element**: A part of a block that has no standalone meaning and is semantically tied to its block. E.g., `menu item`, `list item`.
   - **Modifier**: A flag on a block or element that changes appearance or behavior. E.g., `disabled`, `highlighted`.


3. **Naming Convention**:

   - **Block**: `.block`
   - **Element**: `.block__element`
   - **Modifier**: `.block--modifier` or `.block__element--modifier`


4. **Benefits**:

   - **Modularity**: You can move blocks around your project freely and independently.
   - **Reusability**: Creating UI components becomes more straightforward, as you know the class structure.
   - **Structure**: Provides a clear and consistent codebase structure, making it easier for new team members to understand.


5. **Examples**:

   - Block: `.button`
   - Element within the block: `.button__text`
   - Modifier for the block: `.button--large`


6. **Implementation**:

   - Use a preprocessor like SCSS or LESS for more manageable nested code, but remember that BEM doesn't depend on them. It's simply a naming convention.


7. **Caveats**:
   - Might appear verbose to those unfamiliar with the method.
   - Requires discipline and adherence from the team to ensure it's implemented consistently.

By utilizing the BEM methodology, developers and teams can avoid a lot of common pitfalls associated with CSS development, such as specificity wars, over-reliance on nesting, and obscure class naming. The BEM methodology provides a clear system for writing clean, scalable, and maintainable CSS.