Screenshift 📱💻🖥️

A lightweight SCSS library for responsive container management with predefined breakpoints, media query helpers, and a built-in debug overlay for visualizing breakpoints.

🌟 Features

• 📐 Responsive container behavior with a single attribute
• 🔧 Predefined breakpoints for mobile-first or desktop-first workflows
• 🐞 Debug mode for visualizing current screen size
• ⚡ Easy integration with any SCSS-based project

📦 Installation

Pick your preferred method:

1# npm
2npm install screenshift --save
3

Or simply download the source and drop it into your SCSS directory.

🔧 Setup

Import Screenshift into your main SCSS file:

1@use "screenshift/scss";

💡 Usage

1. Responsive Container

Add data-screenshift to any container element to apply responsive defaults:

1<div data-screenshift>
2  <!-- Your content -->
3</div>

This will:

• Set container width to 100%
• Center content using auto margins
• Apply responsive max-width based on screen size
• Add contextual padding at each breakpoint

2. Media Query Helpers

Screenshift offers both mobile-first and desktop-first mixins:

🖥️ Desktop-First (max-width)

1@include max-mq("tablet") {
2  // Styles for ≤ 1024px
3}
4
5@include max-mq("mobile-lg") {
6  // Styles for ≤ 640px
7}

📱 Mobile-First (min-width)

1@include min-mq("desktop") {
2  // Styles for ≥ 1280px
3}
4
5@include min-mq("tablet") {
6  // Styles for ≥ 1024px
7}

3. Debug Mode 🔍

Use data-screenshift="debug" to display a visual overlay with:

• Current breakpoint label (e.g., mobile, tablet)
• Applied max-width
• Red dashed outline for easy identification

1<div data-screenshift="debug">
2  <!-- Debug container -->
3</div>

To disable, simply remove the "debug":

1<div data-screenshift>
2  <!-- Clean version -->
3</div>

📏 Breakpoints

Name	Width
desktop-xl	1536px
desktop-lg	1325px
desktop	1280px
tablet	1024px
small-tablet	768px
mobile-lg	640px
mobile	475px

🧩 Example

1.my-component {
2  display: flex;
3  flex-direction: row;
4
5  @include max-mq("tablet") {
6    flex-direction: column;
7  }
8
9  @include max-mq("mobile-lg") {
10    background: blue;
11  }
12
13  @include max-mq("mobile") {
14    background: yellow;
15  }
16}

🤝 Contributing

Pull requests and feedback are warmly welcome. Let's build this together!