https://github.com/marcuwynu23/dmcss

DMCSS (Device Media Cascading Style Sheet) is a custom CSS transpiler designed to simplify and automate the creation of responsive, device-specific styles.
https://github.com/marcuwynu23/dmcss

Last synced: 7 months ago
JSON representation

DMCSS (Device Media Cascading Style Sheet) is a custom CSS transpiler designed to simplify and automate the creation of responsive, device-specific styles.

• Host: GitHub
• URL: https://github.com/marcuwynu23/dmcss
• Owner: marcuwynu23
• License: mit
• Created: 2024-10-04T07:52:10.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-15T08:55:38.000Z (9 months ago)
• Last Synced: 2025-01-28T03:56:49.221Z (9 months ago)
• Language: Go
• Homepage:
• Size: 14.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  
 DMCSS 





  

  

  

  



**DMCSS** (Device Media Cascading Style Sheet) is a custom CSS transpiler designed to simplify and dmcssmate 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.

- dmcssmatically 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:

```bash

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`:

```css

@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`:

```css

body {

	background-color: var(--primary-color);

	font-size: 16px;

}

div {

	color: var(--primary-color);

	margin: 20px;

}

```

Example of `ipad.dmcss`:

```css

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:

```bash

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`):

```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**: dmcssmatically 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

1. **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.

2. **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.

3. **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](LICENSE) file for more details.