Add styling content

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md

@@ -1 +1,11 @@
-# Chakra ui
+# Chakra UI
+
+Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://chakra-ui.com/'>Chakra UI Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://chakra-ui.com/docs/getting-started'>Chakra UI Official Getting Started</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106'>Build a Modern User Interface with Chakra UI</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/wI2vqXsjsIo'>Official Getting Started Video</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/s-bIsz-NR3c'>Chakra UI Crash Course</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md

@@ -1 +1,8 @@
-# Material ui
+# Material UI
+
+Material-UI is an open-source framework that features React components that implement Google’s Material Design.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://mui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=vyJU9efvUtQ'>Material UI React Tutorial</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md

@@ -1 +1,9 @@
-# Ant design
+# Ant design
+
+An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://ant.design/'>Official Website: Ant Design</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ant-design/ant-design'>ant-design / ant-design</BadgeLink>
+
+

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md

@@ -1 +1,9 @@
-# Styled components
+# Styled components
+
+Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=02zO0hZmwnw'>Styled Components Crash Course & Project</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md

@@ -1 +1,8 @@
-# Emotion
+# Emotion
+
+Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yO3JU2bMLGA'>Styled components using emotion in React</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md

@@ -1 +1,3 @@
-# Styling
+# Styling
+
+While "CSS in JS" is the most predominant way of styling modern frontend applications, there are several different ways to style your React applications whether it is vanilla CSS, [CSS Modules](https://github.com/css-modules/css-modules), or [CSS in JS](https://css-tricks.com/a-thorough-analysis-of-css-in-js/) etc and each has several frameworks available.