Single-File CSS Design - I built a lightweight Java framework for Japan's 'SI' projects (third attempt in 10 years) #008

Source: Dev.to

Introduction

In previous articles I covered the Java and JavaScript side of SIcore. This time, it’s all about CSS.

Have you ever spent hours fighting a CSS framework just to apply your own design? You add !important, crank up selector specificity, and still lose — all because the framework’s defaults are baked in too deep.

In Java and JavaScript, “correct” is largely objective. In CSS, there is no single correct answer — design varies from project to project. Adopting a large CSS framework means inheriting someone else’s design decisions, and every time your project’s look diverges from those defaults, you end up in an override war.

SIcore takes the opposite approach: start small and build only what you need. The entire styling for a business application is covered by a single CSS file of about 400 lines. This article explains the philosophy and structure behind that design.

What This Article Covers

• Why “start minimal” makes sense for business apps
• What one file covers
• 12‑column grid and 3‑stage responsive behavior
• Unified form‑element styling
• CSS custom properties for project‑wide customization

Why Start Minimal?

The biggest cost of adopting a CSS framework isn’t the file size — it’s learning what is where, combined with a cost that is unique to CSS: inheriting someone else’s design decisions.

• Bootstrap – button border‑radius is 4px or 6px — irrelevant to your project, yet it exists as a “default” that you must override.
• Tailwind CSS – avoids the override problem with utility classes, but changing colors or sizes requires editing tailwind.config.js and running a build.

One framework forces overrides; the other forces builds. Either way, you’re adapting to the framework’s rules rather than your own.

Starting minimal avoids this entirely

What One File Covers

“Starting minimal” doesn’t mean leaving things out. onepg‑base.css covers everything a business‑application screen needs:

Bootstrap is roughly 10 000 lines. Tailwind’s output varies but reaches thousands of lines for a typical project. When you keep only what a business app actually uses, 400 lines is enough.

12‑Column Grid and Responsive Behavior

Place a label in item-head and an input element in item-body. On PC they render side‑by‑side. Arrange grid-col‑N divs so the N values sum to 12 — the same 12‑column layout familiar from Bootstrap.

<div class="grid-row">
  <div class="grid-col-3 item-head">Full Name</div>
  <div class="grid-col-3 item-body"><input type="text" /></div>

  <div class="grid-col-3 item-head">Country</div>
  <div class="grid-col-3 item-body"><select>…</select></div>

  <div class="grid-col-6 item-head">Email</div>
  <div class="grid-col-6 item-body"><input type="email" /></div>
</div>

Two media queries produce three layout stages:

PC (side‑by‑side)

Label and input render horizontally. The example above shows a 3‑column layout.

| grid-col-3 | grid-col-3 | grid-col-6 |
|-----------|-----------|------------|
| Full Name [_____] | Country [______▼] | Email [_______________________________] |

Tablet (stacked within columns)

Column widths are preserved, but the label stacks above the input inside each column.

| Full Name | Country | Email |
| [_________] | [_______▼] | [_____________________________] |

Smartphone (full‑width stack)

All columns expand to full width, resulting in a single‑column vertical layout.

Full Name
[_________]
Country
[_______▼]
Email
[_____________________________]

Unified Form Element Styling

Business apps display large numbers of text boxes, select boxes, and buttons side by side. SIcore unifies their height, border, border‑radius, padding, and focus style across all form elements so the screen looks consistent without per‑element overrides. Disabled and focused states are also covered by default — no extra work needed.

Validation‑error highlights are applied automatically by the JavaScript framework, using dedicated CSS classes. See the CSS class reference for details on each class.

CSS Custom Properties for Project‑Wide Customization

All style values (colors, sizes, spacing) are consolidated in CSS custom properties (:root). Changing the color scheme for a new project is a single block of variable overrides — no hunting through scattered selectors.

Variable names follow the convention --onepg-base--category--purpose, so the intent is clear from the name alone. See the CSS class reference for the full list.

Conclusion

When you enumerate only the styles a business app actually needs, 400 lines turns out to be surprisingly sufficient.

CSS is where d

Design gets personal, far more so than Java or JavaScript

That’s exactly why starting minimal matters most in CSS — you keep every design decision in your own hands. Start small, grow only what you need. This approach is especially effective in SI projects and AI‑assisted development.

• A single 400‑line file
• Simple class names
• Zero build steps

Read it once and you’ll likely think: “I can customize this.”

Files

• CSS file (including grid media queries)
• CSS class reference

Related Articles

Check out the other articles in this series!

SIcore Framework Links

All implementation code and documentation are available here:

• GitHub repository
• How to verify sample screens (VS Code)
• Getting started with AI development

Thank you for reading!

❤ Reactions are appreciated!