Chapter 39: Responsive Design in Go

sm, md, lg, xl, 2xl prefixes explained. In this chapter, you will learn responsive design in depth with Go code examples, explanations, and best practices.

Overview

This chapter covers responsive design for Kungfu.js developers using Go. We will start with the basics, move through practical examples, and end with advanced techniques and common pitfalls.

Why This Matters

Understanding responsive design is essential because it is a core part of building web applications. Every real-world app needs to handle sm, md, lg, xl, 2xl prefixes explained. Skipping this chapter would leave a gap in your knowledge that would cause problems later.

Code Example

Here is how the CSS engine works in Go:

const { compileCss } = require('@kungfu/core');

// Compile class string to CSS
const css = compileCss('flex p-4 text-red-500 hover:bg-blue-200');
// Returns: .flex { display: flex; } .p-4 { padding: 1rem; } ...

How the CSS Engine Works

The Kungfu.js CSS engine scans your HTML/JSX/TSX files for class names. When it finds class="flex p-4", it generates CSS rules for .flex and .p-4. Unused classes are not included, keeping the CSS bundle minimal.

This is similar to Tailwind CSS, but it runs in Rust instead of Node.js, making it much faster. No PostCSS configuration, no Tailwind config file, no Node.js dependency.

Common Mistakes

• Not reading the documentation: Always check the API reference when something does not work as expected.
• Skipping security: Never disable the default middleware unless you have a very good reason. Security is not optional.
• Not testing: Write tests for your handlers. Kungfu.js makes this easy with the built-in test utilities.

Summary

In this chapter, you learned about responsive design in Go. You saw code examples, understood how things work under the hood, and learned about common mistakes to avoid.

What is Next?

In chapter 40, we will cover .kng File Format: data() and template() functions for SSR.