# NextGen CSS Framework
A modern, lightweight, and flexible CSS/SCSS framework for next-generation websites.
## Features
- 🚀 Modern CSS with custom properties (variables)
- 📱 Mobile-first responsive design
- 🌗 Dark mode support with `prefers-color-scheme`
- 📦 Modular architecture with modern Sass module system
- 🔍 Lightweight with minimal specificity
- ♿ Accessibility best practices
- 📊 Flexbox and CSS Grid systems
- ⚡ Performance-optimized
## Installation
### npm (Recommended)
```bash
npm install nextgen-css-framework --save
```
### Manual Installation
1. Download the source files from the repository
2. Copy the `scss` folder to your project
3. Import the framework in your SCSS:
```scss
@import 'path/to/nextgen/scss/main';
```
### CDN
```html
```
## Quick Start
```html
NextGen CSS Framework
Card Title
Card content goes here.
```
## Usage with Sass
Import the entire framework:
```scss
@import 'nextgen-css-framework/scss/main';
```
Or import only what you need:
```scss
// Required base
@import 'nextgen-css-framework/scss/abstracts/variables';
@import 'nextgen-css-framework/scss/abstracts/mixins';
@import 'nextgen-css-framework/scss/base/reset';
// Optional components
@import 'nextgen-css-framework/scss/components/buttons';
@import 'nextgen-css-framework/scss/layout/grid';
@import 'nextgen-css-framework/scss/utilities/spacing';
```
## Customization
Create a `_custom-variables.scss` file to override default variables:
```scss
// _custom-variables.scss
$primary: #ff6b6b;
$secondary: #546de5;
$font-family-base: 'Nunito', sans-serif;
$border-radius: 0.5rem;
```
Then import your custom variables before importing NextGen:
```scss
// main.scss
@import 'custom-variables';
@import 'nextgen-css-framework/scss/main';
```
## Framework Structure
```
nextgen/
├── scss/
│ ├── _index.scss # Central file that forwards variables & mixins
│ ├── main.scss # Main import file
│ ├── abstracts/
│ │ ├── _variables.scss # Variables with proper definitions
│ │ ├── _functions.scss # Sass functions
│ │ ├── _mixins.scss # Mixins including media-breakpoint-up
│ │ └── _animations.scss # Animation keyframes
│ ├── base/
│ │ ├── _reset.scss # Modernized reset
│ │ └── _typography.scss # Typography rules
│ ├── components/
│ │ ├── _buttons.scss # Updated buttons
│ │ ├── _cards.scss # Cards component
│ │ ├── _forms.scss # Forms with proper variables
│ │ └── _navigation.scss # Navigation with media query fixes
│ ├── layout/
│ │ ├── _grid.scss # Fixed grid system
│ │ ├── _containers.scss # Container layouts
│ │ └── _flexbox.scss # Flexbox utilities
│ └── utilities/
│ ├── _spacing.scss # Margin/padding utilities
│ ├── _display.scss # Display helpers
│ ├── _colors.scss # Color utilities
│ └── _responsive.scss # Responsive utilities
├── dist/
│ ├── nextgen.css # Compiled CSS
│ └── nextgen.min.css # Minified CSS
```
## Key Features in Detail
### Modern Sass Module System
The framework uses Sass's modern module system with `@use` and `@forward` instead of the deprecated `@import`:
```scss
// _index.scss - Central file that forwards variables and mixins
@forward "abstracts/variables";
@forward "abstracts/functions";
@forward "abstracts/mixins";
@use "abstracts/variables";
// Component files
@use '../index' as *;
```
### CSS Custom Properties (Variables)
Uses CSS variables for theming and dark mode support:
```scss
:root {
--ng-primary: #{$primary};
--ng-secondary: #{$secondary};
--ng-white: #{$white};
--ng-body-bg: #{$white};
--ng-body-color: #{$gray-900};
}
@media (prefers-color-scheme: dark) {
:root {
--ng-primary: #{color.adjust($primary, $lightness: 10%)};
--ng-body-bg: #{$gray-900};
--ng-body-color: #{$gray-100};
}
}
```
### Responsive Grid System
12-column grid system using flexbox:
```html
Column 1
Column 2
Column 3
```
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch: `git checkout -b feature/amazing-feature`
3. Commit your changes: `git commit -m 'Add some amazing feature'`
4. Push to the branch: `git push origin feature/amazing-feature`
5. Open a Pull Request
## Future Enhancements
See the [Future Enhancements](future-enhancements.md) document for upcoming features and improvements.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.