Atomic-design - Studies carried out through Bootcamp Fullstack Cataline on Atomic Design and componentization in Vue

Overview

Header Project

Atomic Design

License   Status

Estudos realizados através do Bootcamp Fullstack Cataline sobre Atomic Design e componentização em Vue 💫

💻 Sobre o Projeto

Este projeto foi desenvolvido com o intuito de praticar conceitos de componentização baseada no Atomic Design, que visa abstrair um conceito já natural sobre átomos, aplicando-os em componentização.

Por exemplo: Organismos são formados por Moléculas, que por sua vez são formados por Átomos e assim em diante

🚀 Tecnologias e Ferramentas

Este projeto foi desenvolvido com:

  • Vue
  • Sass (SCSS)
  • TypeScript
  • Atomic Design
  • Git

📚 Aprendizado

Neste projeto eu pratiquei:

  • Componentização Vue
  • Vue props, components

⚙️ Materiais Utilizados

💻 Telas

Este foi o resultado final da aplicação!

🤖 Créditos & Agradecimentos

Sem eles, este projeto não seria possível!

📋 Licença

Este projeto está sob a licença MIT. Projeto realizado apenas para fins didáticos. Fique à vontade para utilizar todo o conteúdo deste repositório!


Obrigado pela atenção! 😃

Owner
Daniel Antunes
Daniel Antunes
Sliding out and in header(s) for top navigation bar

Sliding Header Vue.js component representing sliding header (or two different headers) for top navigation bar How to use This Vue component consists o

null 43 Apr 12, 2021
Generates a cloud out of the words.

VueWordCloud Generates a cloud out of the words. demo Try it out! setup npm npm i vuewordcloud ES module Register the component globally. import Vue f

Sergej Sintschilin 316 Dec 24, 2021
💍 Pick out specific elements from the component slot

?? Pick out specific elements from the component <slot>

hiroki osame 12 Jan 3, 2022
Vue component for drag-and-drop to design and build mobile website.

vue-page-designer Live Demo A drag-and-drop mobile website builder base on Vue. Install yarn add vue-page-designer You can start it quickly, in main.j

Yuan Zhu 782 Jan 14, 2022
Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/

Vue Ripple Vue Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple DEMO Install You can import vue-ripple to your

Naufal Rabbani 48 Dec 14, 2021
Add material design ripple effect to your Vue project.

vue-material-design-ripple Add material design ripple effect to your Vue project. Why another ripple plugin? Most of current plugins don't work exactl

null 31 Oct 14, 2021
💅 3YOURMIND’s Vue UI Framework & Design System

@3yourmind/kotti-ui Complete. The most commonly-needed components are implemented in Kotti. More components will be implemented when there is a specif

3YOURMIND 73 Jan 1, 2022
Vue Argon Design System

Vue Argon Design System Start your development with a Design System for Bootstrap 4. It is open source, free and it features many components that can

Creative Tim 771 Jan 19, 2022
Quickly design LinkedIn visual polls like the once you see on other's profiles, for FREE✨

Quickly design LinkedIn visual polls like the once you see on other's profiles, for FREE ✨

fotiecodes 4 Nov 30, 2021
Vuejs 2+ components built using Microsoft’s Fluent Design System based on Buefy.

Logo by Vue-Fluent Fluent Design Components for Vue.js based on Buefy and bulma-fluent, inspired by Microsoft’s Fluent Design System. Fluent Design Th

Muhammad Ubaid Raza 77 Nov 17, 2021
⛰️Carvue.js -- Carbon design for VueJS

Introduction Carvue is a UI components library which is based on Carbon-Design and VueJS with ❤️ and Proud to be a vue-awesome ?? Document Carvue.JS I

CarvueJS 104 Oct 19, 2021
Tokyo-travel-landing - Code for a design found on dribbble.

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setu

Yanis Dev 0 Jan 10, 2022
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 119 Jan 18, 2022
MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS

MKTemplate A beautiful UI . Start your Web Site with this bootstrap and VueJS UI . MKTemplate is Free and Open Source. It features multiple HTML and V

Moutawakkil Mohammed 7 Nov 17, 2021
A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.

vue-beautiful-chat vue-beautiful-chat provides an intercom-like chat window that can be included easily in any project for free. It provides no messag

Matteo Merola 1.1k Jan 18, 2022
Matteo Bruni 2.8k Jan 15, 2022
A Vue.js component for creating polls, voting and showing results. It’s easy to implement and easy to customize.

vue-easy-polls A Vue.js component for creating polls, voting and showing results. It’s easy to implement and easy to customize. Demo See live demo her

UPDIVISION 13 Oct 26, 2021
Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies

vue-textarea-autosize The plugin for Vue.js provides the Vue component implements textarea with automatically adjustable height and without any wrappe

Devstark 118 Jan 6, 2022
👋 Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection and on creation. Good for GDPR requirements.

vue-cookie-accept-decline Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an ev

Promosis, Inc. 108 Dec 15, 2021