DEV Community: Kaustubh Shinde

Introducing Stack UI - Origin!

Kaustubh Shinde — Tue, 03 Oct 2023 11:58:21 +0000

Hello everyone! Today I am extremely thrilled to announce a milestone of my life and my journey as an Indiehacker and Solopreneur.

Ever since I joined this Community/Platform, I have been actively speaking and was quite vocal about my open-source MVP product called Stack UI. So much so that I have written a couple of articles and even asked for help from this community to sponsor the next launch.

However, I am excited to say that I have somehow managed to scale the product from the MVP stage to the completion stage which I call the True 1.0 version.

So what is the difference between the earlier version and this new version?

The MVP or the prototype version had an entire layout designed with the help of Bootstrap and the inside components and elements were customized. I cannot release something like this on Github and for people to use it and call it a Freeform UI library!

So with the components I made, I experimented with each and every single one of them designed web templates, and solved the issues + bugs and once I was satisfied I decided to create this new version. Hence I call it - Stack UI Origin.

In this new version, you will find a complete redesign of all the UI components and elements, without any use of external libraries like Bootstrap, JQuery, etc.

We have also made the code available on GitHub. Making the Freeform UI Library truly Open Source.

What about React JS and Vue JS Components

The components made using React JS and Vue JS are almost done and are in the Testing Phase.

During the test, I noticed that the current Shared Server on which the platform is hosted is not enough powerful to host the new React JS and Vue JS Components, Hence I need to procure enough server space to host the new components.

So, do support us on Patreon so that I can soon launch the React JS and Vue JS Components.

What Supporters on Patreon can get in return?

Stack UI Link - https://stackui.co
Give a Star on GitHub - https://github.com/kaustubhdevstack/stackui
Support us on Patreon - https://www.patreon.com/StackUI

How to use Stack UI to build your personal portfolio

Kaustubh Shinde — Wed, 13 Sep 2023 15:04:06 +0000

Portfolio is a personal thing, it is something where you can really show what you are capable of so let's use Stack UI to build it!

Little context - What the hell is Stack UI?

It is a Freeform UI Library comprising freeform and reusable UI elements and components. It doesn't require any installation or documentation to use. Essentially, it simplifies the process of crafting user interfaces by allowing you to easily copy and paste necessary UI components. This ultimately results in a highly refined and optimized user interface that appears sleek and clean.

Developers can selectively choose the necessary components for their projects, enabling them to create a customized front-end stack tailored to each project's requirements. This approach grants developers complete control over the UI components, allowing them to modify them as needed.

So, the question is: to what extent can you make your UI lightweight, and how much control of the UI do we have?

I recently built my own portfolio just to test the Stack UI, and it worked great! I can make my UI super lightweight, and I have full control over each component and element.

Portfolio Link - https://kaustubhdev.netlify.app/

The reusability of each and every component, in particular, stands out. I was able to create something that appears clean and simple while effectively highlighting the importance of my work!

So let's get started with tutorial

Note: Ensure that you have Emmet and Prettier installed in your VS Code. Additionally, for this article, I will be using my own portfolio website as a reference.

Step 1: Choosing your Brand Colors

Stack UI offers a variety of color systems from various frameworks. You can also create your own brand's color stack using the collection of colors provided by Stack UI.

--primary-color: #fde047;
--accent-color: #fef3c7;
--font-color: #0f172a;
--dark-color: #020617;
--accent-blue-color: #93c5fd;
--primary-dark: #000000;
--primary-white: #ffffff;
--link-color: #007bff;

One of the first striking differences between Traditional UI Frameworks and Stack UI is the freedom of choice it offers when selecting the most essential colors.

Traditional UI Libraries often come with extensive color palettes of 20 to 30 colors, or even more. However, with Stack UI being a copy-paste library, you can assign color variables that are easy to remember.

Now, having a wide range of colors isn't necessarily a bad thing, but each additional color contributes to the size of your CSS file. The real challenge arises when you're building a large-scale web application, as it becomes difficult to recall the variable names assigned to all those colors due to their sheer number.

By providing users with the ability to select specific color ranges that align with their brand, Stack UI makes life much easier for developers.

Step 2: Writing Code

Stack UI is built entirely with HTML, CSS, and JS, which are fundamental languages. Therefore, a comprehensive tutorial is not necessary. However, I'll provide you with guidelines on how to structure your code.

Before proceeding with this step, ensure that you have a wireframe prepared.

What do we have here:

Responsive Navigation
Hero Section partitioned with 2 Flexbox Grid
Tech Stack Section
Big Projects with 2 Flexbox Grid [3 rows each]
WordPress List and Sponsor Section
Footer
Buttons (2 different types: Expanding social media buttons and Shadow buttons)

We have 7 specific UI components from Stack UI, and we utilize these components in various ways by customizing their CSS code to meet our specific needs.

In this context, we replace the classes provided in the code with our own custom classes.

