DEV Community

Pixel Mosaic
Pixel Mosaic

Posted on

Building a Responsive Website Without a CSS Framework

#ai #webdev #programming #productivity

Responsive web design has become a standard expectation for modern websites. While frameworks like Bootstrap and Tailwind CSS make it easier to build responsive layouts, they also add abstractions, predefined styles, and extra dependencies that aren't always necessary.

Building a responsive website using plain HTML and CSS gives you complete control over your design, helps you understand CSS fundamentals, and often results in faster-loading websites.

In this article, we'll build a responsive layout without relying on any CSS framework.

Why Skip CSS Frameworks?

CSS frameworks are excellent productivity tools, but they're not always the best choice.

Some reasons to build without one include:

  • Smaller CSS bundle size
  • Better understanding of CSS fundamentals
  • Full design flexibility
  • No unused utility classes
  • Easier customization
  • Improved performance

If your project has a unique design or is relatively small, vanilla CSS is often more than enough.

Start with a Mobile-First Approach

Instead of designing for desktop first, begin with smaller screens.

.container {
    width: 100%;
    padding: 1rem;
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: auto;
    }
}
Enter fullscreen mode Exit fullscreen mode

This approach ensures your website works well on mobile devices before adding enhancements for larger screens.

Use Flexible Layouts

CSS Flexbox

Flexbox is perfect for one-dimensional layouts like navigation bars and card rows.

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

Each card can grow naturally.

.card {
    flex: 1 1 300px;
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid

Grid is ideal for two-dimensional layouts.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

This single line automatically adjusts the number of columns based on available screen space.

Responsive Images

Images should scale with their containers.

img {
    max-width: 100%;
    height: auto;
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

For better performance, use responsive image formats like WebP or AVIF whenever possible.

Fluid Typography

Avoid fixed font sizes everywhere.

Instead, use clamp().

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

p {
    font-size: clamp(1rem, 2vw, 1.2rem);
}
Enter fullscreen mode Exit fullscreen mode

Typography now adapts smoothly across devices.

Use Relative Units

Prefer:

  • rem
  • em
  • %
  • vw
  • vh

Instead of excessive use of:

  • px

Example:

section {
    padding: 4rem 2rem;
}
Enter fullscreen mode Exit fullscreen mode

Relative units create layouts that scale naturally.

Responsive Navigation

Desktop menus don't work well on small screens.

A simple responsive navigation could look like this.

nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
}

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
}
Enter fullscreen mode Exit fullscreen mode

For production websites, consider adding a hamburger menu using a little JavaScript.

Build Responsive Cards

Cards should automatically wrap.

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 280px;
}
Enter fullscreen mode Exit fullscreen mode

No complicated media queries are needed.

Don't Forget the Viewport Meta Tag

Without it, mobile browsers won't render your layout correctly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

Always include this inside the <head> section.

Useful Media Query Breakpoints

You don't need dozens of breakpoints.

A few practical ones are enough.

/* Tablets */
@media (min-width: 768px) {

}

/* Laptops */
@media (min-width: 1024px) {

}

/* Large desktops */
@media (min-width: 1280px) {

}
Enter fullscreen mode Exit fullscreen mode

Only add breakpoints when your layout actually needs them.

Improve Accessibility

Responsive design also means creating experiences that work for everyone.

Consider these best practices:

  • Maintain sufficient color contrast
  • Use semantic HTML
  • Ensure buttons are easy to tap
  • Add descriptive alt text to images
  • Make keyboard navigation possible
  • Avoid tiny font sizes

Accessibility and responsiveness go hand in hand.

Performance Matters

Since you're not using a framework, you can keep your CSS lightweight.

Some optimization tips:

  • Minify CSS for production
  • Remove unused styles
  • Optimize images
  • Lazy-load images where appropriate
  • Use modern image formats
  • Avoid unnecessary animations

Smaller files mean faster page loads.

Example Layout Structure 

<header>
    <nav>...</nav>
</header>

<main>
    <section class="hero"></section>

    <section class="grid">
        <article class="card"></article>
        <article class="card"></article>
        <article class="card"></article>
    </section>
</main>

<footer>
    ...
</footer>
Enter fullscreen mode Exit fullscreen mode

With Flexbox, Grid, and a few media queries, this structure becomes fully responsive.

Final Thoughts

You don't need a CSS framework to build responsive websites.

Modern CSS provides powerful tools like Flexbox, Grid, clamp(), media queries, and relative units that make responsive design both intuitive and efficient. By mastering these core features, you'll gain a deeper understanding of how layouts work and create websites that are lightweight, fast, and easier to maintain.

Frameworks are great when they solve real problems, but they shouldn't replace a solid understanding of CSS fundamentals. Start with vanilla CSS, and you'll be better equipped to choose the right tool for every project.

Top comments (0)