Hue UI - A CSS Component Library

A lightweight and ready-to-use CSS library for developing fast and responsive web interfaces! 😀

Overview

Usage

CSS

Just copy-paste the stylesheet <link> into your <head> to load our CSS.

<link rel="stylesheet" href="https://hue-ui.vercel.app/css/main.css" />

JS

Some of our components require the use of JavaScript to function. Place our script at the end of your page content, right before the closing <body> tag, to enable them.

<script src="https://hue-ui.vercel.app/js/main.js"></script>

Documentation

Check out our documentation website.

Screenshot

My process

Built with

Semantic HTML5 markup
CSS3
SCSS
Flexbox
Mobile-first workflow
Vanilla JS

What I learned

This was my first time using SCSS in a big project, so I learned a lot! 😀 Besides the learning, I realized how important it is to stay organized and write code that is clean and reusable, especially as the project grows larger.

One of the things that I loved about SCSS is how easy it is to nest elements.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

The above CSS code can be written in SCSS as below:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Continued development

Structured code in a better way
Learn more about functions and mixins in SCSS

Useful resources

SCSS - This helped me greatly in learning SCSS and its variety of features. I really liked the examples given in SCSS documentation which helped me a lot to transition from writing CSS to SCSS.
Flexbox - This is an amazing article on flexbox which helped me understand how flex works. I'd recommend it to anyone still learning this concept.

Author

Website - Pranshu Dobhal
Twitter - @pranshu_dobhal
LinkedIn - pranshudobhal

Acknowledgments

A big thanks to my mentor Tanay Pratap for inspiring me and making me break my limits and also to my fellow NeoGrammers who supported and helped me throughout.😀

About