Why I Gave Up on Bootstrap and Created a Minimalist CSS Alternative

Alex — Fri, 19 Jun 2026 16:16:30 +0000

Bootstrap is a staple in web development, but it often becomes a bottleneck rather than a tool. I decided to abandon it because the framework’s opinionated nature frequently fights back against custom CSS. When you write a clean, standard CSS rule only to have it overwritten or ignored by Bootstrap’s deep specificity tree, you stop building and start debugging framework conflicts.

The Problem with Bloat

Bootstrap complicates the HTML and CSS layer by forcing class-heavy markup. Why clutter your HTML with device-specific classes when you can handle layout constraints centrally in CSS?
Consider a standard centering container:

/* style.css */
.fix {
  margin: 0 auto;
  max-width: 1024px;
}

/* mobile.css */
@media (max-width: 768px) {
  .fix {
    width: 100%;
  }
}

For a simple one-page site or a high-performance landing page, importing a massive library like Bootstrap is unnecessary overhead. This led me to create qCSS, a minimalist set of styles designed to keep markup clean while remaining scalable enough for larger projects. I've used it to significantly improve load times for online stores by removing the dependency on heavy external frameworks.

Simplicity in Practice

qCSS isn't about learning complex abstractions; it’s about readability. If you want to understand how a component works, you just open the CSS file.
Here are a few quick examples of how you can manipulate layouts with ease:
[a blog example]
[a one-page website example]
[dropdown menu]
[sticky footer]

Swap Sidebar Position

If you have a sidebar on the right and content on the left, swapping them is a matter of two simple rules:

.content {
  float: right;
}
.ss {
  margin-left: 0px;
  margin-right: 50px;
}

Swapping Feature Blocks

Handling grid-like layouts without complex flex or grid wrappers is straightforward:

Swap first & second blocks:

.first { left: 33.3333%; }
.second { left: -33.3333%; }

Swap first & third blocks:

.first { left: 66.6666%; }
.third { left: -66.6666%; }

Swap second & third blocks:

.second { left: 33.3333%; }
.third { left: -33.3333%; }

Conclusion

My approach to development has shifted significantly:

Write once, touch once: I structure the HTML layout, finalize it, and leave it alone.
Centralized logic: All visual and responsive adjustments happen in style.css and mobile.css.
My goal is simple: Don't complicate things. If you are tired of fighting your framework, consider whether you actually need it in the first place.

How I Built a Multi-Tenant E-Commerce SaaS on Top of OpenCart 3 Using Gemini AI

Alex — Wed, 17 Jun 2026 18:37:01 +0000

How I Built a Multi-Tenant E-Commerce SaaS Platform Based on OpenCart 3 Using Gemini AI

Hello Dev.to! My name is Alex. A few years ago, I moved to Slovakia. After spending several years working in factories and industrial plants, I grew tired of physically demanding work and decided to start working for myself. I wanted to put all of my experience in HTML/CSS, PHP, and Linux server administration into building my own product — the Hostatto.com e-commerce platform.

After discovering that Gemini could write code, I decided to use it to create something that I had previously been unable to build on my own: a platform for creating online stores that could operate quickly, efficiently, and scale on a single server.

I acted as the product manager, system architect, and quality assurance engineer, while Gemini generated code based on my technical requirements and specifications.

Below, I’ll explain the technical architecture behind the platform.

1. Multi-Tenant Architecture (Shared File System, Separate Database for Each Customer)

The primary challenge when designing an e-commerce SaaS platform is achieving efficient scalability on a single VPS server without wasting resources. From the beginning, I rejected the approach of deploying a separate copy of the application files for every customer.

Instead, the platform dynamically separates the environment in the following way.

Shared Application Code

All online stores run on a single shared codebase. Whenever I release an update, optimize a system file, or fix a bug, the changes are instantly available to every store.

Isolated Databases

Each store receives its own dedicated MySQL database. There are no shared tables with complex prefixes, ensuring complete data isolation and improved security.

Process Isolation

Stores do not share the same PHP execution process. Every customer receives an isolated PHP-FPM pool socket (php8.1-fpm-storeN.sock), strict open_basedir restrictions, and disabled potentially dangerous PHP functions, preventing cross-account access to data.

The diagram below illustrates the overall architecture.

2. Automated Store Provisioning System

The time between user registration and a fully operational online store is only a few seconds and requires no manual intervention.

When a user creates an account, a chain of automated background processes begins.

Process Initialization

A PHP script securely launches a set of background Bash utilities.

File System Preparation

The platform creates the required store directories, mounts shared storage resources, and applies strict permissions based on the principle of least privilege.

Database Deployment

A prepared OpenCart 3 database dump is imported into a newly created database.

A cryptographically secure random password is automatically generated for the database user.

Configuration Generation

The platform automatically creates unique configuration files for:

Nginx virtual hosts;
Dedicated PHP-FPM pools;
Monit monitoring;
Backup scheduling.
Service Reload

Nginx, PHP-FPM, and Monit safely reload their configurations, system caches are cleared, and the new store becomes available immediately.

The entire deployment process is fully automated and invisible to the customer.

3. Server-Level Performance Optimization

To ensure maximum website performance, several key architectural decisions were implemented.

Pure CSS Instead of Heavy Frameworks

The storefront interface is completely free of Bootstrap, Tailwind, and other CSS frameworks.

Using semantic HTML and lightweight CSS provides:

Minimal page size;
Fast rendering performance;
High GTmetrix scores immediately after deployment.

Aggressive FastCGI Caching with Nginx

Nginx serves static resources and caches product catalog pages directly at the web server level.

To ensure dynamic functionality works correctly, strict cache bypass rules were implemented. Caching is automatically disabled for:

POST requests;
Shopping cart pages;
Checkout pages;
Logged-in users.

4. Monitoring, Reliability, and Intelligent Backups

As the sole operator of the infrastructure, I needed the platform to be resilient, automated, and self-healing.

Monitoring with Monit

A background monitoring service continuously checks the health of individual PHP-FPM pool processes.

If a process hangs or crashes, Monit automatically restarts the affected service, ensuring maximum uptime without manual intervention.

Intelligent Cloud Backups

Every day, an automated script archives store files and databases before uploading backups to Google Drive using rclone.

To avoid Google API rate limits when backing up hundreds of stores simultaneously, I implemented randomized Cron scheduling delays.

Conclusion

Hostatto.com is a lightweight stack that leverages Nginx FastCGI caching, a shared OpenCart 3 core, and strict PHP-FPM pool isolation, enabling hundreds of lightning-fast online stores to run on a single server. Using Gemini as a true development partner allowed me to design, debug, and implement this entire complex infrastructure efficiently and successfully.
In conclusion, I would like to thank Daniel Kerr for creating OpenCart, and Gemini for helping with code generation and the implementation of this online store builder.