Abhijeet's Component Library

Now with support for dark-mode

This library was developed to be used with my portfolio, which would be published after this library is online.

Header Header

This is the header.

This is the header image

Navigation Navigation

This is for navigating through the website. This usually is inline and in header of the page, in the following order:

Typography Typography

This is heading 1 (biggest heading)

This is heading 2 (second biggest)

Heading 3

Heading 4

Heading 5
Heading 6
As can be seen the above are headings thus are in bold, unlike the paragraph text. (by the way this is the emphasis tag.) And this is the cite tag being used, but as can be seen there is no difference between the looks.

It's important to note that these tags have difference meaning so as to identify the significance of the text. This comes in handy for the accessibility tree as mentioned earlier.

This is small text, which is a smaller font size and they all (small, 'em', 'cite') are inline elements, there syntax is stated in the next topic in form of lists.

Aside text Aside text

Lists Lists

There are two types of lists, ordered lists and unordered lists. The ordered lists have a numbering before them indicated a order of items listed. These lists can be represented in either in block or inline form.

Ordered list

Normal order

This is a ordered list in which numbering start from 1 and goes in order.

Block form

  1. Small: <small> Lorem Ipsum </small>
  2. Emphasis: <em> Lorem Ipsum </em>
  3. Cite: <cite> Lorem Ipsum </cite>

Inline form

  1. Small: <small> Lorem Ipsum </small>
  2. Emphasis: <em> Lorem Ipsum </em>
  3. Cite: <cite> Lorem Ipsum <cite>

Reversed order

This is a ordered list in which the numbering starts from the last upto 1 in reverse order.

Block form

  1. Small: <small> Lorem Ipsum </small>
  2. Emphasis: <small> Lorem Ipsum </small>
  3. Cite: <cite> Lorem Ipsum <cite>

Inline form

  1. Small: <small> Lorem Ipsum </small>
  2. Emphasis: <small> Lorem Ipsum </small>
  3. Cite: <cite> Lorem Ipsum <cite>

Unordered list

This is an unordered list represented by bullets.

Block form

Inline form

Please note the above commands were written using HTML entities.

LinksLinks

The links here are not pointing to anything as of now, but the syntax for the same would be provided, For example:

This is a link, not a button

The syntax for the above would be:

<a href = "path">This is a link.</a>

The anchor tag is inline element, which means multiple links can be put in a single line, for example:

Primary Link Secondary Link

Button

The buttons are not doing anything as of now.

The syntax for the above would be:

<button type="button" >This is a button</button>

The output would be:

Code

The <code> tag creates a block for representing a computer code. It will be in the default monospace style of the user agent, but it can be embeded with other hosting services like github, below is an example.

.code-base {
background-color: var(--toast-bg);
color: var(--light-yellow);
}
view raw index.html hosted with ❤ by GitHub

But sometimes a custom design is preferred to set it according to theme of the webpage, for example, the same code but with the styling mentioned in above code block.

CSS
                
                .code-base {
                    background-color: var(--toast-bg);
                    color: var(--light-yellow);
                }

Containers Containers

The following represent containers where different elements can grouped and can be placed according to the design.

There are two types of containers:

Sections Sections

There are different kinds of sections, they can either be normal section with a white background, with a off-white background and with a padding top and bottom.

In a section, due to default document object model (DOM), the heading size is smaller than when it is outside the section, so for a heading 1 - it's font size is 1.5 and not the default 2.

Normal section

This section will have a white background.

Off-white section

This section has a off-white background.

This is a toast notification, it can be with sound or without sound.

Toast section

This section is a toast section.

Toast section

This section is a toast section with a sound, which I will add later.

There are many combinations possible for sections, I will add them later

Showcase with cards

These cards can be used to represent anything in a card form, since being a grid layout, it will adapt according to screen size.

lorem-ipsum

Mar 27, 2022

Clean Install windows 10 with zero bloatware

Windows 10 comes with a lot of bundled bloatware, which hogs down system resources. In this guide we remove bloatware from the windows ISO.

read time

5 minutes
lorem-ipsum

Mar 25, 2022

Clean Install Custom Roms on your android smartphone

An abstract about flashing custom ROM to a android smartphone for beginners.

read time

10 minutes
lorem-ipsum

Mar 24, 2022

FPS drops in Linux explained

Wondering why you have FPS drops in linux, even though everything works fine in windows!?

read time

3 minutes

More

More Blogs

Footer

A footer is the one at the bottom of the webpage. It mostly contains the header for footer (some text) and the social links.