Easy onboarding in just 5 minutes!

Get started with PascalCSS without a build step.

PascalCSS is a modern, lightweight, utility-first CSS library with readable PascalCase naming. You add one stylesheet, write classes that look like real words, and ship.

Browse Class Reference Open Playground
Zero build
Instant setup from a single stylesheet
5700+
Responsive classes in v4.0.0
~46KB
Approximate gzipped delivery size
index.html
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/gae4it/pascal-css@4.0.0/pascal-css.css">

<div class="DisplayFlex JustifyContentCenter AlignItemsCenter Padding20 BgBlue500 FcWhite">
  <h1 class="Fs30 Fw700">Hello PascalCSS</h1>
</div>

Why teams pick it

Utility-first, but easier to read and easier to adopt.

The main advantage is not just file size. It is lower cognitive load: class names are explicit, the setup is immediate, and responsive utilities are already there.

🎯

Readable PascalCase naming

Utilities such as DisplayFlex and JustifyContentCenter are easier to scan in HTML than terse abbreviations.

📦

Zero build required

PascalCSS is pure CSS. You can use it from a CDN or local file without PostCSS, config files, or framework integration.

🎨

Modern CSS under the hood

It uses OKLCH colors, custom media, and responsive typography while keeping the public API simple.

📱

Mobile-first responsive prefixes

Sm:, Md:, Lg:, Xl:, and Xxl: let you express layout changes directly in the markup with predictable breakpoints.

⚡

Single-file distribution

The release artifact is ready to ship as one CSS file, which keeps adoption and deployment straightforward.

🌐

Modern browser target

It is a good fit for products targeting current Chrome, Safari, and Firefox versions where modern CSS is acceptable.

Naming conventions

Readable classes, predictable rules.

PascalCSS self-descriptive classes let you write correct markup right after reading the documentation.

Content Wrapper

Wrap your content in a dedicated wrapper. The final number indicates the max-width in px.

ContentWrapper640 ContentWrapper768 ContentWrapper960 ContentWrapper1000 ContentWrapper1024 ContentWrapper1140 ContentWrapper1260 ContentWrapper1366 ContentWrapper1450 ContentWrapper1600 ContentWrapper1920

Font Size and Weight

From Fs07 (0.7rem) to Fs100 (10rem). For weight, use Fw with a direct value, e.g. Fw500.

Fs07Fs14Fs30Fs100Fw400Fw500Fw700

Colors

The palette follows the 50, 100, 300, 500, 700, 900 scale for text, backgrounds, and borders.

FcOrange50FcRed700BgBlue500BcGray300

Spacing and lengths

Intuitive scales: 05 = 0.5rem, 10 = 1rem, 35 = 3.5rem. Directions use T, R, B, L. For width, the number represents the percentage (Width30 = 30%).

PaddingB25MarginT15Gap25Width30BorderRadiusTR20

Direct mapping to CSS

Utilities explicitly declare the applied CSS property.

DisplayFlexFlexDirectionColumnAlignSelfCenterVisibilityHiddenTextWrapBalanceBackgroundSizeCover

Responsive prefixes

Mobile-first by default. Add prefixes from Sm: to Xxl: to override styles at each breakpoint and up.

DisplayFlex Md:FlexDirectionRowWidth100 Lg:Width50Gap10 Xl:Gap25Sm:DisplayBlock

Display and visibility

Show, hide, and adapt UI parts across breakpoints without custom CSS.

DisplayNone Md:DisplayBlockHiddenSmVisibleLgOverflowHiddenPositionRelative

Responsive engine

Mobile-first without extra tooling.

v4.0.0 ships responsive prefixes across the utility surface, so layout changes stay inside the class list instead of jumping into custom CSS files.

Base0px

Mobile-first default styles

Sm:640px

Large phones and small tablets

Md:768px

Tablets and small laptops

Lg:1024px

Laptops and desktops

Xl:1280px

Large desktop layouts

Xxl:1536px

Ultra-wide screens

<div class="DisplayFlex FlexDirectionColumn Md:FlexDirectionRow Gap20 Padding20">
  <div class="Width100 Md:Width50 BgGray100 Padding15 BorderRadius10">Card 1</div>
  <div class="Width100 Md:Width50 BgGray100 Padding15 BorderRadius10">Card 2</div>
</div>
Responsive Engine

Fit and positioning

Best fit for teams that want speed without framework ceremony.

Who PascalCSS is for

  • •Rapid prototyping, MVPs, and landing pages where setup time matters.
  • •Teams that like utility-first CSS but want class names to read closer to real API names.
  • •Developers coming from Java, C#, Swift, or similar ecosystems where PascalCase already feels natural.
  • •Projects that target modern browsers and want to avoid build-chain complexity for styling.

Why it stands out

vs. Tailwind CSS

PascalCSS trades Tailwind’s terse shorthand and build-centric workflow for explicit naming and single-file delivery.

vs. Bootstrap

PascalCSS stays utility-first and CSS-only, which makes it lighter when you do not need a component or JavaScript layer.

Next step

Start with one link tag, then learn by trying.

The recommended flow is simple: install the stylesheet, scan the class reference, then test ideas in the playground. Get started in just 5 minutes.

Open Docs Try Live Example