HTML CODE

<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Kaustubh Shinde - Full Stack Web Developer</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
        <link rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
        <nav class="main-navigation">
                <div class="top-navbar">
                        <i class="fa-solid fa-bars sidebarOpen"></i>
                        <span class="logo navLogo"><a href="index.html">Kaustubh Shinde</a></span>
                        <div id="sidenav" class="menu">
                                <ul class="nav-links">
                                        <div class="logo-toggle">
                                                <span class="logo navLogo"><a href="index.html">Kaustuh Shinde</a></span>
                                        </div>
                                        <li><a href="index.html" class="active">Home</a></li>
                                        <li><a href="https://stackui.hashnode.dev/">Blog</a></li>
                                        <li><a href="https://dev.to/krybone">Dev.to</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                </ul>
                        </div>
                </div>
        </nav>

        <section class="main-hero">
                <div class="head-mast">
                        <div class="flex-container">
                                <div class="item">
                                        <div class="pic">
                                                <img class="head-profile" src="assets/images/kaustubh-1.png" alt="Kaustubh Shinde">
                                        </div>
                                </div>
                                <div class="item">
                                       <div class="profile-info">
                                                <h1>Hi, I am Kaustubh Shinde</h1>
                                                <a class="typing" data-period="2000" data-type='[ "Full Stack Developer.", "Web Wizard.", "Web Creator."]'></a>
                                                <p>I am  web wizard who loves to build Productivity and Utility Applications. I specialize in <b>Product Design</b> and <b>Product Development</b>. <br>Want to Hire Me? Let's have a coffee ☕ <a href="contact.html">Contact Me!</a></p>

                                                <div class="button-container">
                                                        <a class="about-btn" href="about.html">Read complete Bio</a>
                                                        <a class="about-btn" href="https://drive.google.com/file/d/1_cqjstrPtuvw8dDLZfwr-JCtF4wvjb2l/view?usp=drive_link" target="_blank">Download Resume</a>
                                                </div>

                                       </div>
                                </div>
                        </div>
                </div>
        </section>

        <section class="tech-base">
                <div class="tech-stack">
                        <h3>Tech Stack</h3>
                        <div class="tech-icons">
                                    <div class="icon fb">
                                        <span><i class="fa-brands fa-html5"></i></span>
                                        <div class="stack-tooltip">HTML 5</div>
                                    </div>
                                    <div class="icon instagram">
                                        <span><i class="fa-brands fa-css3-alt"></i></span>
                                        <div class="stack-tooltip">CSS 3</div>
                                    </div>
                                    <div class="icon twitter">
                                        <span><i class="fa-brands fa-js"></i></span>
                                        <div class="stack-tooltip">Javascript</div>
                                    </div>
                                    <div class="icon linkedin">
                                        <span><i class="fa-brands fa-react"></i></span>
                                        <div class="stack-tooltip">React</div>
                                    </div>
                                    <div class="icon pinterest">
                                        <span><i class="fa-brands fa-vuejs"></i></span>
                                        <div class="stack-tooltip">Vue</div>
                                    </div>
                                    <div class="icon tiktok">
                                        <span><i class="fa-brands fa-php"></i></span>
                                        <div class="stack-tooltip">PHP</div>
                                    </div>
                                    <div class="icon youtube">
                                        <span><i class="fa-brands fa-bootstrap"></i></span>
                                        <div class="stack-tooltip">Bootstrap</div>
                                    </div>
                                    <div class="icon telegram">
                                        <span><i class="fa-brands fa-node-js"></i></span>
                                        <div class="stack-tooltip">Node js</div>
                                    </div>
                                    <div class="icon snapchat">
                                        <span><i class="fa-solid fa-database"></i></span>
                                        <div class="stack-tooltip">MySQL DB</div>
                                    </div>
                                    <div class="icon github">
                                        <span><i class="fa-brands fa-figma"></i></span>
                                        <div class="stack-tooltip">Figma</div>
                                    </div>
                        </div>
                </div>
        </section>

        <section class="projects">
                <div class="project-area">
                        <h3>Big Projects</h3>
                        <div class="flex-container project-1">
                                <div class="item">
                                        <div class="project-text">
                                                <a href="https://stackui.co" target="_blank"><b>Status -</b> Version 2.0 in Development!</a>
                                                <h1>Stack UI - Freeform Open UI Library</h1>
                                                <p><b>Stack UI</b> is a Freeform Open UI Library which helps you to craft interactive user interfaces instantly, with Zero Installation and No Documentation Hurdles. <br>
                                                <b>Currently - </b>Version 1.5 is launched.</p>

                                                <div class="button-container">
                                                        <a class="about-btn" href="https://stackui.co" target="_blank">View Project</a>
                                                        <a class="about-btn" href="stackui.html">Read about Stack UI</a>
                                                </div>
                                        </div>
                                </div>
                                <div class="item">
                                        <div class="project-show">
                                                <div class="pic">
                                                        <a href="https://stackui.co"><img class="project-image" src="assets/images/projects/stackui.png" alt="Stack UI"></a>
                                                </div>
                                        </div>
                                </div>
                        </div>

                        <div class="flex-container project-2">
                                <div class="item">
                                        <div class="project-show">
                                                <div class="pic">
                                                        <a href="https://realestate.digiforge.in/" target="_blank"><img class="project-image" src="assets/images/projects/realestate.png" alt="Real Estate Website"></a>
                                                </div>
                                        </div>
                                </div>
                                <div class="item">
                                        <div class="project-text">
                                                <a href="https://realestate.digiforge.in/" target="_blank"><b>Status -</b> In Final Phase</a>
                                                <h1>Real Estate Website</h1>
                                                <p>Real Estate Website with Monthly & Annual Subscription System Made with CodeIgniter 4 Bootstrap 4 and Razorpay.<br><b>Currently - </b>The Project is in Final Phase of Development you can check the demo.</p></p>

                                                <div class="button-container">
                                                        <a class="about-btn" href="https://realestate.digiforge.in/" target="_blank">Demo Version</a>
                                                        <a class="about-btn" href="realestate.html">About Project</a>
                                                </div>
                                        </div>
                                </div>
                        </div>

                        <div class="flex-container project-3">
                                <div class="item">
                                        <div class="project-text">
                                                <a href="" target="_blank"><b>Status -</b> In Development Phase</a>
                                                <h1>Ecommerce Website</h1>
                                                <p>Ecommerce Website with Made with CodeIgniter 4, Bootstrap 4 and Razorpay Checkout.<br><b>Currently - </b>The Project is in Development Phase and Demo version is not live yet.</p></p>

                                                <div class="button-container">
                                                        <a class="about-btn" href="#" target="_blank">Demo Version</a>
                                                        <a class="about-btn" href="ecommerce.html">About Project</a>
                                                </div>
                                        </div>
                                </div>
                                <div class="item">
                                        <div class="project-show">
                                                <div class="pic">
                                                        <a href="" target="_blank"><img class="project-image" src="assets/images/projects/ecommerce.png" alt="Ecommerce Website"></a>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </section>
        <section class="wp-project">
                <div class="project-list">
                        <div class="button-container">
                                <a class="about-btn" href="wordpress.html"><i class="fa-brands fa-wordpress" style="margin-right: 5px;"></i>List of WordPress Projects</a>
                                <a class="about-btn" href="https://stackui.co" target="_blank"><i class="fa-brands fa-patreon" style="margin-right: 5px;"></i>Support Stack UI on Patreon</a>
                        </div>
                </div>
        </section>
        <footer class="footer-area">
                <div class="footer-links">
                        <a href="index.html">Home</a>
                        <a href="https://stackui.hashnode.dev/">Blog</a>
                        <a href="https://dev.to/krybone">Dev.to</a>
                        <a href="about.html">About</a>
                        <a href="contact.html">Contact</a>
                </div>
                <div class="footer-social-copyright">
                        <div class="footer-social-icons">
                        <a href="https://www.linkedin.com/in/kaustubh-shinde-wcss3/" class="social-icon"><i class="fa-brands fa-linkedin"></i></a>
                        <a href="https://twitter.com/krybone" class="social-icon"><i class="fa-brands fa-x-twitter"></i></a>
                        <a href="https://stackui.hashnode.dev/" class="social-icon"><i class="fa-brands fa-hashnode"></i></a>
                        </div>
                        <div class="footer-copyright">
                                © 2023 Built with 💖 by <a href="https://stackui.co">Stack UI</a>.
                        </div>
                </div>
        </footer>
        <script src="assets/js/script.js"></script>
