CSS-103

Week 3 (module 1) Assignment

Create a component library in CSS.

What is a component library?

A component library in CSS is a collection of pre-designed and reusable CSS styles and components. It helps in creating consistent and efficient web designs by providing a set of ready-to-use components that can be easily customised and integrated into different projects. These components can include buttons, forms, menus, cards, and more, making it easier to build and maintain a cohesive design system.

What are the uses/benefits of a component library?

• Consistency: A component library ensures consistent design across different projects by providing a set of pre-designed components and styles.

• Efficiency: It saves time and effort by offering ready-to-use components that can be easily customised and integrated into web designs.

• Reusability: Components in a library can be reused across multiple projects, promoting code reusability and reducing redundancy.

• Scalability: A component library allows for easy scalability as new components can be added and existing ones can be modified or extended.

• Maintainability: By using a component library, it becomes easier to maintain a cohesive design system as changes can be made in a centralised location.

• Collaboration: A component library facilitates collaboration among designers and developers, enabling them to work together using a shared set of components.

• Accessibility: Component libraries often include accessible design patterns and guidelines, promoting inclusive and user-friendly web experiences.

How to create a component library?

To create a component library in CSS, you can follow these steps:

1. Identify and Define Components: Determine the common UI elements and components that you want to include in your library, such as buttons, forms, or cards. Define their styles, variations, and possible states.

2. Organise and Structure: Establish a clear and consistent structure for your component library. Use a modular approach by organising components into separate files or folders. Consider using a naming convention or a CSS methodology like BEM (Block, Element, Modifier) for better organisation.

3. Create Reusable Styles: Develop reusable CSS styles for your components. Use a modular approach to write CSS that can be easily applied to different elements and components. Avoid writing styles that are specific to a single component or project.

References

Check these out on how the code is structured and what all styles are added for reference.

1. https://cdn.jsdelivr.net/npm/water.css@2/out/water.css

2. https://cdn.jsdelivr.net/npm/spcss@0.9.0

3. https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css

4. https://latex.now.sh/style.css

5. https://unpkg.com/chota@latest

6. https://unpkg.com/mvp.css

7. https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css

8. https://unpkg.com/@sakun/system.css

List of components

Patterns

Mandatory Components

• Buttons

• Forms

• Cards

• Navigation menus

• Alerts/Notifications

• Typography styles

Optional Components

• Sliders

• Badge

• Tabs

• Accordion/Collapsible sections

• Dropdown menus

• Pagination

• Modals/Dialogs

• Progress bars

• Tooltips

• Image galleries

• Grid systems

How will this help you ?

1. Being good at css is all about practice. This exercise gives you ample practice.

2. Any medium to large size application would use a set of pre customised template. This gives you an early knowledge of creating and using component libraries.

3. Using component libraries like bootstrap are fine for simple projects, real frontend developers need to have knowledge of css and be able to write styles.

4. Use it in your next awesome project.

5. Last of all, ask you yourself - Wouldn't it be to create a set of components of your own and publish them or even show them on social media? 😎

What have you learnt you so far ?

Class 1

1. What is Css.

2. Css terminology.

3. How Css can be added to websites.

4. How styles get loaded in websites.

Class 2

1. Css units.

2. Colors in Css.

3. Typography in Css.

4. Css properties - box-shadow | border-radius | clip-path

Class 3

1. Types of Css selectors.

2. Power of attribute selectors.

3. Pseudo elements.

4. Pseudo classes.

5. Combinators.