https://jsokit.com/blog/tags/css/ Recent content in Css on JsonKit Blog Hugo en © 2025 JsonKit Tue, 05 May 2026 20:05:30 +0000 https://jsokit.com/blog/posts/building-a-tailwind-css-class-name-generator-from-string-concatenation-to-visual-builder/ Tue, 05 May 2026 20:05:30 +0000 https://jsokit.com/blog/posts/building-a-tailwind-css-class-name-generator-from-string-concatenation-to-visual-builder/ Building a Tailwind CSS Class Name Generator: From String Concatenation to Visual Builder What’s the most painful part of writing Tailwind CSS? It’s not memorizing class names—it’s debugging a long string like flex justify-center items-center p-4 bg-blue-500 and not knowing which class is taking effect or which one is being overridden. Today let’s build a visual Tailwind class name generator that turns class assembly into building blocks. Core Design: State-Driven, Not String Concatenation Many people’s first instinct is string concatenation, but a better approach is using a Set for state management: https://jsokit.com/blog/posts/from-px-to-rem-unit-conversion-in-responsive-design/ Thu, 23 Apr 2026 12:37:47 +0000 https://jsokit.com/blog/posts/from-px-to-rem-unit-conversion-in-responsive-design/ From PX to REM: Unit Conversion in Responsive Design I inherited a legacy project with hardcoded px values everywhere. The product team wanted user-customizable font sizes. I opened the CSS files—2,000+ px values staring back at me. That was the day I truly understood the value of rem. I built a PX/REM Converter to handle this, and here’s what I learned. What REM Actually Means rem stands for “root em”—relative to the root element’s font-size. https://jsokit.com/blog/posts/css-loading-animation-generator-from-keyframes-to-performance-optimization/ Sat, 11 Apr 2026 17:14:25 +0000 https://jsokit.com/blog/posts/css-loading-animation-generator-from-keyframes-to-performance-optimization/ CSS Loading Animation Generator: From Keyframes to Performance Optimization A deep dive into CSS loading animations: keyframe principles, timing-function curves, GPU acceleration, and implementations of four classic spinner types. Why Loading Animations Matter There’s a golden rule in UX: Never let users stare at a static screen while waiting. Loading animations don’t just ease waiting anxiety—they provide essential feedback that “the system is working.” A good loading animation needs three qualities: smooth, unobtrusive, and performant. https://jsokit.com/blog/posts/image-filters-on-canvas-from-css-filter-to-convolution-kernels/ Sun, 22 Feb 2026 09:31:35 +0000 https://jsokit.com/blog/posts/image-filters-on-canvas-from-css-filter-to-convolution-kernels/ Image Filters on Canvas: From CSS filter to Convolution Kernels Photo filters look like magic, but underneath they’re just math on pixel values. I recently built an online image filter tool and want to share how the core rendering pipeline works — combining CSS filters for simple adjustments with raw pixel convolution for custom effects. Two Approaches to Image Filtering The browser gives us two paths for image filtering: CSS filter property — declarative, GPU-accelerated, great performance Canvas getImageData + manual pixel ops — full control, supports custom kernels In our tool, we use a hybrid: basic adjustments go through CSS filters, while sharpening uses a convolution kernel on raw pixel data. https://jsokit.com/blog/posts/css-grid-in-practice-from-repeat-to-grid-template-areas/ Mon, 16 Feb 2026 11:51:26 +0000 https://jsokit.com/blog/posts/css-grid-in-practice-from-repeat-to-grid-template-areas/ CSS Grid in Practice: From repeat() to grid-template-areas I was refactoring an admin dashboard recently. The layout seemed simple at first: fixed sidebar on the left, main content on the right. But the main area needed a stats section with 3 auto-fitting columns above a data table. After nesting Flexbox containers three levels deep, I realized—this is Grid’s home turf. Grid vs Flexbox: The Key Difference Flexbox is one-dimensional. Grid is two-dimensional. https://jsokit.com/blog/posts/css-variable-generator-from-hardcoded-values-to-design-systems/ Thu, 05 Feb 2026 14:32:25 +0000 https://jsokit.com/blog/posts/css-variable-generator-from-hardcoded-values-to-design-systems/ CSS Variable Generator: From Hardcoded Values to Design Systems Last year I inherited a legacy project. Opened the CSS file and found #3b82f6, #8b5cf6 scattered everywhere. Changing the primary color meant global search-and-replace, praying nothing was missed. After refactoring with CSS variables, changing colors finally became stress-free. The Nature of CSS Variables CSS Custom Properties (commonly called CSS variables) have simple syntax: :root { --color-primary: #3b82f6; } .button { background: var(--color-primary); } Unlike Sass/Less variables, CSS variables are runtime. https://jsokit.com/blog/posts/css-multi-layer-shadows-from-box-shadow-syntax-to-realistic-light-effects/ Wed, 04 Feb 2026 13:41:43 +0000 https://jsokit.com/blog/posts/css-multi-layer-shadows-from-box-shadow-syntax-to-realistic-light-effects/ CSS Multi-Layer Shadows: From box-shadow Syntax to Realistic Light Effects A product manager asked for “more depth” on a card component. I added a box-shadow. “Not premium enough,” he said. After studying Google Material Design’s shadow system, I realized shadows are more complex than they appear. The Full box-shadow Syntax Let’s start with the spec: box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>; Six parameters. The most overlooked one is spread-radius: https://jsokit.com/blog/posts/css-animation-timeline-editor-from-keyframes-to-smooth-animations/ Tue, 03 Feb 2026 12:17:24 +0000 https://jsokit.com/blog/posts/css-animation-timeline-editor-from-keyframes-to-smooth-animations/ CSS Animation Timeline Editor: From Keyframes to Smooth Animations Last week, I was building a landing page and the product team asked for “lively” animations. I thought writing a few CSS keyframes would be simple, but after 30 minutes of tweaking values and refreshing the page, the timing still felt off. So I built a visual editor to see changes in real-time. The Core: CSS Keyframes CSS animations are essentially a series of keyframes that the browser interpolates between: https://jsokit.com/blog/posts/color-format-conversion-implementation-of-hex-rgb-and-hsl/ Sat, 31 Jan 2026 10:29:14 +0000 https://jsokit.com/blog/posts/color-format-conversion-implementation-of-hex-rgb-and-hsl/ Color Format Conversion: Implementation of HEX, RGB, and HSL As a frontend developer, color format conversion is routine work. Designers give you HEX from Figma, you want HSL for CSS variables, and Canvas needs RGB. Without understanding the principles, it’s easy to make mistakes. Core Differences Between Color Models HEX: Compact Hexadecimal Notation HEX is essentially a hexadecimal shorthand for RGB: #FF8800 → RGB(255, 136, 0) Each pair of characters represents one color channel, ranging from 00 to FF (0-255). https://jsokit.com/blog/posts/browser-compatibility-query-tool-a-frontend-developers-essential-guide/ Mon, 26 Jan 2026 10:21:34 +0000 https://jsokit.com/blog/posts/browser-compatibility-query-tool-a-frontend-developers-essential-guide/ Browser Compatibility Query Tool: A Frontend Developer’s Essential Guide Written: May 7, 2026 at 10:30 One of the most frustrating challenges in frontend development is browser compatibility. You spend hours crafting a beautiful CSS Grid layout, only to find it breaks in your client’s Safari browser. Or you use Optional Chaining in production, and suddenly users report white screens. These issues can be prevented early with a browser compatibility query tool.