</body>
</html>

CSS CODE

/*!
 * Portfolio design by Kaustubh Shinde
 * UI Library - Stack UI
 * Author - Stack UI
 * Version - 1.0
 * URL: https://stackui.co
 * Licensed under the GPL License
 * Copyright (c) 2023 Stack UI Creator Kaustubh Shinde
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap");
/*-----------------------------------------
    Initializing style and primary css
-------------------------------------------*/
:root {
        --primary-color: #fde047;
        --accent-color: #fef3c7;
        --font-color: #0f172a;
        --dark-color: #020617;
        --accent-blue-color: #93c5fd;
        --primary-dark: #000000;
        --primary-white: #ffffff;
        --link-color: #007bff;
        --shadow-1: rgba(0, 0, 0, 0.09) 0px 3px 12px 0px;
        --shadow-2: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
        --border-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
}
html {
        scroll-behavior: smooth;
}
* {
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
body {
        font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6, strong, b {
        font-style: inherit;
        font-weight: bold;
}
p {
        color: var(--font-color);
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
}
ul li {
        font-family: 'Roboto', sans-serif;
}
a {
        text-decoration: none;
        color: #007bff;
        font-family: 'Roboto', sans-serif;
}
.about-btn {
        justify-content: space-between;
        align-items: center;
        background-clip: padding-box;
        background-color: var(--primary-dark);
        border: 1px solid var(--primary-dark);
        box-sizing: border-box;
        color: var(--primary-white);
        cursor: pointer;
        display: inline-flex;
        font-size: 16px;
        justify-content: center;
        line-height: 1.25;
        margin: 0;
        min-height: 3rem;
        padding: calc(.875rem - 1px) calc(1.5rem - 1px);
        position: relative;
        text-decoration: none;
        transition: all 250ms;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: baseline;
        width: auto;
        box-shadow: var(--primary-white) 4px 4px 0 0,var(--primary-dark) 4px 4px 0 1px;
}
.about-btn:hover {
        background-color: var(--primary-white);
        color: var(--primary-dark);
        box-shadow: var(--primary-dark) 4px 4px 0 0,var(--primary-dark) 4px 4px 0 1px;
}
/*-----------------------------------------
    Navigation
-------------------------------------------*/
.main-navigation {
        height: 70px;
        width: 100%;
        border-top: 2px solid var(--dark-color);
        border-bottom: 2px solid var(--dark-color);
}
.top-navbar {
        position: relative;
        height: 100%;
        max-width: 1280px;
        width: 100%;
        margin: 0 auto;
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
}
.top-navbar .logo a {
        font-size: 17px;
        font-weight: 500;
        color: var(--primary-dark);
        text-decoration: none;
}
.top-navbar .logo img {
        width: 100%;
        height: auto;
        margin-top: 10px;
}
.top-navbar .nav-links li {
        margin: 0 5px;
        list-style: none;
        display: inline-block;
}
.top-navbar .nav-links a {
        display: flex;
        align-items: center;
}
.top-navbar .nav-links li a {
        position: relative;
        font-size: 17px;
        font-weight: 400;
        color: var(--primary-dark);
        text-decoration: none;
        padding: 10px;
}
.top-navbar .nav-links li a:hover {
        border: 1px solid var(--primary-dark);
        transition: 0.2s ease;
}
.top-navbar .menu .logo-toggle {
        display: none;
}
.top-navbar .sidebarOpen {
        color: var(--primary-dark);
        font-size: 25px;
        padding: 5px;
        cursor: pointer;
        display: none;
}
@media (max-width: 790px) {
        .top-navbar .sidebarOpen {
                display: block;
                font-size: 18px;
        }
        .top-navbar .logo-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
        }
        .top-navbar .sidebarClose {
                font-size: 18px;
                color: var(--primary-white);
                display: block;
        }
        .top-navbar .nav-links {
                display: none;
                position: fixed;
                top: -20px;
                left: 0;
                width: 250px;
                height: 100%;
                background-color: var(--dark-color);
                padding: 10px 10px;
                z-index: 9999;
                overflow: hidden;
                transition: transform 100s ease;
                transform: translateX(-100%);
        }
        .top-navbar.active .nav-links,
        .top-navbar.active .nav-links .logo-toggle {
              display: block;
              transform: translateX(0%);
        }
        .top-navbar .nav-links li {
                margin-bottom: 2px;
                display: block;
        }
        .top-navbar .nav-links li a {
                color: var(--primary-white);
                font-size: 18px;
                text-decoration: none;
                border-bottom: 1px solid var(--primary-white);
        }
        .top-navbar .nav-links li a:hover {
                color: var(--dark-color);
                background-color: var(--primary-white);
                border-radius: 4px;
                transition: 0.2s ease;
        }
}
/*-----------------------------------------
    Main hero
-------------------------------------------*/
.main-hero {
        background: var(--accent-color);
        box-sizing: border-box;
}
.main-hero .flex-container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 1280px;
        width: 100%;
}
.main-hero .flex-container .item {
        flex: 1;
        height: auto;
        margin: 10px;
        padding: 20px;
        border-radius: 2px;
        box-sizing: border-box;
}
.main-hero .flex-container .pic {
        display: flex;
        justify-content: center;
        align-items: center;
}
.main-hero .flex-container .pic img {
        height: 400px;
        width: 400px;
        border-radius: 50%;
        border: 4px solid var(--dark-color);
}
.profile-info {
        align-self: center;
        text-align: center;
        margin-top: 8vh;
        box-sizing: border-box;
}
.profile-info h1 {
        font-size: 3rem;
}
.profile-info a.typing {
        font-size: 1.5rem;
        margin: 2rem;
        font-weight: bold;
}
.profile-info p {
        font-size: 1.2rem;
        margin: 1rem;
        line-height: 1.8rem;
        letter-spacing: .5;
}
.profile-info .button-container {
        gap: 1rem;
        display: flex;
        justify-content: center;
}
@media screen and (max-width: 768px) {
        .profile-info .button-container {
            flex-direction: column; /* Stack buttons vertically */
            align-items: center; /* Center align buttons horizontally */
            padding-top: 2vh; /* Adjust spacing */
        }

        .main-hero .flex-container .pic img {
                height: 300px; /* Adjust the height for smaller screens */
                width: 300px; /* Adjust the width for smaller screens */
        }

        .profile-info {
                align-self: center;
                text-align: center;
                margin-top: 1vh;
        }

        .profile-info h1 {
                font-size: 2rem;
        }

        .profile-info a.typing {
                font-size: 1rem;
                margin: 2rem;
                font-weight: bold;
        }

        .profile-info p {
                font-size: 1rem;
                margin: 1rem;
                line-height: 1.8rem;
                letter-spacing: .5;
        }
}

