Making your own CSS Component Library : A Practical Guide to practice CSS

HTML and CSS are two essential technologies you must be familiar with. HTML and CSS are used to create beautiful web pages, and mastering them can be challenging due to the vast number of HTML tags and CSS properties. However, to simplify the process, you can use CSS frameworks. In this article, we will explain how to create a component library using HTML and CSS that can help you build beautiful websites quickly and effectively.

Step-by-Step Guide:

1-Design the layout of the components on paper.
Before you start coding, it's important to have a clear vision of what you want to build. Sketch the layout of the components on paper or use design tools like Figma or Canva to create a visual representation of the components.

2-Write the structure of the component in HTML.
Once you have a design layout, start writing the structure of the component in HTML. This will create the basic skeleton of your web page.

3-Design the component in CSS.
After you have created the basic HTML structure, it's time to add styles to the components using CSS. CSS classes and IDs can be used to add styles like background color, font size, link decoration, and button styles to the components.

3-Host the Project CSS File
To host the project CSS file, you can use tools like Netlify, GitHub Pages, or Vercel.

By following the above four steps, you can create a component library that can be used to build beautiful web pages quickly and effectively.

Benefits of using a component library:

1. Reduces time spent on repetitive CSS coding.
2. More control over the components, and the ability to customize them according to your needs.
3. Real-time experience with HTML and CSS, enabling you to learn the core concepts effectively.
4. To help you get started, here is an example of a component library that includes 10+ beautiful components: SlateUI

Creating a component library using HTML and CSS can help you to build beautiful web pages quickly and effectively. Moreover, it can help you to gain a deep understanding of HTML and CSS, which are essential for a good softaware career. With these skills, you will be able to create engaging layouts without spending much time coding it from scratch.

I started with HTML and CSS to design webpages as this is the first thing which a software developer does at the job.
these two web technologies were enough to make any type of web pages ,but here is a catch mastering these technologies are tough as along HTML has 152 and CSS has 200+ properties .

although you will not use all that tags and properties writing each tag and property and combining all of them to make small components takes huge time that's why it is recommended to learn a CSS framework.

Every website is made of some elements and these elements are structured in HTML and styled in CSS. To explain you better I will be making a small personal CSS component library project later will use that to make a full web app that displays the Name, Image, and food of any random animal.

Now If I ask you to make a small website or even a landing page without using any CSS framework then how you would do it?
My goal is to reduce the time we are spending on designing but without using any framework.

If we could have something that can automate (frameworks) all these and still give us the same beautiful result then how would that be?

This is where component library comes into the picture you will write your component once in pure vanilla CSS then you would be able to use them anywhere in any project.

Now why I am recommending you to do this because I simply want you to get a real-time experience with HTML and CSS while learning a lot of things in a one go.

I made my small library which consists of 10+ beautiful components if you wish to look into that you can check here SlateUi

You can also check my component library for the same which helped me to get deeper understading of web technologies

• I wanted to learn CSS and HTML so deeply that after making one project I should be in a position where I know all the important concepts of web designing (UI to code) .

• As I will design and develop the components which means I will have more control over them and can also customize more as per the requirements.

• The learning: Yes this is the most beautiful part, In my library, I have 10+ components, and making each component took a good amount of time, After all, the kind of exposure I have gotten to these two technologies made me more confident on it.

• To avoid writing repetitive CSS code for the same elements.

Here is a step-by-step plan to make your component

1. Design the layout of components in pen and paper.
2. Write the structure of the component in HTML.
3. Design the component in CSS.
4. Host the Project CSS File

1- Design the layout in pen and paper:

as you can see in the above image I have prepared a basic layout of the webpage which consists of three elements
a) Header, b)Card, c) Footer, and each of the element have some color, text, and some other element.

In the real world, you will have some prepared design models in Figma or any UI design files.

I have designed this on Canva and this is the first step that I follow before proceeding with core feature development.

2- Write the structure of the component in HTML. :

At this level we will simply put our HTML elements in such a way so that we can prepare a basic skeleton of the webpage as we have designed, in the Header I have a logo and some navigation links, in the cards I have a Button and an Image; and in Footer, I have some links again.

3- Design the component in CSS. :

At Point No- 2 whatever components we have made using HTML elements all would be beautified at this stage we will use the CSS properties to give them background color, main color, link decoration, button styles, etc. we will achieve all this with the help of CSS classes and Ids.

So far We have built three components

a. Header with Navigation link
a. Footer
c. Cards (Horizontal) with action Button

Let's start building the first component which is Header

Header

The header of a page or a section. It usually contains a logo, search, navigational links, etc.

Footer

The Footer defines the footer of a web page or a section. Usually, it contains copyright information, contact details, navigation links, etc.

Cards

The card component can contain a variety of content, including a heading, image, content, and a footer including a call to action button.

The cards are made to serve a specific purpose like showing e-commerce products, showing news items; can be used at an ample number of places.

Combining all together

By clicking on the click button every time your card data will be updated with a random animal image along with food habits.
*Note * : I have used the open source API for the project if the content is not updated on card so it might due to API outage.

Now did you check the CSS code?
Hope you are wondering why I have imported just a single line of code and how it is maintaining the styles for all three components.

4.Host the Project CSS File:

I have hosted the main CSS file in netlify app so that it can be accessed anywhere by just importing it into the project.

This beauty of frameworks allows you to focus on the development part rather than designing. you can consider any of the frameworks like tailwindcss, bootstrap either you have to install it or import it and this is what we have just done.

Conclusion :

Now, what logic I have used that the whole app is working with one line of CSS? the idea is very simple I am breaking it down here :

1. Make components as per your requirements.
2. Control their design with CSS and apply the properties.
3. Take your main CSS file and host it somewhere, you will get a new URL, and use that URL to import your CSS styles in HTML.

Now you just need to copy only HTML code and paste it where you want to see your components and import your CSS file URL into that HTML file.

FAQ :

What benefit have we got from this?
-Now you just have to copy the HTML code only, and import that CSS file into the project.

-What if I have to change something like I want to update the header color to blue from black?
This is also easy you just have to edit your CSS file and update the header color to blue from black at where you have declared that header class or id.

-What if I want to make more components then how to do this?
You can make N number of components, just store the style code in the same CSS file which you have hosted, and everything will be working fine.

-How this will save my time?
Imagine you have to make 5 websites with each having 5 pages per website(5*5=25 pages),
you have identified some common elements like header and footer which will be used across all 25 pages, so instead of writing 25 separate components you can simply use the components from your library, you just have to copy and paste the HTML and add the CSS file.

Now you can calculate how much time you have saved.

So guys this is all end from my side and if you find this article useful then do like and share it and connect me here