A lightweight, modern CSS framework focused on creating elegant, responsive interfaces with glass morphism effects, fluid animations, and dark/light mode support.
- 🌓 Dark & Light Themes - Seamless theme switching with persistent user preferences
- 🔮 Glass Morphism - Beautiful glass-like UI components with backdrop blur effects
- 📱 Responsive Grid - Flexible 12-column grid system that works on all devices
- 💫 Animations - Smooth animations for scroll reveals, typing effects, and more
- 🎨 Modern Aesthetics - Clean, modern design language with subtle gradients and shadows
- 🧩 Modular Components - Extensible component library that's easy to customize
- 🚀 Lightweight - Minimal footprint with no dependencies
- 📦 Sass Architecture - Modular Sass components for easy customization and extension
Download the latest compiled CSS and JavaScript files from the dist folder.
npm install aurora-cssgit clone https://github.com/yourusername/aurora-css.git
cd aurora-css
npm install
npm run build<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Aurora Project</title>
<link rel="stylesheet" href="path/to/aurora.min.css">
</head>
<body class="aurora-dark">
<!-- Grid Lines Background -->
<div class="aurora-grid-lines" id="gridLines"></div>
<!-- Theme Toggle Button -->
<div class="aurora-toggle-container">
<button class="aurora-theme-toggle" id="themeToggle">🌓</button>
</div>
<!-- Your content here -->
<div class="aurora-container">
<div class="aurora-glass-card">
<h1 class="aurora-title">Hello Aurora!</h1>
<p class="aurora-subtitle">Your beautiful UI is ready to go.</p>
<button class="aurora-btn aurora-btn-primary">Get Started</button>
</div>
</div>
<!-- JavaScript -->
<script src="path/to/aurora.min.js"></script>
<script src="path/to/aurora-animationfix.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize all Aurora components
Aurora.init();
});
</script>
</body>
</html>Import Aurora in your Sass project to customize variables and use only the components you need:
// Override default variables
$aurora-accent-color: #6a3de8;
$aurora-secondary-accent: #ff7a50;
$aurora-border-radius: 8px;
// Import Aurora components
@import "aurora/variables";
@import "aurora/mixins";
@import "aurora/reset";
// Import only the components you need
@import "aurora/grid";
@import "aurora/typography";
@import "aurora/buttons";
@import "aurora/cards";
// Add more components as needed
// Or import everything
// @import "aurora";If you've cloned the repository and want to customize the framework:
- Edit Sass files in the
src/scss/directory - Run the build process:
# Build once
gulp build
# Watch for changes during development
gulp devThis will compile and minify the CSS and JavaScript files to the dist directory.
Aurora includes a variety of UI components to help you build beautiful interfaces:
- Container & Grid system
- Responsive columns
- Flexbox utilities
- Typography system
- Buttons & button variants
- Input controls & forms
- Cards & glass cards
- Modals
- Tooltips
- Navbar with mobile navigation
- Theme switching
- Scroll animations
- Parallax effects
- Typing animations
- Hover transitions
You can override the CSS variables to adapt the framework to your brand:
:root {
/* Colors */
--aurora-accent-color: #4ecca3; /* Primary accent color */
--aurora-secondary-accent: #ff4d5a; /* Secondary accent color */
--aurora-bg-color: #0f1923; /* Background color (dark mode) */
--aurora-card-color: rgba(25, 31, 40, 0.7); /* Card background (dark mode) */
--aurora-text-primary: #ffffff; /* Primary text color (dark mode) */
--aurora-text-secondary: rgba(255, 255, 255, 0.7); /* Secondary text (dark mode) */
/* Sizes */
--aurora-border-radius: 4px; /* Border radius for elements */
--aurora-grid-gap: 1.5rem; /* Gap between grid columns */
/* Transitions */
--aurora-transition-fast: 0.2s ease; /* Fast transition speed */
--aurora-transition-medium: 0.3s ease; /* Medium transition speed */
--aurora-transition-slow: 0.5s ease; /* Slow transition speed */
}For more control, you can customize Sass variables before importing Aurora components:
// Override variables in your project
$aurora-accent-color: #4ecca3;
$aurora-secondary-accent: #ff4d5a;
$aurora-border-radius: 6px;
$breakpoint-md: 800px; // Custom breakpoint
// Then import Aurora
@import "aurora/variables";
@import "aurora/mixins";
// Import other components...Aurora includes responsive JavaScript utilities to enhance functionality:
// Initialize all Aurora components with custom options
Aurora.init({
// Component Options
themeToggle: {
defaultTheme: 'dark'
},
scrollAnimations: {
threshold: 0.2
},
tooltips: {
delay: 200,
touchEnabled: true // Enable tooltips on touch devices
},
parallax: {
disableOnMobile: true // Disable parallax on mobile for better performance
},
mobileNav: {
mobileBreakpoint: 768 // Set breakpoint for mobile navigation
},
adaptiveLayout: {
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200
}
}
});
// Create a typing animation
Aurora.initTyping('elementId', [
'First text to display',
'Second text to display',
'Third text to display'
], {
typeSpeed: 80,
eraseSpeed: 40,
newTextDelay: 1500
});
// Or initialize components individually
Aurora.initMobileNav();
Aurora.initScrollAnimationsImproved();
Aurora.initAdaptiveLayout();Aurora is designed to work on all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers with enhanced touch support
aurora-css/
├── dist/ # Compiled and minified files
│ ├── css/
│ │ ├── aurora.css # Compiled CSS
│ │ └── aurora.min.css # Minified CSS
│ └── js/
│ ├── aurora.js # Main JavaScript
│ ├── aurora.min.js # Minified JavaScript
│ └── aurora-animationfix.js # Animation fixes
├── src/ # Source files
│ ├── scss/ # Sass components
│ │ ├── _variables.scss
│ │ ├── _mixins.scss
│ │ ├── _buttons.scss
│ │ ├── _cards.scss
│ │ └── ... (other components)
│ └── js/ # JavaScript source
├── docs/ # Documentation
└── gulpfile.js # Build tools
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Inspired by modern UI/UX trends and glass morphism effects
- Thanks to all contributors who helped make this framework better