A comprehensive, production-ready utility-first CSS framework with Tamil class names, built with modern SCSS architecture.
- 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
npm install azhivili-css<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/azhivili-css/dist/azhivili-css.min.css">Download the latest release from GitHub Releases
<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>அழிவிலி-CSS Framework</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/azhivili-css/dist/azhivili-css.min.css">
</head>
<body>
<div class="ப-4 ம-2 நி-சிவப்பு-500 பி-நீலம்-100">
<h1 class="எஅ-2மிபெ எஎ-தடிமன் உசீ-மையம்">வணக்கம்!</h1>
<p class="எஅ-பெ வஉ-தளர்வு">அழிவிலி-CSS கட்டமைப்பு</p>
</div>
</body>
</html>ப-{size}- Padding (பேடிங்)ம-{size}- Margin (மார்ஜின்)பகி-{size}- Padding X-axis (கிடைமட்ட பேடிங்)பசெ-{size}- Padding Y-axis (செங்குத்து பேடிங்)
அ-{size}- Width (அகலம்)உ-{size}- Height (உயரம்)
எஅ-{size}- Font Size (எழுத்துரு அளவு)எஎ-{weight}- Font Weight (எழுத்துரு எடை)உசீ-{align}- Text Align (உரை சீரமைப்பு)
நி-{color}-{shade}- Text Color (உரை நிறம்)பி-{color}-{shade}- Background Color (பின்னணி நிறம்)எல்-{color}-{shade}- Border Color (எல்லை நிறம்)
கா-{display}- Display (காட்சி)நி-{position}- Position (நிலை)
கா-நெகிழ்- Display Flexநெதி-{direction}- Flex Directionநியஉ-{justify}- Justify Contentஉசீ-{align}- Align Items
கா-கட்டம்- Display Gridகவநெ-{cols}- Grid Template Columnsகநெவி-{span}- Grid Column Span
Use breakpoint prefixes for responsive design:
சி:- Small screens (640px+)ந:- Medium screens (768px+)பெ:- Large screens (1024px+)மி:- Extra large screens (1280px+)
<div class="ப-4 சி:ப-6 ந:ப-8 பெ:ப-12">
Responsive padding
</div>மேல்:- Hover stateகவ:- Focus stateசெ:- Active state
<button class="பி-நீலம்-500 மேல்:பி-நீலம்-600 கவ:எ-2">
Button with hover and focus states
</button>சிவப்பு(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
<div class="நி-சிவப்பு-500">Red text</div>
<div class="பி-பச்சை-100">Light green background</div>
<div class="எல்-நீலம்-600">Blue border</div>// Override default variables
$colors: (
// Add your custom colors
என்நிறம்: (
500: #your-color
)
);
// Import the framework
@import 'azhivili-css/scss/main';// Add custom utilities
.என்வகுப்பு {
// Your custom styles
}
// Use framework mixins
@include generate-utilities(margin-top, என்மே, $spacing-values);- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Tailwind CSS
- Tamil language support for better localization
- Community feedback and contributions
For detailed documentation, visit: Documentation
- GitHub Issues: Report bugs or request features
- Discussions: Community discussions
- Discord: Discord discussion