Corelayout

A collection of popular layouts, crafted using pure CSS and designed to provide responsive and visually appealing web designs for modern devices. These layouts will save you time and eliminate the need to build them from scratch every time, allowing you to focus on the finer details and deliver exceptional results with minimal effort.

https://sirajspark.github.io/corelayout/

Features

• Pure CSS
• Responsive
• Lightweight

About

As a full-stack developer, I frequently work with a wide range of layouts and although there are many CSS frameworks that offer popular layouts, I've found that including entire libraries in my projects can result in bloated code and hinder performance.

To tackle this challenge, I decided to create my own personal collection of the most used layouts using pure CSS and take advantage of modern CSS features such as flexbox and grid.

Adopting this approach not only streamlined my development process, but also ensured a lightweight, maintainable, and efficient code base.

Layouts

• Navigation bars (navbars)
• Footers (footers)
• Flyout menus (flyout-menus)
• Breadcrumbs (breadcrumbs)
• Collapsibles (collapsibles)
• Tabs (tabs)

Repository structure

.
├── index.html      # Site home page
├── components/     # Per-component gallery pages
├── assets/         # Site CSS, JS, fonts, images
└── layouts/        # The layouts themselves (each: main.html + assets/css/main.css)

The site is served by GitHub Pages directly from the main branch (Settings → Pages → Source: Deploy from a branch → main / root).

Stay in the loop and star/watch the repository for the upcoming layouts and components.