v1.0.0 Now Available

Build Stunning Interfaces with MastorsCDN

A powerful, lightweight SCSS mixin and CSS utility library designed for CDN delivery. Create beautiful, responsive designs with minimal effort.

Get Started Documentation

50KB

Minified Size

100+

Utility Classes

Core Libraries

MIT

Open Source

styles.scss

@import 'mastors-fluider';
@import 'mastors-gridder';

.hero {
  @include fluid-size(padding, 2rem, 4rem);
  @include grid-container(12, 1rem);
  
  .title {
    @include fluid-font(2rem, 4rem);
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Features

Everything You Need to Build Amazing UIs

Powerful utilities and mixins that streamline your development workflow

Lightweight

Only 50KB minified. Zero dependencies. Lightning-fast load times for optimal performance.

Fully Responsive

Mobile-first approach with fluid typography and responsive grid systems that adapt to any screen.

Modular Design

Import only what you need. Tree-shakeable modules keep your bundle size minimal.

Theming System

Built-in dark mode support with customizable color schemes and design tokens.

SCSS Mixins

Powerful mixins for common patterns. Write less code, maintain consistency effortlessly.

CDN Ready

Drop-in via CDN or install via NPM. Get started in seconds with zero configuration.

Core Libraries

Powerful Tools in Your Arsenal

Two specialized libraries working in perfect harmony

Mastors Fluider

Create fluid, responsive typography and spacing that scales beautifully across all screen sizes with mathematical precision.

Fluid Typography

Dynamic Spacing

Viewport-based Scaling

CSS clamp() Support

@include fluid-font(1rem, 2rem);
@include fluid-size(padding, 1rem, 3rem);

Documentation NPM Package

Mastors Gridder

Advanced CSS Grid system with powerful mixins for creating complex, responsive layouts with minimal code.

12-Column Grid System

Flexbox Utilities

Auto-placement

Gap Controls

@include grid-container(12, 1.5rem);
@include grid-item(1, 4, 1, 2);

Documentation NPM Package

Installation

Get Started in Seconds

Choose your preferred installation method

NPM Installation

Install via NPM for use in your build process

npm install mastorscdn

CDN Link

Quick drop-in via CDN for static projects

<link href="https://cdn.mastorscdn.com/mastorscdn.css" rel="stylesheet">

Usage Example

@import 'mastors-fluider';
@import 'mastors-gridder';

.container {
  @include grid-container(12, 1.5rem);
  @include fluid-size(padding, 1rem, 3rem);
  
  .card {
    @include grid-item(1, 4, 1, 2);
    @include fluid-size(padding, 1rem, 2rem);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    
    h2 {
      @include fluid-font(1.5rem, 2.5rem);
      color: var(--text-primary);
    }
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  padding: clamp(1rem, 2vw + 1rem, 3rem);
}

.card {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  padding: clamp(1rem, 1vw + 1rem, 2rem);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
}

.card h2 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  color: var(--text-primary);
}

<div class="container">
  <div class="card">
    <h2>Card Title</h2>
    <p>Beautiful, responsive card with fluid sizing.</p>
  </div>
  <div class="card">
    <h2>Another Card</h2>
    <p>Scales perfectly across all devices.</p>
  </div>
</div>

Card Title

Beautiful, responsive card with fluid sizing.

Another Card

Scales perfectly across all devices.

Showcase

Built with MastorsCDN

See what's possible with our library

E-Commerce Platform

Modern shopping experience with fluid layouts and responsive grids

Fluider Gridder Dark Mode

Analytics Dashboard

Data visualization with adaptive typography and grid layouts

Responsive Gridder Utilities

Blog Platform

Beautiful content presentation with fluid typography

Fluider Typography Minimal