DMCSS - Device Media Cascading Style Sheet

DMCSS (Device Media Cascading Style Sheet) is a custom CSS transpiler designed to simplify and automate the creation of responsive, device-specific styles. It allows developers to target specific devices by screen dimensions using an easy-to-read syntax and provides modular, maintainable device-specific styles using .dmcss files.

Introduction

DMCSS is built to help you manage responsive styles in web applications by offering an intuitive way to define media queries based on device width and height. It works especially well in projects where precise device targeting is necessary, such as Progressive Web Apps (PWAs), mobile web applications, or cross-device applications.

With DMCSS, you can:

Write clean, device-specific styles using a custom $$device syntax.
Modularize your CSS by keeping device-specific styles in separate files within a device folder.
Automatically generate media queries based on device dimensions to ensure a seamless responsive design.

When to Use DMCSS

DMCSS is ideal for projects where you need precise control over the styles for specific devices. Examples include:

PWAs: Fine-tuning the user experience for mobile devices, tablets, and desktops, ensuring each device gets optimized styles.
Native-like Web Apps: If you're building a web app that needs to deliver a near-native experience for mobile and tablet users, DMCSS allows you to manage styles based on specific device dimensions.
Device-specific layouts: If your web app needs to target specific devices, such as iPhones, iPads, or Android tablets, DMCSS makes it easy to maintain these styles across multiple device types.

Key Advantages:

Device-Centric Approach: Create styles that target exact device dimensions using $$device.
Modular and Organized: Manage device-specific styles in separate .dmcss files, making your CSS cleaner and easier to maintain.
Optimized for Performance: DMCSS reduces CSS bloat by generating targeted media queries only for relevant devices.

Installation

1. Clone the Repository

To start using DMCSS, clone the repository:

git clone https://github.com/marcuwynu23/dmcss.git

2. Project Structure

Once installed, your project structure should look like this:

project/
│
├── input/
│   ├── main.dmcss        # Your main DMCSS file
│   └── device/
│       ├── iphone-xr.dmcss  # Device-specific styles for iPhone XR
│       ├── ipad.dmcss       # Device-specific styles for iPad
│
├── output/
│   └── style.css         # Generated CSS after transpilation
│
└── dmcss                 # DMCSS transpiler

3. Writing DMCSS

Main DMCSS file (main.dmcss): This file will contain the global styles and @import statements for device-specific styles.

Example of main.dmcss:

@import "colors.dmcss";

$$device(name: "iphone-xr", width: 414px, height: 896px)
$$device(name: "ipad", width: 768px, height: 1024px)

Device-Specific Files (iphone-xr.dmcss, ipad.dmcss): Each device-specific file contains styles that will be applied when the device matches the defined dimensions in main.dmcss.

Example of iphone-xr.dmcss:

body {
	background-color: var(--primary-color);
	font-size: 16px;
}
div {
	color: var(--primary-color);
	margin: 20px;
}

Example of ipad.dmcss:

body {
	background-color: lightgreen;
	font-size: 18px;
}
.p-3 {
	padding: 0.5em;
}

4. Running DMCSS

To transpile your DMCSS into regular CSS, run the transpiler:

dmcss input/main.dmcss output/style.css

This will generate the final style.css in the output directory with all the media queries based on device dimensions.

Output Example (`output/style.css`):

:root {
	--primary-color: lightblue;
}

@media (max-width: 414px) and (max-height: 896px) {
	.device-iphone-xr body {
		background-color: var(--primary-color);
		font-size: 16px;
	}
	.device-iphone-xr div {
		color: var(--primary-color);
		margin: 20px;
	}
}

@media (max-width: 768px) and (max-height: 1024px) {
	.device-ipad body {
		background-color: lightgreen;
		font-size: 18px;
	}
	.device-ipad .p-3 {
		padding: 0.5em;
	}
}

Project Structure

Your DMCSS project should contain the following directories:

input/main.dmcss: The main DMCSS file containing global styles and device-specific $$device declarations.
input/device/: A directory that contains .dmcss files for each device, such as iphone-xr.dmcss or ipad.dmcss. These files hold the device-specific styles.
output/style.css: The final CSS file generated by the transpiler. This file includes media queries for each device, along with the styles from the device folder.

Example:

project/
├── input/
│   ├── main.dmcss
│   └── device/
│       ├── iphone-xr.dmcss
│       └── ipad.dmcss
└── output/
    └── style.css

Features

Custom $$device Syntax: Define device-specific media queries easily with the $$device syntax.
Modular Device-Specific Styles: Store styles for each device in its own file within the device folder.
@import Support: Modularize your DMCSS code using @import, so you can split common styles like colors and variables into separate files.
Responsive Media Queries: Automatically generate media queries based on the width and height of the targeted device.
Reduced CSS Bloat: Only generate the CSS needed for specific devices, optimizing for performance.

When to Use

Multi-Device PWAs: If you’re building a PWA and want to fine-tune the user experience for different devices, DMCSS helps by offering exact media queries based on device dimensions.
Native-Like Web Apps: DMCSS can be used to ensure your web app looks and behaves like a native app on mobile devices by targeting specific screen dimensions.
Cross-Device Applications: If your web application targets a range of devices from phones to tablets and desktops, DMCSS ensures you can easily manage and scale your styles as new devices are added.

Best Practices

Keep device-specific styles modular: Each device-specific file (e.g., iphone-xr.dmcss, ipad.dmcss) should focus on styling that is unique to that device.
Global styles in main.dmcss: Use the main.dmcss file for global styles and import device-specific files as needed.
Reuse global styles with @import: Use @import for common styles like color variables, fonts, and layout rules to maintain a DRY (Don't Repeat Yourself) approach.

License

DMCSS is licensed under the MIT License. See the LICENSE file for more details.

marcuwynu23/dmcss