/* Additional responsive styles for even smaller screens */
@media screen and (max-width: 576px) {
        .main-hero .flex-container .pic img {
            height: 200px; /* Adjust the height for even smaller screens */
            width: 200px; /* Adjust the width for even smaller screens */
        }

        .profile-info {
                align-self: center;
                text-align: center;
                margin-top: 1vh;
        }
}
/*-----------------------------------------
   Tech Stack
-------------------------------------------*/
.tech-base {
        background: var(--accent-blue-color);
        padding-bottom: 2rem;
}
.tech-base h3 {
        font-size: 1.5rem;
        text-align: center;
        padding-top: 2rem;
        text-decoration: underline;
}
.tech-icons {
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
}
.tech-icons a {
        color: var(--dark-color);
}
.tech-icons .icon {
        height: 45px;
        width: 45px;
        float: left;
        margin: 0 10px;
        border-radius: 50px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s ease-out;
        background-color: var(--primary-white);
        border: 2px solid var(--primary-dark);
}
.tech-icons .icon span {
        display: inline-block;
        height: 45px;
        width: 45px;
        border-radius: 50px;
        box-sizing: border-box;
        line-height: 45px;
        text-align: center;
}
.tech-icons .icon:hover {
        width: 150px;
}
.tech-icons .icon .stack-tooltip {
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin-left: 10px;
}
.tech-icons .icon .stack-tooltip::before {
        display: none;
}
.tech-icons .icon i {
        font-size: 20px;
        line-height: 45px;
}
@media only screen and (max-width: 600px) {
        .tech-icons .icon {
            width: 100%;
            margin: 0;
            border: 1px solid var(--primary-dark);
        }
        .tech-icons .icon:hover {
            width: 100%;
        }
    }
    @media only screen and (max-width: 480px) {
        .tech-icons .icon {
            height: 30px;
            width: 30px;
        }
        .tech-icons .icon span {
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
        }
        .tech-icons .icon i {
            font-size: 16px;
            line-height: 30px;
        }
}
/*-----------------------------------------
   Projects
-------------------------------------------*/
.project-area h3 {
        font-size: 1.5rem;
        text-align: center;
        padding-top: 2rem;
        text-decoration: underline;
}
.project-area  .flex-container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 1280px;
        width: 100%;
        box-sizing: border-box;
}
.project-area .flex-container .item {
        flex: 1;
        height: auto;
        margin: 10px;
        padding: 20px;
        border-radius: 2px;
        box-sizing: border-box;
}
.project-area img {
        width: 100%;
        height: auto;
        cursor: pointer;
        border-radius: 4px;
        border: 4px solid var(--primary-dark);
}
.project-area img:hover {
        opacity: 0.5;
        transition: 0.3 ease;
}
.project-area .project-text {
        margin-top: 5vh;
        align-self: center;
        text-align: center;
        box-sizing: border-box;
}
.project-area .project-text p {
        margin: 1rem;
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .5;
}
.project-area .button-container {
        gap: 1rem;
        display: flex;
        justify-content: center;
}
@media screen and (max-width: 768px) {
        .project-area .flex-container .item {
            flex-basis: calc(50% - 20px); /* 50% width with margin */
        }

        .project-area .project-text {
            margin-top: 3vh;
        }

        .project-area .project-text p {
                font-size: 1rem;
        }

        .project-area .button-container {
                flex-direction: column; /* Stack buttons vertically */
                align-items: center; /* Center align buttons horizontally */
                padding-top: 2vh; /* Adjust spacing */
        }

        .project-area .project-1,
        .project-area .project-3 {
                flex-direction: column-reverse; /* Reverse the order for small screens */
        }
}
@media screen and (max-width: 576px) {
        .project-area .flex-container .item {
            flex-basis: calc(100% - 20px); /* 100% width with margin */
        }
}
.wp-project {
        display: flex;
        justify-content: center;
        text-align: center;
        height: auto;
        padding: 20px;
        padding-bottom: 2rem;
        box-sizing: border-box;
        background: var(--primary-color);
}
.wp-project .button-container {
        gap: 1rem;
        display: flex;
        margin: 0 auto;
        padding-top: 3vh;
        justify-content: center;
}
@media screen and (max-width: 768px) {
        .wp-project {
                padding-bottom: 2rem;
        }
        .wp-project .button-container {
            flex-direction: column; /* Stack buttons vertically */
            align-items: center; /* Center align buttons horizontally */
            padding-top: 2vh; /* Adjust spacing */
        }
}
/*-----------------------------------------
   Page Styling 
-------------------------------------------*/
.page-hero .flex-container {
        padding: 20px;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 1280px;
        width: 100%;
}
.page-hero {
        background: var(--accent-color);
}
.page-hero .flex-container .pic,
.page-hero .flex-container .page-heading {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
}
.page-hero .flex-container .pic img {
        height: 150px;
        width: 150px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 3px solid var(--dark-color);
}
.page-hero .flex-container .page-heading {
        padding: 20px;
}
.page-content {
        margin: 2rem;
        box-sizing: border-box;
}
.page-content .about-info {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 4px;
        box-sizing: border-box;
        border: 2px solid var(--dark-color);
}
.page-content .about-info h3 {
        margin-left: 1rem;
        text-decoration: underline;
}
.page-content .about-info p {
        margin: 1rem;
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .5;
}
.page-content .about-info ul li {
        margin-left: 2rem;
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .5;
        list-style: disc;
}
.page-content .showcase img {
        width: 100%;
        box-sizing: border-box;
        height: auto;
        border-radius: 4px;
        border: 4px solid var(--primary-dark);
}
.page-content .button-container {
        gap: 1rem;
        display: flex;
        margin: 0 auto;
        padding-top: 3vh;
        justify-content: center;
}
@media screen and (max-width: 768px) {
        .page-content .about-info p,
        .page-content .about-info ul li {
                font-size: 1rem;
        }

        .page-content .button-container {
                flex-direction: column; /* Stack buttons vertically */
                align-items: center; /* Center align buttons horizontally */
                padding-top: 2vh; /* Adjust spacing */
        }
}
/*-----------------------------------------
   Footer
-------------------------------------------*/
.footer-area {
        background-color: var(--primary-dark);
        padding: 20px;
        text-align: center;
        box-sizing: border-box;
}
.footer-area .footer-links {
        margin-top: 2rem;
        margin-bottom: 3rem;
}
.footer-area .footer-links a {
        color: var(--primary-white);
        text-decoration: none;
        margin: 0 10px;
}
.footer-area .footer-links a:hover {
        border: 1px solid var(--primary-white);
        padding: 15px;
        transition: 0.2s ease;
}
.footer-area .footer-social-copyright {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        padding: 20px;
        margin: 0 auto;
        box-sizing: border-box;
        background-color: var(--primary-color);
}
.footer-area .footer-social-icons {
        font-size: 14px;
}
.footer-area .footer-social-icons .social-icon {
        color: var(--primary-dark);
        margin: 0 5px;
}
.footer-area .footer-copyright {
        font-size: 14px;
        color: var(--primary-dark);
}
@media (max-width: 768px) {
        .footer-area .footer-social-icons {
                font-size: 14px;
        }

        .footer-area .footer-links {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
        }
}

