The latest articles on DEV Community by John Canete (@serjohnc). https://dev.to/serjohnc https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4057883%2F92e405c2-e560-4c88-9694-430bbc573efb.png https://dev.to/serjohnc en John Canete Sun, 02 Aug 2026 08:45:01 +0000 https://dev.to/serjohnc/superbyte-ui-update-page-layouts-13be https://dev.to/serjohnc/superbyte-ui-update-page-layouts-13be <p>Just shipped a new Layouts feature for Superbyte UI.</p> <p>You now get 11 preset layout combinations to choose from — navigation style (vertical sidebar, horizontal top bar, or mini sidebar) and content width (full, boxed, or contained) as two independent settings. Mix and match, or pick a ready-made preset like Vertical + Boxed, Mini Sidebar + Contained, Condensed, or Comfy.</p> <p>Your choice is saved and applied across the entire UI — pick it once from the Layout menu or the theme customizer, and every page follows.</p> <p>🔗 Live demo: <a href="https://superbyte23.github.io/superbyte-ui/index.html" rel="noopener noreferrer">https://superbyte23.github.io/superbyte-ui/index.html</a> <br> 🔗 Source: <a href="https://github.com/superbyte23/superbyte-ui" rel="noopener noreferrer">https://github.com/superbyte23/superbyte-ui</a></p> <p>⭐ If you find this useful, drop a star on the repo — it helps a lot!</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi7sj8dgv9vswvtbrujd9.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi7sj8dgv9vswvtbrujd9.png" alt=" " width="800" height="397"></a></p> frontend opensource ui webdev John Canete Sat, 01 Aug 2026 11:20:51 +0000 https://dev.to/serjohnc/superbyte-ui-1ejc https://dev.to/serjohnc/superbyte-ui-1ejc <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhw4x57cpmwu219c2m5ht.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhw4x57cpmwu219c2m5ht.png" alt=" " width="800" height="516"></a><br> 🚀 Introducing Superbyte UI</p> <p>Build modern, beautiful web interfaces without being locked into a JavaScript framework.</p> <p>Superbyte UI is a growing collection of sleek, reusable UI components designed for developers who love simplicity and flexibility. Whether you're building with plain HTML, PHP, Laravel Blade, or your favorite backend framework, Superbyte UI helps you create polished interfaces faster.</p> <p>✨ Features<br> • Modern and clean design<br> • Copy-and-paste components<br> • Framework-agnostic<br> • Responsive layouts<br> • Easy to customize<br> • Perfect for dashboards, admin panels, landing pages, and web applications</p> <p>If you're tired of installing heavy frontend frameworks just to create great-looking interfaces, Superbyte UI is built for you.</p> <p>🌐 Live Demo<br> <a href="https://superbyte23.github.io/superbyte-ui/" rel="noopener noreferrer">https://superbyte23.github.io/superbyte-ui/</a></p> <p>💻 GitHub<br> <a href="https://github.com/superbyte23/superbyte-ui" rel="noopener noreferrer">https://github.com/superbyte23/superbyte-ui</a></p> <p>⭐ If you find the project useful, please consider giving it a GitHub Star—it helps more developers discover the project.</p> <p>The project is actively evolving, and contributions, feedback, feature requests, and GitHub stars are always appreciated!</p> <p>⭐ Star the repository if you find it useful and help grow the project.</p> <h1> SuperbyteUI #WebDevelopment #Laravel #PHP #Bootstrap #HTML #CSS #JavaScript #OpenSource #Frontend #UIDesign #WebDesign #DeveloperTools </h1>