Here's a suggested README file for the NeatCSS framework with usage details, benefits, examples, and integration instructions for React, Angular, and Vue.

NeatCSS Framework

NeatCSS is a lightweight, responsive CSS framework built to simplify styling by allowing CSS properties to be applied directly via HTML attributes. Designed for rapid development, NeatCSS is ideal for projects needing efficient, responsive design control without extensive CSS files.

Features

• Attribute-Based Styling: Use shorthand attributes to apply CSS properties directly on elements.
• Responsive Design: Supports breakpoints for various screen sizes, from mobile (320px) to large desktop screens (1440px).
• Dynamic Responsiveness: Automatically adapts styles based on the current viewport width.
• Broad Property Coverage: Includes support for commonly-used CSS properties (e.g., padding, margin, background, animation, display, flex, grid, font properties).

Getting Started

Installation

You can install NeatCSS via npm:

npm install neatcss

Alternatively, include the JavaScript file directly in your project:

<script src="path-to-neatcss/neatcss.js"></script>

Basic Usage Example

With NeatCSS, you can style elements by adding attributes instead of traditional CSS selectors:

<!-- Button with padding, margin, and background color -->
<button p="15px" m="10px" bgc="#3498db" cl="#ffffff">Click Me</button>

<!-- Div with responsive margin and padding -->
<div mx-sm="20px" mx-md="30px" mx-lg="40px" px="10px" bgc="#e74c3c">
    Responsive Div
</div>

Screen Size Breakpoints

NeatCSS includes pre-defined breakpoints for responsive design. You can apply styles specific to breakpoints by adding suffixes:

| Breakpoint | Suffix | Screen Size | |------------|--------|-------------| | xs | -xs | 320px | | sm | -sm | 480px | | md | -md | 576px | | lg | -lg | 768px | | xl | -xl | 992px | | xxl | -xxl | 1200px | | xxxl | -xxxl | 1440px |

For example, to apply a padding of 20px on medium screens and 30px on large screens:

<div p-md="20px" p-lg="30px">Responsive Padding</div>

Benefits

1. Simplified Styling: NeatCSS allows inline styling with intuitive shorthand attributes, reducing the need for external CSS classes and files.
2. Improved Performance: By limiting the CSS selectors and using JavaScript to apply responsive styling, NeatCSS improves render times.
3. Enhanced Responsiveness: With multiple built-in breakpoints, adapting to various screen sizes becomes seamless.
4. Error Handling: NeatCSS includes error handling, displaying descriptive messages for unsupported styles to help debug styling issues.

Integration with JavaScript Frameworks

React Integration

To use NeatCSS in React, add neatcss.js as an import, then call applyStyles() after rendering components with NeatCSS attributes.

import React, { useEffect } from 'react';
import { applyStyles } from "neatcss";

const App = () => {
     useEffect(() => {
        applyStyles();
        window.addEventListener("resize", applyStyles);

        return () => window.removeEventListener("resize", applyStyles);
    }, []);

    return (
        <button p="15px" m="10px" bgc="#3498db" cl="#ffffff">Click Me</button>
    );
};

export default App;

Angular Integration

In Angular, import applyStyles() in your component and call it in ngAfterViewInit() to apply NeatCSS attributes after rendering.

// app.component.ts
import { Component, HostListener, OnInit, OnDestroy } from '@angular/core';
import { applyStyles } from 'neatcss';

@Component({
  selector: 'app-root',
  template: `<button p="15px" m="10px" bgc="#3498db" cl="#ffffff">Click Me</button>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  ngOnInit() {
    applyStyles();
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
    applyStyles();
  }

  ngOnDestroy() {
    window.removeEventListener('resize', applyStyles);
  }
}

Vue Integration

For Vue, add neatcss.js and use the mounted lifecycle method to apply styles.

<template>
  <button p="15px" m="10px" bgc="#3498db" cl="#ffffff">Click Me</button>
</template>

<script>
import { onMounted, onBeforeUnmount } from "vue";
import { applyStyles } from "neatcss";

export default {
  name: "App",
  setup() {
    onMounted(() => {
       applyStyles();
       window.addEventListener("resize", applyStyles);
    });

    onBeforeUnmount(() => {
       window.removeEventListener("resize", applyStyles);
    });
  },
};
</script>

<style scoped>
/* Any additional styles */
</style>

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/add-components).
3. Commit your changes.
4. Open a pull request.

For any issues or suggestions, please submit a GitHub issue.

License

This project is licensed under the MIT License.