@parcz/neon v0.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 + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
At this point we haven't looked into extensions for other editors.
Project Setup
npm installCompile and Hot-Reload for Development
npm run devCompile and Minify for Production
npm run buildLint with ESLint
npm run lintImplement
Customize configuration
See Vite Configuration Reference.
Using with build step
- Open a Terminal/Command line, select one "create vite" commands from the list below and copy paste, for instance
npm create vite@latest my-vue-app -- --template vue
# 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- In the same terminal/command line follow the instructions presented. It's two commands,
cd my-vue-appnpm i @parcz/neonOpen up the project in your editor of choice
Find
main.jsand replate the contents of it with the following
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')- Find App.vue and add the following in the area
<n-action text="Neon button" v-modifiers="['primary']"></n-action>- Run the project with
npm run devand navigate to the url presented. You should now see a button that is imported from neon.
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.
/* 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.
/* 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.
<!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. Just to name a few.
width>inline-sizemin-width>min-inline-sizemax-width>max-inline-sizeheight>block-sizemin-height>min-block-sizemax-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:
Purpose:
- Makes CSS more readable and understandable.
- Simplifies naming conventions.
- Creates a rigid structure that helps in scaling and maintaining large codebases.
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.
- Block: A standalone entity that is meaningful on its own. E.g.,
Naming Convention:
- Block:
.block - Element:
.block__element - Modifier:
.block--modifieror.block__element--modifier
- Block:
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.
Examples:
- Block:
.button - Element within the block:
.button__text - Modifier for the block:
.button--large
- Block:
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.
- 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.