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. + +Free Content +Chakra UI Website +Chakra UI Official Getting Started +Build a Modern User Interface with Chakra UI +Official Getting Started Video +Chakra UI Crash Course +Why You Should Start Using Chakra UI 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. + +Free Content +Official Website +Official Documentation +Material UI React Tutorial 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. + +Free Content +Official Website: Ant Design +ant-design / ant-design + + 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. + +Free Content + +Official Website +Official Docs +Styled Components Crash Course & Project 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. + +Free Content + +Official Website and Docs +Styled components using emotion in React 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.