DemoReset Website

Made by Democracia en Red

This project uses:

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out the documentation.

Working with the project

Adding a new page

To add a new page, create a new file in the pages directory. The file name will be the URL of the page. For example, pages/about.vue will be accessible at http://localhost:3000/about.

Adding a new component

To add a new component, create a new file in the components directory. The file name will be the name of the component. For example, components/MyComponent.vue will be accessible as <my-component>.

Adding translations strings

Inside each language you can create new keys and values. The key will be the name of the string and the value will be the translation. For example, in lang/en.json:

{
  "hello": "Hello world!"
}

You can access the string in your code with $t('hello').

IMPORTANT You might need to restart the server to see the changes.

Styles

The project uses Bulma as a CSS framework and Buefy as a UI components library. You can find the documentation for both of them in their respective websites.

Icons

The project uses Font Awesome for icons. You can already use it :)

Styles inside components

You can add styles to your components by adding a <style> tag inside the component. For example:

<template>
  <div>
    <h1>My component</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style lang="scss" scoped>
h1 {
  color: red;
}
</style>

We recommend you using SCSS for your styles. You can use it by adding lang="scss" to the <style> tag.

Also if you want to use variables, you can add a variables.scss file inside the assets directory. You can use it by importing it in your component.

IMPORTANT: You can use scoped styles in your components. Just add scoped next to lang="scss" This means that the styles will only be applied to the component. If you don't want to use scoped styles, just remove scoped. But be careful, you can break the styles of other components, because they will be using the same classes.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

`assets`

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.