From 24bbe143cce0c86ed0043e47ca9995355ba6bc8a Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 13 Aug 2022 02:10:46 +0400
Subject: [PATCH] Add styling content

---
 .../102-react-ecosystem/108-styling/100-chakra-ui.md | 12 +++++++++++-
 .../108-styling/101-material-ui.md                   |  9 ++++++++-
 .../108-styling/102-ant-design.md                    | 10 +++++++++-
 .../108-styling/103-styled-components.md             | 10 +++++++++-
 .../102-react-ecosystem/108-styling/104-emotion.md   |  9 ++++++++-
 .../102-react-ecosystem/108-styling/readme.md        |  4 +++-
 6 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md
index 472306399..edc3910ec 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md
@@ -1 +1,11 @@
-# Chakra ui
\ No newline at end of file
+# 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>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md
index 69b111191..aba1b9f96 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md
@@ -1 +1,8 @@
-# Material ui
\ No newline at end of file
+# 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>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md
index b2a9cc4cf..2c6528230 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md
@@ -1 +1,9 @@
-# Ant design
\ No newline at end of file
+# 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>
+
+
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md
index 209d27f0e..9daecf6fd 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md
@@ -1 +1,9 @@
-# Styled components
\ No newline at end of file
+# 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>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md
index 39a6aa202..0f846c436 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md
@@ -1 +1,8 @@
-# Emotion
\ No newline at end of file
+# 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>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md
index 9b86fa435..a313452b7 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md
@@ -1 +1,3 @@
-# Styling
\ No newline at end of file
+# 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.