Mastors Fluider v1.5 - Complete Documentation

Overview

Mastors Fluider is a comprehensive breakpoint utility system designed for modern responsive web design. Built with accessibility and developer experience in mind, it provides both SCSS mixins and CSS utility classes for maximum flexibility.

Mobile-First

Built with progressive enhancement, starting from mobile and scaling up

Accessible

Uses em units to respect user font-size preferences

Dual Implementation

Choose between SCSS mixins or CSS utility classes

Lightweight

SCSS: ~4.72KB | CSS: ~10.2KB (3-4KB gzipped)

Customizable

Easy to extend with custom breakpoints and values

12 Breakpoints

From mobile to ultra-wide displays (520px - 1920px+)

Perfect for:

Responsive web apps, component libraries, design systems, static websites, and rapid prototyping.

Installation

Via CDN (Recommended for Quick Start)

Add this link in your HTML <head>:

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/KEHEM-IT/Mastors-Fluider@main/mastors-fluider.css">

Via NPM

Install the package:

BASH

npm i mastors-fluider

Then import in your CSS or SCSS file:

CSS

@import 'mastors-fluider';

For SCSS Projects

Import the breakpoints utility in your SCSS file:

SCSS

@use 'mastors-fluider/mastors-fluider' as *;

// Or with a custom namespace
@use 'mastors-fluider/mastors-fluider' as bp;

// Usage: @include bp.break-up(md) { ... }

For CSS Projects

Link directly in your HTML:

HTML

<link rel="stylesheet" href="path/to/node_modules/mastors-fluider/mastors-fluider.css">

Installation Complete!

You can now use breakpoint mixins in SCSS or utility classes in HTML.

Available Breakpoints

Core Breakpoints

Name	Value	Pixels	Use Case
`xs`	`0`	0px	Extra small devices (base styles)
`sm`	`36em`	576px	Small devices (large phones)
`md`	`48em`	768px	Medium devices (tablets)
`lg`	`64em`	1024px	Large devices (laptops)
`xl`	`75em`	1200px	Extra large devices (desktops)
`2xl`	`96em`	1536px	2X large devices (large desktops)

MASTORSCDN Custom Breakpoints

Name	Value	Pixels	Use Case
`mobile`	`32.5em`	520px	Mobile devices
`tablet`	`48em`	768px	Tablets
`laptop`	`64em`	1024px	Laptops
`desktop`	`81.25em`	1300px	Desktop screens
`wide-screen`	`96.25em`	1540px	Wide screens
`ultra`	`120em`	1920px	Ultra-wide/4K displays

Why em units?

Em units respect user browser font-size settings, making your breakpoints more accessible. 1em = 16px by default.

SCSS Mixins & Functions

Powerful SCSS mixins for flexible responsive design. Full documentation available in the GitHub repository.

🛠️ Main Mixins

`breakpoint()`

Main breakpoint mixin with full control over size, type, and orientation.

Parameters:

• $size - Breakpoint name (required)
• $type - 'min' or 'max' (optional)
• $orientation - portrait/landscape (optional)

@include breakpoint(md) {
          padding: 2rem;
        }
        
        @include breakpoint(lg, 'max') {
          height: 60px;
        }
        
        @include breakpoint(md, 'min', landscape) {
          grid-template-columns: repeat(3, 1fr);
        }

`break-up()`

Mobile-first shorthand for min-width queries. Applies styles from breakpoint and up.

Usage:

.card {
          padding: 1rem;
          
          @include break-up(md) { // 768px+
            padding: 2rem;
          }
          
          @include break-up(xl) { // 1200px+
            padding: 3rem;
          }
        }

💡 Most common mixin for mobile-first design

`break-down()`

Desktop-first shorthand for max-width queries. Applies styles up to the breakpoint.

Usage:

.sidebar {
          width: 300px;
          
          @include break-down(lg) { // ≤1024px
            width: 250px;
          }
          
          @include break-down(md) { // ≤768px
            width: 100%;
          }
        }

`break-between()`

Apply styles between two breakpoints only.

Usage:

.banner {
          @include break-between(md, xl) {
            font-size: 2rem; // 768px to 1200px
          }
        }

Compiles to:
@media (min-width: 48em) and (max-width: 75em)

`break-only()`

Apply styles only within a specific breakpoint range.

Usage:

.notification {
          @include break-only(md) {
            position: fixed; // 768px to 1023px
          }
        }

💡 Targets current breakpoint to next breakpoint - 1px

`custom-breakpoint()`

Use custom width values not in the predefined breakpoints map.

Parameters:

• $width - Custom width in em, px, or rem
• $type - 'min' or 'max' (optional)

.special-layout {
          @include custom-breakpoint(50em) {
            display: grid; // 800px+
          }
          
          @include custom-breakpoint(900px, 'max') {
            display: block; // ≤900px
          }
        }

📦 SCSS Functions

`get-breakpoint()`

Retrieve the value of a breakpoint from the $breakpoints map.

Basic Usage:

