An Intro to CSS UI Frameworks With Ant Design

You may have noticed that though our app functionally works, it doesn't look great. And this is due to us not introducing any styling or CSS whatsoever. Though we could style our app with custom means, we'll employ and use a UI framework to help us achieve this. Writing, creating and producing robust CSS code for large applications take a lot of work. Presentation, appearance, responsiveness, accessibility and structure are a lot of the things that come into account when building good front-end code. This is where UI or CSS frameworks often come in. UI and CSS frameworks are packages containing pre-written standardized and often well-tested template and CSS code. They help speed up development, oftentimes provide a good layout and help enforce good web design. With that said, there are some disadvantages to using them. UI and CSS frameworks restrict the ability for us to customize and edit prepared styles and set up. They sometimes increase bundle size of an application by introducing a lot more code and they often require a little time for one to get used to. Some examples of some popular CSS UI frameworks are Bootstrap, Bulma, Semantic UI, Foundation and though all these libraries do a great job, there are native structures, simple HTML and CSS. If we wanted to use some of their prepared code, we would essentially need to create our own React components that can be reused elsewhere. As an example, this is a particular UI/CSS framework that provides us with template code, HTML and CSS and this is how we could, for example, create a simple card layout . With that said though, React UI frameworks now exist that allow us to import and use a lot of their components. For example, we can use libraries like React Bootstrap, React Bulma components, React Semantic UI and so on. And the benefits of these libraries are that a large number of components have already been prepared for us. When the library is available in our app, all we need to do is import these components and use them directly. Here's an example of importing a card component from a particular UI framework and rendering it and applying the props that this card component expects. In this course, we'll be using a React UI framework known as AntDesign. AntDesign is a robust UI framework with practically every components we can think that we might need in an application. We personally love antDesign's stylings and every component we've come across looks and appears beautiful. From simple components like menus, badges, alerts, buttons to more complicated components like gate pickers, tables, image uploaders and so on. It's an incredibly well polished library. With that said, however, there are some issues with working with antDesign. The library is opinionated and though customizations can be done, it's a little tedious and a little difficult at times. AntDesign when introduced often increases the bundle size of an application by quite a large margin. And there are a few components at this moment that aren't the best suited for accessibility. All size and accessibility are two areas that the antDesign team are looking to improve for the next official update. With that said though, we do want to stress that if you're interested in picking a UI framework for a large production app, we encourage you to take your time to look through some of the pros and cons of many different options before making a choice. For proof of concepts and what we intend to do in this course, antDesign works perfectly. With that said, a lot of the things we'll demonstrate when it comes to importing and using components from antDesign can be relayed to any React UI framework you might like to use. In the next lesson, we'll install antDesign and use some of their components to make our app look and appear more presentable. [BLANK_AUDIO]