https://github.com/bryanbill/cssify
Generate and manage CSS styles programmatically in Dart. Effortlessly create responsive, maintainable, and dynamic CSS for your web projects—all from Dart.
https://github.com/bryanbill/cssify
Last synced: 9 months ago
JSON representation
Generate and manage CSS styles programmatically in Dart. Effortlessly create responsive, maintainable, and dynamic CSS for your web projects—all from Dart.
- Host: GitHub
- URL: https://github.com/bryanbill/cssify
- Owner: bryanbill
- License: mit
- Created: 2025-07-02T14:06:39.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-10T16:09:46.000Z (12 months ago)
- Last Synced: 2025-07-10T21:28:12.769Z (12 months ago)
- Language: Dart
- Size: 20.5 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# cssify
Generate and manage CSS styles programmatically in Dart. Effortlessly create responsive, maintainable, and dynamic CSS for your web projects—all from the comfort of your Dart codebase.
---
## ✨ Features
- **Define CSS in Dart:** Use Dart classes and functions to build CSS rules.
- **Responsive by Design:** Built-in support for breakpoints and media queries.
- **Stateful Styling:** Easily add styles for pseudo-classes like `:hover`, `:active`, and more.
- **Keyframes and Animations:** Define complex animations and transitions.
- **Extensible:** Compose, extend, and customize your style logic.
- **Type-Safe:** Enjoy compile-time safety and autocompletion in your editor.
---
## 🚀 Getting Started
Add cssify to your `pubspec.yaml`:
```yaml
dependencies:
cssify: ^0.1.0
```
Import it in your Dart code:
```dart
import 'package:cssify/cssify.dart';
```
---
## 🛠️ Usage
Define your styles using Dart:
```dart
final containerStyle = Cssify(
'.container',
breakpoints: {
'base': StyleConfig(
style: {'display': 'flex', 'gap': '16px'},
state: {
'hover': {'background': 'lightgray'},
},
),
'md': StyleConfig(
style: {'gap': '32px'},
state: {},
),
},
);
final css = cssify([containerStyle]);
print(css);
```
---
## 📦 API Overview
### Cssify
Represents a CSS style definition for a selector, supporting responsive breakpoints.
```dart
class Cssify {
final String selector;
final Map breakpoints;
Cssify(this.selector, {required this.breakpoints});
factory Cssify.create(String selector, Map json);
}
```
### StyleConfig
Holds base and state-specific CSS properties for a selector.
```dart
class StyleConfig {
final Map style;
final Map> state;
StyleConfig({required this.style, required this.state});
factory StyleConfig.fromJson(Map json);
}
```
### MediaConfig
Defines screen conditions for media query breakpoints.
```dart
class MediaConfig {
final Map screen;
MediaConfig({required this.screen});
factory MediaConfig.fromJson(Map json);
}
```
---
## 📖 Example
See the [`example/`](example/) directory for a complete working example.
---
## 📚 Documentation
Full API docs are available in the source code. Each class and function is documented for easy reference.
---
## 📝 License
MIT License. See [LICENSE](LICENSE).
---
## 💡 Contributing
Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.
---
Made with ❤️ in Dart.