/boilervue-atomic-design-system

🟩 BoilerVue is an Atomic Design System for Vue.js

Primary LanguageVue

Contributors Forks Stargazers Issues LinkedIn


Logo

BoilerVue

🟢 BoilerVue is an Atomic Design System for Vue.js
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. Contact

About The Project

BoilerVue is an Atomic Design System for Vue.js. It's an Open Source Project so if you are a frontend developer...feel free to contribute!

What is Atomic Design?

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

  1. Atoms: Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
  2. Molecules: Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound.
  3. Organisms: Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
  4. Templates: Templates consist mostly of groups of organisms stitched together to form pages.
  5. Pages: Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

Atomic Design:

Product Name Screen Shot

Built With

  • Vue

(back to top)

Getting Started

Prerequisites

  • npm

    npm install npm@latest -g

  • vue.js

npm init vue@latest

Installation

  1. Clone the repo 
    git clone https://github.com/kostastepetes/boilervue-atomic-design-system.git
  2. Install NPM packages 
    npm install
  3. Run It! 
    npm run serve

(back to top)

Usage

For more examples, please refer to the Documentation

(back to top)

Roadmap

  • Add README
  • Add More Components
  • Add Additional Examples

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

LinkedIn - @kostastepetes

Project Link: https://github.com/kostastepetes/boilervue-atomic-design-system

(back to top)