https://github.com/aruvili/azhivili-css
A comprehensive utility-first CSS framework with Tamil class names (Tamil CSS) - தமிழ் வகுப்பு பெயர்களுடன் கூடிய விரிவான பயன்பாட்டு-முதல் CSS கட்டமைப்பு
https://github.com/aruvili/azhivili-css
aruvili azhivili-css css css-framework framework scss tamil tamil-css tamil-css-framework tamil-framework tamil-language tamilcss tamilcssframework
Last synced: 10 months ago
JSON representation
A comprehensive utility-first CSS framework with Tamil class names (Tamil CSS) - தமிழ் வகுப்பு பெயர்களுடன் கூடிய விரிவான பயன்பாட்டு-முதல் CSS கட்டமைப்பு
- Host: GitHub
- URL: https://github.com/aruvili/azhivili-css
- Owner: Aruvili
- License: mit
- Created: 2025-07-19T19:13:15.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-08-06T16:19:10.000Z (10 months ago)
- Last Synced: 2025-08-06T18:18:27.533Z (10 months ago)
- Topics: aruvili, azhivili-css, css, css-framework, framework, scss, tamil, tamil-css, tamil-css-framework, tamil-framework, tamil-language, tamilcss, tamilcssframework
- Language: SCSS
- Homepage: https://aruvili.github.io/Azhivili-CSS/
- Size: 652 KB
- Stars: 13
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# அழிவிலி-CSS Framework
A comprehensive, production-ready utility-first CSS framework with Tamil class names, built with modern SCSS architecture.
## Features (அம்சங்கள்)
- **Tamil Language Classes**: All utility classes use Tamil names for better localization
- **Production Ready**: Optimized SCSS architecture with proper organization
- **Responsive Design**: Mobile-first responsive utilities with Tamil breakpoint names
- **Modern CSS**: Uses latest CSS features including CSS Grid, Flexbox, and custom properties
- **Comprehensive**: Complete set of utilities for spacing, typography, colors, layout, and more
- **Flexible**: Easy to customize and extend with SCSS variables and mixins
- **Performance**: Optimized output with compressed and expanded versions
## Installation (நிறுவல்)
### NPM
```bash
npm install azhivili-css
```
### CDN
```html
```
### Download
Download the latest release from [GitHub Releases](https://github.com/Aruvili/azhivili-css/releases)
## Usage (பயன்பாடு)
### Basic HTML Structure
```html
அழிவிலி-CSS Framework
வணக்கம்!
அழிவிலி-CSS கட்டமைப்பு
```
### Class Name Structure (வகுப்பு பெயர் அமைப்பு)
#### Spacing (இடைவெளி)
- `ப-{size}` - Padding (பேடிங்)
- `ம-{size}` - Margin (மார்ஜின்)
- `பகி-{size}` - Padding X-axis (கிடைமட்ட பேடிங்)
- `பசெ-{size}` - Padding Y-axis (செங்குத்து பேடிங்)
#### Sizing (அளவு)
- `அ-{size}` - Width (அகலம்)
- `உ-{size}` - Height (உயரம்)
#### Typography (எழுத்துரு)
- `எஅ-{size}` - Font Size (எழுத்துரு அளவு)
- `எஎ-{weight}` - Font Weight (எழுத்துரு எடை)
- `உசீ-{align}` - Text Align (உரை சீரமைப்பு)
#### Colors (நிறங்கள்)
- `நி-{color}-{shade}` - Text Color (உரை நிறம்)
- `பி-{color}-{shade}` - Background Color (பின்னணி நிறம்)
- `எல்-{color}-{shade}` - Border Color (எல்லை நிறம்)
#### Layout (அமைப்பு)
- `கா-{display}` - Display (காட்சி)
- `நி-{position}` - Position (நிலை)
#### Flexbox (நெகிழ்வு)
- `கா-நெகிழ்` - Display Flex
- `நெதி-{direction}` - Flex Direction
- `நியஉ-{justify}` - Justify Content
- `உசீ-{align}` - Align Items
#### Grid (கட்டம்)
- `கா-கட்டம்` - Display Grid
- `கவநெ-{cols}` - Grid Template Columns
- `கநெவி-{span}` - Grid Column Span
### Responsive Design (பதிலளிக்கும் வடிவமைப்பு)
Use breakpoint prefixes for responsive design:
- `சி:` - Small screens (640px+)
- `ந:` - Medium screens (768px+)
- `பெ:` - Large screens (1024px+)
- `மி:` - Extra large screens (1280px+)
```html
Responsive padding
```
### State Modifiers (நிலை மாற்றிகள்)
- `மேல்:` - Hover state
- `கவ:` - Focus state
- `செ:` - Active state
```html
Button with hover and focus states
```
## Color System (நிற அமைப்பு)
### Available Colors (கிடைக்கும் நிறங்கள்)
- `சிவப்பு` (Red) - 50 to 900 shades
- `ஆரஞ்சு` (Orange) - 50 to 900 shades
- `மஞ்சள்` (Yellow) - 50 to 900 shades
- `பச்சை` (Green) - 50 to 900 shades
- `நீலம்` (Blue) - 50 to 900 shades
- `ஊதா` (Purple) - 50 to 900 shades
- `இளஞ்சிவப்பு` (Pink) - 50 to 900 shades
- `சாம்பல்` (Gray) - 50 to 900 shades
- `மயில்பச்சை` (Teal) - 50 to 900 shades
- `நீர்நிறம்` (Cyan) - 50 to 900 shades
- `மரகதம்` (Emerald) - 50 to 900 shades
- `எலுமிச்சைப்பச்சை` (Lime) - 50 to 900 shades
- `வானநீலம்` (Sky) - 50 to 900 shades
- `இண்டிகோ` (Indigo) - 50 to 900 shades
- `ரோஜா` (Rose) - 50 to 900 shades
- `கற்குமிழ்மஞ்சள்` (Amber) - 50 to 900 shades
- `நடுநிறம்` (Neutral) - 50 to 900 shades
- `கல்நிறம்` (Stone) - 50 to 900 shades
- `கருப்பு` (Black) - No shade
- `வெள்ளை` (White) - No shade
- `வெளிப்படையான` (transparent) - No need for shade
### Usage Examples
```html
Red text
Light green background
Blue border
```
## Customization (தனிப்பயனாக்கம்)
### Using SCSS Variables
```scss
// Override default variables
$colors: (
// Add your custom colors
என்நிறம்: (
500: #your-color
)
);
// Import the framework
@import 'azhivili-css/scss/main';
```
### Creating Custom Utilities
```scss
// Add custom utilities
.என்வகுப்பு {
// Your custom styles
}
// Use framework mixins
@include generate-utilities(margin-top, என்மே, $spacing-values);
```
## Browser Support (உலாவி ஆதரவு)
- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+
## Contributing (பங்களிப்பு)
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License (உரிமம்)
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments (நன்றி)
- Inspired by Tailwind CSS
- Tamil language support for better localization
- Community feedback and contributions
## Documentation (ஆவணங்கள்)
For detailed documentation, visit: [Documentation](https://github.com/Aruvili/azhivili-css)
## Support (ஆதரவு)
- GitHub Issues: [Report bugs or request features](https://github.com/Aruvili/azhivili-css/issues)
- Discussions: [Community discussions](https://github.com/Aruvili/azhivili-css/discussions)
- Discord [Discord discussion](https://discord.gg/CcsRe8gWRV)