CSS class builder

As a web developers, we need to write the styles for the given classes.

But for lazy people like me, it creates too much frustration. So I decided to make the VS code extension to solve this problem and finally, I succeed in it.

My extension name is CSS class builder. It will generate the styles from your given classes in the HTML.

For example, we have the following code

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
</head>
<body>
    <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>

After running this extension, the above file changed into

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
   <style is-from-builder>
      .w_40px {
         width: 40px;
      }

      .mL_auto {
         margin-left: auto;
      }

      .mR_auto {
         margin-right: auto;
      }

      .display_block {
         display: block;
      }

   </style>
</head>
<body>
   <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>

For more information kindly refer to this.

PS: I know we have a lot of good CSS frameworks like bootstrap. But it will be helpful for the people who are in the process of learning CSS styles.

Repo Link: https://github.com/AlwarG/css-class-builder
Extension Link: https://marketplace.visualstudio.com/items?itemName=AlwarG.css-class-builder

Thank you for reading this post 🙏. I Just tried what I know. Feel free to post your comments if you want to share something.

20

Categories:

Css

Tags:

CssVscodeHtmlCodequality