Gradient Able#
Gradient Able differentiates itself through its extensive use of vibrant gradients and modern design aesthetics. This admin template from CodedThemes emphasizes visual hierarchy through carefully crafted color transitions and gradient overlays, making it particularly suitable for data-rich applications where visual distinction between elements is crucial.
π Gradient Able - Product page
π Gradient Able - Live Demo
π New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
Framework Availability#
The dashboard template is available in multiple technological implementations: - HTML/CSS/jQuery (Classic version) - React.js (with Redux support) - Angular - Vue.js - Laravel - Django - ASP.NET Core
Core Architecture#
The template follows a structured organization that emphasizes its gradient-based design system:
gradient-able/
βββ dist/
β βββ assets/
β β βββ css/
β β βββ js/
β β βββ images/
βββ src/
β βββ assets/
β β βββ scss/
β β β βββ themes/
β β β β βββ _gradients.scss
β β β β βββ _variables.scss
β β β β βββ _components.scss
β β β βββ partials/
β β β βββ style.scss
β β βββ js/
β β β βββ vendor/
β β β βββ pages/
β β β βββ core.js
β βββ html/
β β βββ layouts/
β β βββ components/
β βββ plugins/
βββ documentation/
The Gradient Design System#
Gradient Ableβs signature look comes from its carefully crafted gradient system:
// Core gradient definitions
$gradient-colors: (
primary: (
start: #1de9b6,
end: #1dc4e9
),
danger: (
start: #FF5370,
end: #ff869a
),
warning: (
start: #f4c22b,
end: #f1dfa7
),
info: (
start: #3c4fb1,
end: #33b5e5
),
dark: (
start: #4099ff,
end: #73b4ff
)
);
// Gradient mixing function
@function create-gradient($direction, $start-color, $end-color) {
@return linear-gradient($direction, $start-color, $end-color);
}
// Gradient generator mixin
@mixin gradient-background($type: 'primary', $direction: 45deg) {
$colors: map-get($gradient-colors, $type);
background: create-gradient(
$direction,
map-get($colors, 'start'),
map-get($colors, 'end')
);
}
Basic Layout Structure#
Hereβs the foundational layout structure for Gradient Able pages:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Able</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>
<!-- [ Navigation Menu ] start -->
<nav class="pcoded-navbar menu-light">
<div class="navbar-wrapper">
<div class="navbar-content scroll-div">
<!-- Navigation content -->
</div>
</div>
</nav>
<!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg header-blue">
<!-- Header content -->
</header>
<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
<div class="pcoded-content">
<!-- Content goes here -->
</div>
</div>
</body>
</html>
Component Implementation#
Letβs look at some key components that showcase Gradient Ableβs design approach:
Gradient Cards#
<div class="card">
<div class="card-header gradient-card-header bg-primary">
<h5 class="text-white">Gradient Card</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li><i class="feather icon-maximize full-card"></i></li>
<li><i class="feather icon-minus minimize-card"></i></li>
<li><i class="feather icon-refresh-cw reload-card"></i></li>
<li><i class="feather icon-trash close-card"></i></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<p>Card content goes here</p>
</div>
</div>
Gradient Charts#
// Area chart with gradient
const gradientChart = {
chart: {
height: 350,
type: 'area',
toolbar: {
show: false
}
},
colors: ['#1de9b6', '#1dc4e9'],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 90, 100]
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
series: [{
name: 'Series 1',
data: [30, 40, 35, 50, 49, 60, 70]
}],
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
}
};
new ApexCharts(document.querySelector("#gradient-chart"), gradientChart).render();
Advanced Features#
Theme Configuration#
Gradient Able provides extensive theme customization options:
const themeConfig = {
layout: 'vertical', // vertical, horizontal
themeType: 'gradient', // gradient, default
gradientColors: {
primary: {
start: '#1de9b6',
end: '#1dc4e9'
},
// Add custom gradients
},
navbarGradient: true,
headerGradient: true,
sidebarGradient: false
};
// Initialize theme
document.addEventListener('DOMContentLoaded', function() {
GradientAble.init(themeConfig);
});
Animation and Transitions#
Gradient Able includes smooth transitions for its gradient effects:
// Gradient transition mixin
@mixin gradient-transition($property: all, $duration: 0.3s) {
transition: $property $duration ease-in-out;
background-size: 200% auto;
&:hover {
background-position: right center;
}
}
// Implementation
.btn-gradient {
@include gradient-background('primary');
@include gradient-transition;
}
Development Best Practices#
Gradient Usage Guidelines: - Use gradients purposefully to highlight important elements - Maintain consistent gradient directions - Ensure sufficient contrast for text visibility - Consider performance impact on mobile devices
Performance Considerations: - Minimize the number of gradient elements visible at once - Use CSS gradients instead of images where possible - Implement proper caching strategies - Optimize gradient animations
Accessibility: - Ensure sufficient contrast ratios with gradient backgrounds - Provide alternative styles for reduced motion preferences - Test with screen readers - Support keyboard navigation
## Browser Support
Gradient Able supports modern browsers with proper gradient rendering: - Chrome 26+ - Firefox 16+ - Safari 6.1+ - Edge 12+ - Opera 12+
## Getting Help
For support with Gradient Able: - Check the official documentation - Visit CodedThemes support portal - Explore the example pages - Join the community forums
Keep your installation updated for the latest gradient effects and optimizations. CodedThemes regularly updates the template with new features and improvements.
Links#
π New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
π
Download
products and start fast a new projectπ Bootstrap your startUp, MVP or Legacy project with a custom development sprint