In this manner, I employed the same 7 components across different scenarios and rearranged them to create 6 distinct pages, apart from the Home page. This means a total of 7 unique components and 7 individual pages - pretty cool, right?

The noticeable contrast between traditional frameworks and Stack UI lies in my ability to use only the code that serves my purpose. There's no unused CSS or HTML components.

If I had chosen Bootstrap 5 or Tailwind for this small project, I would have ended up with a hefty codebase, including various dependencies that traditional frameworks typically bundle.

Moreover, this specific approach allows me to use JavaScript only for components that require it to function. For instance, I utilized JavaScript for the Repeated typing effect and Side Navigation for responsive mode, avoiding the inclusion of unnecessary JavaScript, just as I did with CSS and HTML.

// TYping effect
class TxtType {
        constructor(element, toRotate, period) {
                this.toRotate = toRotate;
                this.element = element;
                this.loopNum = 0;
                this.period = parseInt(period, 10) || 2000; // Default to 2000ms if period is not specified
                this.txt = '';
                this.tick();
        }
        tick() {
                var i = this.loopNum % this.toRotate.length;
                var fullTxt = this.toRotate[i];

                if (this.isDeleting) {
                        this.txt = fullTxt.substring(0, this.txt.length - 1);
                } else {
                        this.txt = fullTxt.substring(0, this.txt.length + 1);
                }

                this.element.innerHTML = '<span class="wrap">' + this.txt + '</span>';

                var that = this;
                var delta = 200 - Math.random() * 100;

                if (this.isDeleting) {
                        delta /= 2;
                }

                if (!this.isDeleting && this.txt === fullTxt) {
                        delta = this.period;
                        this.isDeleting = true;
                } else if (this.isDeleting && this.txt === '') {
                        this.isDeleting = false;
                        this.loopNum++;
                        delta = 500;
                }

                setTimeout(function () {
                        that.tick();
                }, delta);
        }
}