$tablet-width: get-breakpoint(tablet);
        // Returns: 48em
        
        .custom-element {
          max-width: $tablet-width;
        }

Advanced Use Cases:

// In calculations
        $custom-width: get-breakpoint(md) + 5em;
        
        // Pass to JavaScript
        :root {
          --breakpoint-md: #{get-breakpoint(md)};
        }
        
        // Store in variables
        $mobile: get-breakpoint(mobile);
        $desktop: get-breakpoint(desktop);

Use Cases:

• Store breakpoint values in variables
• Use in calculations and mathematical operations
• Pass to JavaScript via CSS custom properties
• Create dynamic, reusable component styles

Quick Reference

Mixin	Purpose	Example
`break-up($size)`	Mobile-first (min-width)	`@include break-up(md)`
`break-down($size)`	Desktop-first (max-width)	`@include break-down(lg)`
`break-between($min, $max)`	Between two breakpoints	`@include break-between(md, xl)`
`break-only($size)`	Single breakpoint range	`@include break-only(md)`
`custom-breakpoint($width)`	Custom width values	`@include custom-breakpoint(50em)`
`get-breakpoint($size)`	Get breakpoint value	`$width: get-breakpoint(md)`

CSS Utility Classes

Ready-to-use utility classes for rapid responsive development without SCSS compilation.

Mobile-First Classes (break-up-*)

Show elements at breakpoint and above (min-width).

Class	Breakpoint	Shows At
`.break-up-xs`	0px	Always visible
`.break-up-sm`	576px+	Small devices and up
`.break-up-md`	768px+	Medium devices and up
`.break-up-lg`	1024px+	Large devices and up
`.break-up-xl`	1200px+	Extra large devices and up
`.break-up-2xl`	1536px+	2X large devices and up
`.break-up-mobile`	520px+	Mobile and up
`.break-up-tablet`	768px+	Tablet and up
`.break-up-laptop`	1024px+	Laptop and up
`.break-up-desktop`	1300px+	Desktop and up
`.break-up-wide-screen`	1540px+	Wide screen and up
`.break-up-ultra`	1920px+	Ultra-wide and up

Example:

<!-- Hidden on mobile, visible on tablet and up -->
        <div class="break-up-tablet">
          Visible on tablets and larger screens
        </div>

Mobile-First Hide Classes (hide-up-*)

Hide elements at breakpoint and above (min-width).

Class	Breakpoint	Hides At
`.hide-up-sm`	576px+	Hidden from small devices up
`.hide-up-md`	768px+	Hidden from medium devices up
`.hide-up-lg`	1024px+	Hidden from large devices up
`.hide-up-xl`	1200px+	Hidden from XL devices up
`.hide-up-2xl`	1536px+	Hidden from 2XL devices up

Example:

<!-- Visible on mobile, hidden on tablet and up -->
        <button class="hide-up-tablet">Mobile Menu</button>

Desktop-First Classes (break-down-*)

Show elements at breakpoint and below (max-width).

Class	Breakpoint	Shows At
`.break-down-sm`	576px and below	Small devices and smaller
`.break-down-md`	768px and below	Medium devices and smaller
`.break-down-lg`	1024px and below	Large devices and smaller
`.break-down-xl`	1200px and below	XL devices and smaller
`.break-down-2xl`	1536px and below	2XL devices and smaller
`.break-down-mobile`	520px and below	Mobile only
`.break-down-tablet`	768px and below	Tablet and smaller
`.break-down-laptop`	1024px and below	Laptop and smaller
`.break-down-desktop`	1300px and below	Desktop and smaller

Example:

<!-- Visible up to 768px, hidden on larger screens -->
        <nav class="break-down-tablet">Mobile Navigation</nav>

Desktop-First Hide Classes (hide-down-*)

Hide elements at breakpoint and below (max-width).

Class	Breakpoint	Hides At
`.hide-down-sm`	576px and below	Hidden on small and smaller
`.hide-down-md`	768px and below	Hidden on medium and smaller
`.hide-down-lg`	1024px and below	Hidden on large and smaller
`.hide-down-xl`	1200px and below	Hidden on XL and smaller
`.hide-down-2xl`	1536px and below	Hidden on 2XL and smaller

Example:

<!-- Hidden on mobile, visible on desktop -->
        <aside class="hide-down-laptop">Desktop Sidebar</aside>

Breakpoint-Only Classes (break-only-*)

Show elements only within a specific breakpoint range.

Class	Range	Shows Between
`.break-only-xs`	0-575px	Extra small only
`.break-only-sm`	576-767px	Small only
`.break-only-md`	768-1023px	Medium only
`.break-only-lg`	1024-1199px	Large only
`.break-only-xl`	1200-1535px	Extra large only
`.break-only-2xl`	1536px+	2X large only
`.break-only-mobile`	520-767px	Mobile range only
`.break-only-tablet`	768-1023px	Tablet range only
`.break-only-laptop`	1024-1299px	Laptop range only
`.break-only-desktop`	1300-1539px	Desktop range only
`.break-only-wide-screen`	1540-1919px	Wide screen range only
`.break-only-ultra`	1920px+	Ultra-wide only

