THIS PROJECT IS UNDER DEVELOPMENT.
DO NOT USE IT IN PRODUCTION.
It is not feature complete.
2026-03-02

PolarCSS

A modern, customizable, and lightweight CSS Framework built with SCSS.

PolarCSS provides a comprehensive set of utility classes, grid systems, flexbox helpers, and pre-designed components like cards, buttons, and navbars. It leverages modern CSS features like CSS variables, relative colors, and view-driven animations.

INSTALLATION

You can install PolarCSS via npm or Composer.

Using npm:

npm install polarcss

Using Composer:

composer require northwebsolutions/polarcss

FEATURES

PolarCSS includes modular SCSS files that are compiled into a single main stylesheet. Some of the core features include:

• Grid & Flexbox: Responsive grid system and flex utility classes for easy layout management.
• Modern Typography: Integrated with the Switzer variable font for smooth font-weight transitions. Provides utility classes for text sizes, alignments, and colors.
• Component Styling: Pre-built styles for buttons, cards, progress bars, tags, and navigation bars.
• Utility Classes: Extensive spacing utilities (margins and paddings), background colors, shadows, and borders.
• Animations: Built-in CSS animations including pulse, fade-in, pop-in, and view-timeline animations.
• CSS Variables First: Heavily relies on CSS custom properties for easy theming (e.g., overriding primary, background, and text colors).

---

USAGE & DEVELOPMENT

The framework's source files are located in src/scss/. The main entry point is src/scss/main.scss.

To work with the framework locally and compile the SCSS files, you can use the built-in npm scripts:

1. Install development dependencies:

   npm install
   

2. Compile SCSS (Expanded):

   npm run build
   

3. Compile SCSS (Minified):

   npm run build:min
   

4. Build both Expanded & Minified:

   npm run build:all
   

5. Watch Mode: Automatically compile SCSS to CSS on file changes during development:

   npm run watch
   

---

FONTS

This project uses the Switzer font family.

• Designed by: Jérémie Hornus
• URL: https://www.fontshare.com/fonts/switzer
• Copyright: (c) 2026 Indian Type Foundry

LICENSE

This project is licensed under the Mozilla Public License Version 2.0 (MPL-2.0). See the LICENSE file for more details.

---

Author: Gabor Eszaki (info@northweb.co.uk) Repository: https://github.com/northwebsolutions/polarcss