ATOMIC DESIGN
using
VUE
@ruphaa95
let ruphaa = {
"name" : "Ruphaa Ganesh",
"job" : "Frontend Engineer @ Freshworks",
"place" : "Chennai",
"desc" : "geek 🤓",
"message" : "Hello World ! Voila 😀"
};
ATOMIC DESIGN
VUE
How I felt when I came up with the topic
How I felt when it was time to prepare for it
How do I feel now ?
atomic design
ATOMS - Basic HTML elements
MOLECULES - Group of atoms together
ORGANISMS - Molecules combined together
TEMPLATES - Layout in action
PAGES - Specific instances of templates
VUE
Progressive Frontend Framework ❤️
Separation of concerns !== separation of file types
All in one place
Alright with everything 😪,
But what are we upto? 😕
We're gonna do this
and that...
GOALS
🔍 Analyse the Airbnb Home page
🔨 Break it down into components (Atomic design way) 🏗️ Building these components using VUE
Remember
Start small and work all the way up While building components, do the exact oppposite
How does it look with the magic of VUE and ATOMIC design? 🤔
<!-- This includes the link component which can be styled based on the requirements in different pages -->
<template>
<div class="navbar">
<ul>
<li v-for="link in links" :key="link.label">
<Link
:label="link.label"
:path="link.path"
/>
</li>
</ul>
</div>
</template>
<script>
import AppLink from '../atoms/Link'
export default {
name: 'NavBar',
components: {
Link
},
data () {
return {}
},
props: {
links: Array
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbar ul {
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.navbar ul li {
display: inline-block;
}
</style>To sum up...
We broke down the page design into components visually We structured our folder to follow Atomic Design pattern Then we started building our components from the atoms to all the way up to the organisms
Resources
Last but not the least
Everything is a component.
We're not designing pages anymore. We're designing a system of components.
Thank you 🙏
Any Questions
Text