Example:

<!-- Only visible on tablets (768-1023px) -->
        <div class="break-only-tablet">Tablet-specific content</div>

Breakpoint-Only Hide Classes (hide-only-*) are also available to hide elements only within specific ranges.

Orientation Classes

Control visibility based on device orientation.

Class	Shows When
`.break-portrait`	Portrait orientation
`.break-landscape`	Landscape orientation
`.hide-portrait`	Hide in portrait
`.hide-landscape`	Hide in landscape
`.break-md-landscape`	Medium+ and landscape
`.break-lg-portrait`	Large+ and portrait

Examples:

<!-- Only visible in landscape mode -->
        <div class="break-landscape">
          Landscape-optimized video player
        </div>
        
        <!-- Only visible in portrait on tablets+ -->
        <div class="break-lg-portrait">
          Portrait sidebar for large screens
        </div>

Display Type Modifiers

Combine with breakpoint classes to set specific display types.

Modifier	Display Value
`.inline`	display: inline !important
`.inline-block`	display: inline-block !important
`.flex`	display: flex !important
`.grid`	display: grid !important

Examples:

<!-- Block on mobile, flex on medium+ -->
        <div class="break-up-md flex">
          Responsive flex container
        </div>
        
        <!-- Block on mobile, grid on large+ -->
        <div class="break-up-lg grid">
          Responsive grid container
        </div>

Note

Utility classes use !important to ensure they override component styles. This is intentional for maximum flexibility in responsive design.

Real-World Examples

1. Responsive Navigation

Mobile menu toggle button appears on small screens, while full navigation shows on larger screens.

HTML

<!-- Mobile menu toggle -->
        <button class="menu-toggle hide-up-lg" 
                onclick="toggleMenu()">
          ☰ Menu
        </button>
        
        <!-- Mobile dropdown menu -->
        <nav id="mobileMenu" 
             class="mobile-menu hide-up-lg">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </nav>
        
        <!-- Desktop navigation -->
        <nav class="main-nav hide-down-lg">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </nav>
        
        <script>
        function toggleMenu() {
          const menu = document.getElementById('mobileMenu');
          menu.classList.toggle('active');
        }
        </script>

LIVE OUTPUT

2. Responsive Product Grid

Grid that adapts from 1 column on mobile to 4 columns on extra-large screens.

CSS

.product-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1rem;
        }
        
        /* 576px+ (sm) */
        @media (min-width: 36em) {
          .product-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        
        /* 768px+ (md) */
        @media (min-width: 48em) {
          .product-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
          }
        }
        
        /* 1200px+ (xl) */
        @media (min-width: 75em) {
          .product-grid {
            grid-template-columns: repeat(4, 1fr);
          }
        }

LIVE OUTPUT

3. Show/Hide Utilities

Control element visibility across different screen sizes using Mastors Fluider classes.

HTML

<!-- Show only on mobile -->
        <div class="hide-up-md">
          📱 Mobile Only (0-767px)
        </div>
        
        <!-- Show only on tablet+ -->
        <div class="break-up-md hide-up-xl">
          💻 Tablet & Laptop (768-1199px)
        </div>
        
        <!-- Show only on desktop -->
        <div class="break-up-xl">
          🖥️ Desktop Only (1200px+)
        </div>

LIVE OUTPUT

Changelog

v1.5 December 31, 2024

Performance Release

Reduced File Size - NPM package now only 4.7 KB (down from ~5 KB)
Optimized SCSS - Cleaner, more efficient code structure
Faster Load Times - Smaller footprint means quicker page loads
Same Functionality - All features from v1.0.5 remain intact

v1.0.5 December 26, 2024

NPM Package Release

Added NPM package for easy installation
Updated readme.md with comprehensive documentation
Enhanced documentation with better examples and structure
Added CDN support via jsDelivr

v1.0.0 Initial Release

Initial Release

12 predefined breakpoints (6 core + 6 custom)
6 SCSS mixins for flexible responsive design
100+ CSS utility classes
Mobile-first approach with em units

File Sizes

mastors-fluider.scss: 4.7KB (v1.5) | ~5KB (v1.0.5)

mastors-fluider.css: ~11KB (~3-4KB gzipped)

Frequently Asked Questions

Why em units instead of px?

Accessibility. Em units respect user browser font-size settings. If a user increases their font size for readability, breakpoints using em will adjust accordingly. Conversion: 1em = 16px (browser default).

Can I mix SCSS and CSS classes?

Absolutely! Use SCSS mixins for custom components and CSS utility classes for rapid layout adjustments. This gives you the best of both worlds.

What's the difference between break-down and break-up?

break-up-md: Shows at 768px and above (mobile-first)
break-down-md: Shows at 768px and below (desktop-first)

Why does the CSS file use !important?

Utility classes use !important to ensure they override component styles, following the utility-first pattern. This is intentional for maximum flexibility.

Can I use with JavaScript frameworks?

Yes! Works seamlessly with:

React

Vue

Angular

Svelte

Vanilla JS

And more