shivampandey0/Neog-Assignments

A repository for all the future assignments of the camp

CSS Assignments

Flex-box and Positioning exercise

1. Create a card component with different styles. Create multiple styles only using css. Do not change the template. (hint: use the power of flex-box to change layout)

   • UX reference:(https://material-components.github.io/material-components-web-catalog/#/component/card?type=uiControl)

2. Create a list of chips inside a container. (hint: flexwrap ?)

   • Chips should wrap to next line automatically.
   • UX reference: https://material.angular.io/components/chips/examples
   • Don’t add inside the input as it might require some JS (people comfortable can implement)
   • Key is how to add multiple wrapping chips in a container.
   • A chip can have an icon on the left of the text and a cross icon fixed at the right most end.

3. Create a drawer component.

   • UX reference: https://material-components.github.io/material-components-web-catalog/#/component/drawer
   • There could be both left and right icons. (Support nesting?)

4. Create a header component

   • UX reference: https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar?variant=dense

5. Create a badge component (hint: positioning?)

   • UX reference: https://material.angular.io/components/badge/examples

6. Create a snackbar component (hint: positioning)

   • UX reference: https://material-components.github.io/material-components-web-catalog/#/component/snackbar

7. Create different styles of dialogs

   • UX reference: https://material.io/components/dialogs#usage

8. Create different styles of tabs

   • UX reference: https://material.io/components/tabs#usage
   • Create only one component and change styles using CSS