WiN-CSS Documentation

Quick Reference

All classes follow the pattern: {breakpoint}-{property}-{value}

Feature	Pattern	Values
Grid columns	{bp}-{n}	1-12
Font size	{bp}-f-{size}	tiny, small, medium, large, xlarge, huge
Padding	{bp}-p-{n}	0, 5, 10, 15, 20, 25, 30, 40, 50
Padding X/Y	{bp}-px-{n} {bp}-py-{n}	0, 5, 10, 15, 20, 25, 30, 40, 50
Margin	{bp}-m-{n}	0, 5, 10, 15, 20, 25, 30, 40, 50
Margin X/Y	{bp}-mx-{n} {bp}-my-{n}	0, 5, 10, 15, 20, 25, 30, 40, 50
Aspect ratio	{bp}-ar-{ratio}	1x1, 2x1, 1x2, 3x2, 2x3, 4x3, 3x4, 16x9, 9x16, 21x9
Containers	.row .container	Flex containers with wrapping

Breakpoints: sm (360px) md (760px) lg (1300px)

The Responsive Design Philosophy

vw-based Fonts

Font sizes use viewport width units (vw), so they scale proportionally with the browser window. A heading that takes up 1/3 of the screen width on mobile will still take up 1/3 on tablet.

em-based Spacing

Padding and margin use em units, which are relative to the current font size. When the font scales up, the spacing scales with it automatically.

vw + em = Proportional Scaling

When fonts scale with the viewport (vw), and spacing scales with the font (em), everything scales together:

Text line breaks stay consistent across screen sizes
Designs maintain their visual proportions
Components look "the same" at any viewport width
No need to manually adjust spacing at each breakpoint

See It In Action

Resize your browser window and watch this card scale proportionally:

Proportional Card

This entire card scales proportionally. The heading, body text, and all the padding maintain the same visual ratios at any viewport width.

Try resizing your browser to see the effect.

Breakpoints

WiN-CSS uses a mobile-first approach with three breakpoints:

360px+

760px+

1300px+

The lg Breakpoint: Lock-in

At the lg breakpoint (1300px), two important things happen:

Fonts Switch to px

Font sizes stop scaling and lock to fixed pixel values. This prevents text from becoming too large on wide monitors.

.row Gets max-width

The .row container gets max-width: 1300px and centers itself, preventing content from stretching edge-to-edge.

.container vs .row

Class	Behavior	Use Case
.container	Flex container, no max-width, no auto-centering	Full-width sections, nested grids
.row	Flex container, max-width 1300px at lg, auto-centered	Main content wrapper, page sections

Typography

Six font sizes that scale proportionally with the viewport:

sm-f-tiny 12px

sm-f-small 14px

sm-f-medium 16px

sm-f-large 20px

sm-f-xlarge 24px

sm-f-huge 32px

Responsive Typography

Change font sizes at different breakpoints:

<h1 class="sm-f-large md-f-xlarge lg-f-huge">Responsive Heading</h1>

This text is large on mobile, xlarge on tablet+

Grid System

A 12-column grid that adapts to breakpoints:

Basic Responsive Grid

<div class="row"> <div class="sm-12 md-6 lg-4">Column</div> <div class="sm-12 md-6 lg-4">Column</div> <div class="sm-12 md-12 lg-4">Column</div> </div>

sm-12 md-6 lg-4

sm-12 md-12 lg-4

Column Combinations

sm-6

sm-4

sm-3

sm-8

sm-4

Adding Gaps with Spacing

Use padding classes on columns to create gaps:

Spacing

Spacing uses em units, so it scales with font size. The number represents tenths of an em:

Suffix	Value
-0	0em
-5	0.5em
-10	1em
-15	1.5em
-20	2em
-25	2.5em
-30	3em
-40	4em
-50	5em

Padding Scale

Visual comparison of padding values:

sm-p-5

sm-p-10

sm-p-15

sm-p-20

sm-p-30

Directional Spacing

Control horizontal (x) and vertical (y) spacing independently:

sm-px-20 (horizontal)

Content

sm-py-20 (vertical)

Content

Responsive Spacing

Change spacing at different breakpoints:

<div class="sm-p-10 md-p-20 lg-p-30"> Padding grows at each breakpoint </div>

sm-p-10 md-p-20

Aspect Ratios

Lock elements to specific aspect ratios:

1:1

4:3

16:9

21:9

All Available Ratios

ar-1x1 Square
ar-2x1 Wide
ar-1x2 Tall
ar-3x2 Photo
ar-2x3 Portrait

ar-4x3 Classic
ar-3x4 Portrait
ar-16x9 Widescreen
ar-9x16 Vertical video
ar-21x9 Ultrawide

Responsive Aspect Ratio

Change aspect ratio at different breakpoints:

<div class="sm-ar-1x1 md-ar-16x9"> Square on mobile, widescreen on tablet+ </div>

sm-ar-1x1 md-ar-16x9

Real-World Example

A complete article card demonstrating grid, typography, spacing, and aspect ratios:

<div class="row">
  <article class="sm-12 md-6 lg-4 sm-p-10">
    <div class="card">
      <div class="sm-ar-16x9">
        <img src="..." alt="...">
      </div>
      <div class="sm-p-15">
        <h3 class="sm-f-large sm-m-0 sm-my-5">Title</h3>
        <p class="sm-f-medium sm-m-0 sm-my-10">...</p>
      </div>
    </div>
  </article>
</div>
        

Live Demo

Resize the browser to see how these cards scale proportionally:

Getting Started with WiN-CSS

Learn how to build proportionally-scaling responsive layouts with minimal effort.

The Power of vw + em

Understanding how viewport and em units work together for proportional scaling.

Responsive Without Complexity

Build mobile-first layouts that maintain visual harmony across all devices.