NeatCSS Framework

NeatCSS is a lightweight, attribute-based CSS framework designed for easy and efficient styling directly within HTML elements.

Documentation

For complete documentation, usage examples, and API reference, visit the NeatCSS Documentation.

Why NeatCSS?

NeatCSS simplifies styling by allowing developers to use custom attributes directly within HTML elements. This approach can reduce the dependency on external CSS classes, make inline styles more manageable, and streamline style updates in dynamic applications.

Key Benefits

• Attribute-Based Styling: Apply styles directly in HTML attributes, making the HTML structure cleaner and reducing the need for excessive CSS classes.
• Responsive Design Support: Built-in media query support for different screen sizes, making responsive design easier and more intuitive.
• JavaScript Integration: Seamlessly integrates with JavaScript frameworks (React, Vue, Angular) to provide dynamic and reactive styling options.
• Highly Customizable: Allows developers to add custom properties and configure styles to match their project requirements.
• Efficiency in Large Applications: Reduces the need for CSS class duplication, which can simplify maintenance and improve performance in applications with a large number of components.

NeatCSS is perfect for developers who want to simplify styling and speed up development without compromising on responsiveness and flexibility.

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>

Integration with JavaScript Frameworks

React Integration

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

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

const App = () => {
    useEffect(() => {
        initializeNeatCss();

        return () => initializeNeatCss();
    }, []);

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

export default App;

React.js In React, use the useEffect hook to run initializeNeatCss when the component mounts or when specific dependencies change. This ensures that styles are applied initially and re-applied dynamically whenever the dependencies update.

import { useEffect } from 'react';

function YourComponent({ dependency }) {
  useEffect(() => {
    // Initialize NeatCSS on component mount or when dependency changes
    initializeNeatCss();
  }, [dependency]); // Re-run on changes to dependencies that affect styles

  return <div>Your Component</div>;
}

By including relevant dependencies, initializeNeatCss will re-apply styles as needed without requiring a page reload.

Angular Integration

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

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

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

  ngOnDestroy() {
    // Cleanup NeatCSS styles on component destroy
    initializeNeatCss();
  }
}

Angular In Angular, run initializeNeatCss within the ngOnInit lifecycle method to initialize styles on component load. To handle dynamic updates, use ngOnChanges to re-trigger initializeNeatCss whenever specified @Input properties change.

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `<div>Your Component</div>`
})
export class YourComponent implements OnInit, OnChanges {
  @Input() dependency: any;

  ngOnInit() {
    initializeNeatCss();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.dependency) {
      // Re-apply styles when dependencies change
      initializeNeatCss();
    }
  }
}

Using ngOnChanges ensures that initializeNeatCss re-runs as data-bound properties update, allowing dynamic styling without page reloads.

Vue Integration

For Vue, add neatcss 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, onUnmounted } from 'vue';
import initializeNeatCss from 'neatcss';

export default {
    name: 'App',
    setup() {
        // Initialize NeatCSS styles on mount
        onMounted(() => {
            initializeNeatCss();
        });

        // Cleanup NeatCSS styles on unmount
        onUnmounted(() => {
            initializeNeatCss();
        });
    }
};
</script>

<style scoped>
/* Add any scoped styling here */
</style>

Vue.js In Vue, you can initialize initializeNeatCss in the mounted lifecycle hook to apply styles when the component loads. To dynamically update styles, create a watcher on any property or data element that influences styling, re-running initializeNeatCss whenever those properties change.

export default {
  props: ['dependency'],
  mounted() {
    initializeNeatCss();
  },
  watch: {
    dependency() {
      // Re-apply styles when dependencies change
      initializeNeatCss();
    }
  }
};

This approach ensures initializeNeatCss runs initially and whenever reactive data changes, keeping styles up-to-date.