window.onload = function() {
        var elements = document.getElementsByClassName('typing');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
                new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        //Inserting CSS to make it work
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typing > .wrap { border-right: 0.08em solid #000}";
        document.body.appendChild(css);
};

//Sidebar

document.addEventListener("DOMContentLoaded", function() {
        const menuIcon = document.querySelector(".sidebarOpen");
        const sidenav = document.getElementById("sidenav");
        const navbar = document.querySelector(".top-navbar");

        menuIcon.addEventListener("click", function() {
          sidenav.classList.toggle("active");
          navbar.classList.toggle("active");
        });

        document.addEventListener("click", function(event) {
          const targetElement = event.target;
          if (
            !targetElement.closest(".main-navigation") &&
            sidenav.classList.contains("active")
          ) {
            sidenav.classList.remove("active");
            navbar.classList.remove("active");
          }
        });
});

This approach has allowed me to significantly reduce the weight of my code compared to traditional frameworks.

What's even more remarkable is that it took me the same amount of time to build the UI as it would with Bootstrap! While Tailwind is even faster, the beauty of this approach is that it gives me the freedom to customize components to my heart's content.

Test Results

Bootstrap vs Stack UI

Speed - Equal (Depends on the developer's proficiency.)
Code Size - Stack UI Wins (The bundled JS and CSS code in Bootstrap is much larger, and there's no need for me to create separate style.css and script.js files since I can consolidate everything into one CSS file and one JS file.)
Re usability - Stack UI Wins because in this instance, I used the same containers and div elements with rearrangement to create 7 pages.

Tailwind vs Stack UI

Speed - Tailwind Wins
*Code Size - * Stack UI Wins (Large code size due to bundled code)
Re usability - Tailwind and Stack UI are equal

Note

The Stack UI Library is currently in its MVP stage and still requires many improvements.

Version 2.0 will introduce a Script and Style Manager, which will be a game-changer! So, stay tuned and continue using Stack UI. Your feedback will be invaluable to me..

Need Help From this Community to Contribute to Development of stackui.co

Kaustubh Shinde — Wed, 06 Sep 2023 20:34:58 +0000

What is Stack UI? and Why I need your help?

Front-end world has been deaminated by UI Frameworks like Bootstrap, Tailwind CSS, Material UI, MD Bootstrap, Materialize CSS.

I am on a mission to create a difference in this front-end world by creating an Open code UI Library which requires no documentation and installation!

This way developers can choose only the required and necessary stuff for their project and create a custom stack of front-end project to project basis. And by doing so developer will have full control over the UI Components and they can modify it however they want.

All in one UI Library!

It should be all in one UI library so there is no need for developer to Google anything

There are equal amount of paid resources and equal amount of free resources, and I want to create a resource which will continue to evolve as the time flows by and I am committed to keep it free forever as long as it is supported by people!

However I am one person and developing such extensive UI resource platform is slowly taking toll on me!

I have already made MVP live, which you can check it here - https://stackui.co

MVP already has HTML, CSS & JavaScript based components, and currently I am working on React JS and Vue JS components, after the work with React and Vue components is done I am going to make the source code available on GitHub page!

The help I am looking for

*Patreon Sponsors - * Currently Stack UI has only 1 Patreon Sponsor who is supporting me from the initial stage.

I want to more people to sponsor this initiative to make this huge extensive UI project work!

Patreon sponsors are huge deal because those who will sponsor this project will have right to get their voice heard. On GitHub I will get bug reports/reviews but patreon sponsor will have right to decide via poll and they will decide which feature should be released and which should not be released.

Money donated by Sponsors will be used for Server Maintenance and Marketing and for creating premium quality creating tutorial videos and it will help me in creating a team do develop this extensive UI Library!

So, If you think what I am working is worth supporting! Then please donate as it would meant the world to me

*Patreon link - * https://www.patreon.com/StackUI

The Ultimate Collection of Colors for UI 😎

Kaustubh Shinde — Wed, 06 Sep 2023 14:20:51 +0000

Colors its an essential element of User interface as it represents your brand. However color is the only element in user interface that can get us into some tricky situations.

Allow me to explain..

Scenarios from Client's point of view

If our client is already aware with the range of colors he/she is going to use in the application then for us developers nothing is more better than that.

However things take a different turn when our client comes with a blank slate and tells us to decide on the branding color aspect.

If you own agency then your UI Designer will work that out for you as for freelancers things get a little tough!

At such times the best option is to suggest the ready-made color stack of whatever front-end framework (bootstrap or tailwind css) you're used to.

If your client decides to choose from the ready-made color stack then it's good, but what if he/she asks you to bring out more colors? Then the situation gets tricky.

These were the scenarios from the client point of view but now lets take a look from developer's point of view.

Scenarios from Developer's point of view

As a developer its quite normal to use Bootstrap, Tailwind CSS or any other front-end UI library to work with the user interface.

However, what if you are working with Bootstrap and want to add Colors from Tailwind CSS? at such cases what will you do?

The common answer to this one simple question is - Open the Tailwind CSS in browser and just use the colors. But wait Tailwind CSS color library is in rgb and but since you're working with bootstrap most of the colors are in hex format so are you going to use the colors in your same project in both formats?

At this time your answer will be either one of two:

Yes I will use both formats
No I will convert RGB into Hex

So to overcome such tricky and tiresome situations, I came up with a simple solution, lets just bring all the colors from different front-end frameworks into one place and make it available in all the possible used formats!

Whether its HEX, RGB, RGBA, HSL, HSV, CMYK you will get everything.

This way as a developer it is possible for you to use any color from any UI library of your choice easily without the need to visit that particular website of the library and that too in any format you want.

Primary Color System

1. Bootstrap Color System: https://stackui.co/components/bootstrap_colors

2. Material Design Color System: https://stackui.co/components/material_design_colors

3. Tailwind CSS Color System: https://stackui.co/components/tailwind_css_colors

4. Neumorphic Color System: https://stackui.co/components/neumorphic_colors

5. Bulma CSS Color System:
https://stackui.co/components/bulma_colors

Now if you go to these links and click on View Properties you will find all the available color formats mentioned above.

We even have gradient color system with different color gradients used by many Popular brands like - Facebook, Instagram, WhatsApp, Soundcloud, Twitch etc.

Gradient Color System
https://stackui.co/components/gradient_colors

Gradient Color System is the only color system where you don't need to click on view properties. Just click on Color Box and you get the required gradient copied.

So without any hesitation feel free and go ahead and use all the possible resources given above!😁

The Ultimate Cheatsheet to Typography! 😎

Kaustubh Shinde — Tue, 05 Sep 2023 19:04:44 +0000

What is the most difficult things when it comes to building User interface?

Every single developer has it's own take on this question, some might tell you that Colors are the most toughest thing to decide on. Others might say Box Shadow, but deep-down we all know, nothing can be more tiresome when it comes to choosing fonts.

A great font-combination can do magic to UI

was once said by me, Kaustubh Shinde.

With that being said, do people actually know the exact trick to choose the right fonts for UI?

Well the answer is, NO!

As of now, there is no One-single way to choose the font typography combination and even if you view 100's of different YouTube Videos or read 1000's of different articless it will break your brain because every single UI Designer has their own take on typography.

What these UI Designer suggest comes from their own experience and philosophy that worth a gold.

However majority of developers who just want to get rid of the hassle of choosing typography do a much simple process.

They have a set of specific chosen font for their project and use those sets in rotation!

So keeping this in mind I came up with my own so-called Ultimate cheatsheet of choosing the right Typography.

I made a list of 43 fonts and made 100 Combinations out of these chosen fonts.

I've included the cheatsheet in my Open UI Library Project - Stack UI.

Project Link - https://stackui.co/components/font_combine

Go ahead and use those to build your awesome User Interface. 😁

Interactive Social Media Buttons ✨

Kaustubh Shinde — Tue, 05 Sep 2023 08:31:40 +0000

Interactive Social media buttons and social media icons made with pure HTML and CSS and no external library.

Youtube Like Tab Navigation Slider using only HTML CSS & JS

Kaustubh Shinde — Mon, 04 Sep 2023 18:26:53 +0000

Youtube like tab navigation slider made with pure HTML, CSS and Javascript the code officially is a part of Stack UI library -

YouTube has awesome tab navigation and Just replicated it!

Advance Tables using only HTML CSS and JavaScript

Kaustubh Shinde — Sun, 03 Sep 2023 15:41:43 +0000

Advance tables made using HTML, CSS and JavaScript the tables have also advance filter table inspired from datatables.js but here in this I have not used datatable library I have only used custom script.

Introducing Stack UI

Kaustubh Shinde — Sun, 03 Sep 2023 15:40:36 +0000

It's a Free and Open UI library consisting of freeform UI components and elements and you don't need documentation or any methods to install it.

This allows you to directly access the code right from the platform and it helps you choose the components and elements that only you want in your project. Which gets rid of all unnecessary code and improves performance.

Since you can directly access the code you have full control over the UI component and you can modify it however you want.

Feel free to use this in your projects and do give me a feedback! If you like the project then bookmark it and you will get to see more fun updates.

Also a quick update: On 20th August 2023 I launched Stack UI 1.0 with initial response and feedback now I am introducing Stack UI 1.5

Link - https://stackui.co
Do Support - https://www.patreon.com/StackUI