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..
Top comments (2)
Looks like a very promising tool. Will surely check it out 😄
Thanks! it would be great if you give some feedback as well!