DeviStyles

Modern SCSS framework for Angular applications with Material Design components and utilities.

Installation

From npm (with jsDelivr CDN)

<!-- Compiled CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devistyles@latest/dist/devistyles.min.css">

<!-- Individual components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devistyles@latest/scss/components/buttons.scss">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devistyles@latest/scss/themes/dark.scss">

From npm (local installation)

npm install devistyles

// Import complete framework
@import 'devistyles/scss/main';

// Or import specific components
@import 'devistyles/scss/variables';
@import 'devistyles/scss/components/buttons';
@import 'devistyles/scss/themes/dark';

Angular Configuration

Add to your angular.json:

{
  "styles": [
    "node_modules/devistyles/dist/devistyles.css",
    "src/styles.scss"
  ]
}

Features

• 🎨 Modern Design: Based on Material Design principles
• 🌙 Dark Mode: Built-in dark theme support
• 📱 Responsive: Mobile-first responsive design
• 🔧 Customizable: Extensive SCSS variables and mixins
• 🚀 Performance: Optimized for production use
• 📦 Modular: Import only what you need

Components

Layout

• Header
• Sidebar
• Footer
• Grid System
• Containers

UI Components

• Buttons
• Cards
• Forms
• Tables
• Typography
• Lists
• Drawers

Themes

• Default Theme
• Blue Theme
• Aqua Theme
• Purple Theme
• Green Theme
• Pink Theme
• Dark Theme
• RTL Support

Icons

• FontAwesome integration
• Solid, Regular, and Brands icons
• Optimized font loading

Usage Examples

Basic Setup

// styles.scss
@import 'devistyles/scss/main';

// Override variables
$primary: #your-color;
$font-family: 'Your Font', sans-serif;

Component Usage

<!-- Button with DeviStyles -->
<button class="btn btn-primary">Primary Button</button>

<!-- Card component -->
<div class="card">
  <div class="card-header">
    <h3>Card Title</h3>
  </div>
  <div class="card-body">
    <p>Card content goes here.</p>
  </div>
</div>

Dark Theme

// Enable dark theme
.dark-theme {
  @import 'devistyles/scss/themes/dark';
}

Customization

Variables

// Override default variables
$primary: #5d87ff;
$secondary: #49beff;
$success: #13deb9;
$warning: #ffae1f;
$error: #fa896b;

// Layout variables
$sidenav-desktop: 270px;
$header-height: 70px;
$border-radius: 7px;

@import 'devistyles/scss/main';

Mixins

// Use built-in mixins
.custom-button {
  @include button-variant($primary, $white, $primary);
  @include transition(all, 0.3s, ease);
}

.responsive-container {
  @include media-breakpoint-up(md) {
    max-width: 1200px;
  }
}

Build from Source

# Clone the repository
git clone https://github.com/DeviCode7/devistyles.git

# Install dependencies
npm install

# Build CSS
npm run build

# Build minified CSS
npm run build:min

# Watch for changes
npm run dev

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE 11+ (with polyfills)

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

v1.0.0

• Initial release
• Complete SCSS framework
• Angular Material integration
• FontAwesome icons
• Multiple themes
• Responsive grid system
• Dark mode support

Author

DeviCode

• GitHub: @DeviCode7

Acknowledgments

• Inspired by Material Design
• FontAwesome for icons
• Angular Material for components