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

#css #framework #responsive #gridlayout

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's 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:

① No upfront learning curve — You understand everything as you use it, gradually building a full picture.

② All design decisions are yours — No "override something I never asked for" situations.

③ AI-friendly — The entire file can be read in one pass before generating HTML, eliminating the risk of hallucinated class names.

④ No build tools, no dependencies — No Sass, PostCSS, or Tailwind pipeline. Just an editor and browser DevTools.

What One File Covers

"Starting minimal" doesn't mean leaving things out. onepg-base.css covers everything a business application screen needs:

Feature	Details
CSS Reset	Unified `box-sizing`, font inheritance
Page Layout	Fixed header/footer, fluid main content
Grid Layout	12-column system
Responsive	3 breakpoints: PC, tablet, smartphone
Form Elements	Text, select, checkbox, radio, button
Table	Borders, striped rows
Utilities	Text alignment, alert colors, link-style buttons
Item Highlight	Warning/error background colors

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">
    <div class="item-head"><label>Full Name</label></div>
    <div class="item-body"><input type="text" name="user_nm"></div>
  </div>
  <div class="grid-col-3">
    <div class="item-head"><label>Country</label></div>
    <div class="item-body"><select name="country_cs">...</select></div>
  </div>
  <div class="grid-col-6">
    <div class="item-head"><label>Email</label></div>
    <div class="item-body"><input type="text" name="email"></div>
  </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 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."

The files are available here: