or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

cards.md index.md plugins.md search.md styling.md utilities.md widgets.md

tile.json

SCSS Styling System

AdminLTE provides a comprehensive SCSS-based styling system built on Bootstrap 4, offering extensive customization capabilities through variables, mixins, and modular component stylesheets. The system enables complete visual customization while maintaining consistency across all components.

Core Structure

AdminLTE's SCSS architecture is organized in a modular structure that builds upon Bootstrap 4:

Main Entry Point

// adminlte.scss - Main entry point
/*!
 *   AdminLTE v3.2.0
 *   Author: Colorlib
 *   Website: AdminLTE.io <https://adminlte.io>
 *   License: Open source - MIT <https://opensource.org/licenses/MIT>
 */

// Bootstrap integration
@import "~bootstrap/scss/functions";
@import "bootstrap-variables";         // Bootstrap variable overrides
@import "~bootstrap/scss/bootstrap";

// AdminLTE core
@import "variables";                   // Core AdminLTE variables
@import "variables-alt";               // Alternative color schemes
@import "mixins";                      // SCSS mixins

// Modular components
@import "parts/core";                  // Core layout components
@import "parts/components";            // UI components
@import "parts/extra-components";      // Additional components
@import "parts/pages";                 // Page-specific styles
@import "parts/plugins";               // Third-party plugin styles
@import "parts/miscellaneous";         // Utility classes

Core Variables

AdminLTE provides extensive customization through SCSS variables that control colors, layout, spacing, and component appearance.

Color System

// Core brand colors
$blue: #0073b7 !default;
$lightblue: #3c8dbc !default;
$navy: #001f3f !default;
$teal: #39cccc !default;
$olive: #3d9970 !default;
$lime: #01ff70 !default;
$orange: #ff851b !default;
$fuchsia: #f012be !default;
$purple: #605ca8 !default;
$maroon: #d81b60 !default;
$black: #111 !default;
$gray-x-light: #d2d6de !default;

// Color map for utility class generation
$colors: map-merge(
  (
    "lightblue": $lightblue,
    "navy": $navy,
    "olive": $olive,
    "lime": $lime,
    "fuchsia": $fuchsia,
    "maroon": $maroon,
  ),
  $colors
) !default;

Layout Variables

// Core layout dimensions
$sidebar-width: 250px !default;
$sidebar-padding-x: .5rem !default;
$sidebar-padding-y: 0 !default;
$sidebar-custom-height: 4rem !default;
$sidebar-custom-height-lg: 6rem !default;
$sidebar-custom-height-xl: 8rem !default;
$sidebar-custom-padding-x: .85rem !default;
$sidebar-custom-padding-y: .5rem !default;

// Boxed layout configuration
$boxed-layout-max-width: 1250px !default;

// Background colors
$main-bg: #f4f6f9 !default;
$dark-main-bg: lighten($dark, 7.5%) !default;

// Content spacing
$content-padding-y: 0 !default;
$content-padding-x: $navbar-padding-x !default;
$font-size-root: 1rem !default;

Image and Icon Sizes

// Standardized image sizes
$img-size-sm: 1.875rem !default;    // 30px
$img-size-md: 3.75rem !default;     // 60px  
$img-size-lg: 6.25rem !default;     // 100px
$img-size-push: .625rem !default;   // 10px push spacing

Header System Variables

// Main header configuration
$main-header-bottom-border-width: $border-width !default;
$main-header-bottom-border-color: $gray-300 !default;
$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
$main-header-link-padding-y: $navbar-padding-y !default;
$main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;

// Small header variant
$nav-link-sm-padding-y: .35rem !default;
$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}) !default;

// Header theme variations
$main-header-dark-form-control-bg: $gray-800 !default;
$main-header-dark-form-control-focused-bg: $gray-700 !default;
$main-header-dark-form-control-focused-color: $gray-400 !default;
$main-header-dark-form-control-border-color: $gray-600 !default;
$main-header-dark-form-control-focused-border-color: $gray-600 !default;
$main-header-dark-placeholder-color: rgba($white, .6) !default;

$main-header-light-form-control-bg: darken($gray-200, 5%) !default;
$main-header-light-form-control-focused-bg: darken($gray-200, 7.5%) !default;
$main-header-light-form-control-focused-color: $gray-400 !default;
$main-header-light-form-control-border-color: $gray-400 !default;
$main-header-light-form-control-focused-border-color: darken($gray-400, 2.5%) !default;
$main-header-light-placeholder-color: rgba(0, 0, 0, .6) !default;

Footer Variables

// Main footer configuration
$main-footer-padding: 1rem !default;
$main-footer-padding-sm: $main-footer-padding * .812 !default;
$main-footer-border-top-width: 1px !default;
$main-footer-border-top-color: $gray-300 !default;
$main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;

Component-Specific Stylesheets

AdminLTE organizes component styles into focused SCSS files, each handling specific UI elements:

Layout Components

// Layout component files
@import "layout";           // Main layout structure and responsive behavior
@import "main-header";      // Top navigation header styling
@import "main-sidebar";     // Left sidebar navigation styling  
@import "control-sidebar";  // Right control panel styling
@import "main-footer";      // Footer styling (if used)

UI Components

// Core UI component files
@import "cards";            // Card widgets and panels
@import "buttons";          // Button variations and styles
@import "forms";            // Form elements and controls
@import "dropdown";         // Enhanced dropdown menus
@import "modals";           // Modal dialog styling
@import "navs";            // Navigation components
@import "table";           // Table enhancements
@import "alerts";          // Alert messages
@import "toasts";          // Toast notifications

Widget Components

// Specialized widget files
@import "info-box";         // Info box widgets
@import "small-box";        // Small box widgets  
@import "callout";          // Callout components
@import "timeline";         // Timeline components
@import "direct-chat";      // Chat interface styling
@import "products";         // Product listing styles
@import "social-widgets";   // Social media widgets
@import "users-list";       // User list components

Utility Stylesheets

// Utility and helper files
@import "colors";           // Color utility classes
@import "text";            // Text utility classes  
@import "elevation";       // Box shadow utilities
@import "animation-effects"; // Animation classes
@import "miscellaneous";   // General utility classes
@import "print";           // Print-specific styles

Customization Examples

Basic Color Customization

// Override default colors before importing AdminLTE
$blue: #007bff;
$green: #28a745;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;

// Override sidebar width
$sidebar-width: 280px;

// Override main background
$main-bg: #ffffff;

// Import AdminLTE with custom variables
@import "admin-lte/build/scss/adminlte";

Advanced Layout Customization

// Custom layout configuration
$sidebar-width: 300px;
$boxed-layout-max-width: 1400px;
$main-bg: #f8f9fa;
$content-padding-x: 2rem;
$content-padding-y: 1rem;

// Custom header configuration
$main-header-height-inner: 4rem;
$main-header-dark-form-control-bg: #2c3e50;

// Custom footer
$main-footer-padding: 1.5rem;
$main-footer-border-top-color: #dee2e6;

@import "admin-lte/build/scss/adminlte";

// Additional custom styles
.content-wrapper {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.main-sidebar {
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

Dark Theme Implementation

// Dark theme variables
$dark-main-bg: #1a1a1a;
$dark-sidebar-bg: #2c2c2c;
$dark-header-bg: #333333;
$dark-text-color: #e0e0e0;
$dark-border-color: #404040;

// Override core variables for dark theme
$main-bg: $dark-main-bg;
$body-bg: $dark-main-bg;
$body-color: $dark-text-color;
$border-color: $dark-border-color;

// Card customizations for dark theme
$card-bg: #2c2c2c;
$card-border-color: $dark-border-color;

// Form controls for dark theme
$input-bg: #333333;
$input-color: $dark-text-color;
$input-border-color: $dark-border-color;
$input-focus-border-color: #007bff;

@import "admin-lte/build/scss/adminlte";

// Additional dark theme adjustments
.dark-mode {
  .navbar-light {
    background-color: $dark-header-bg !important;
    
    .navbar-nav .nav-link {
      color: $dark-text-color;
    }
  }
  
  .main-sidebar {
    background-color: $dark-sidebar-bg;
  }
  
  .content-wrapper {
    background-color: $dark-main-bg;
  }
}

Component-Specific Customization

// Custom card styling
$card-border-radius: 0.75rem;
$card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

// Custom button styling  
$btn-border-radius: 0.5rem;
$btn-font-weight: 600;

// Custom form styling
$input-border-radius: 0.5rem;
$input-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

// Custom table styling
$table-border-color: #dee2e6;
$table-hover-bg: rgba(0, 0, 0, 0.025);

@import "admin-lte/build/scss/adminlte";

// Component-specific overrides
.card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
}

.btn {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  &.btn-primary {
    background: linear-gradient(45deg, #007bff, #0056b3);
    border: none;
    
    &:hover {
      background: linear-gradient(45deg, #0056b3, #004085);
    }
  }
}

Plugin Integration Styles

AdminLTE includes styling for numerous third-party plugins:

Chart Library Integration

// Chart.js integration
@import "plugins/chart-js";

// Custom chart container styling
.chart-container {
  position: relative;
  height: 300px;
  padding: 1rem;
  background: $white;
  border-radius: $border-radius;
  box-shadow: $box-shadow-sm;
}

DataTables Integration

// DataTables AdminLTE theme
@import "plugins/datatables-bs4";

// Custom DataTables styling
.dataTables_wrapper {
  .dataTables_length,
  .dataTables_filter {
    margin-bottom: 1rem;
  }
  
  .dataTables_paginate {
    margin-top: 1rem;
    
    .paginate_button {
      border-radius: $btn-border-radius;
      margin: 0 0.125rem;
    }
  }
}

Form Plugin Integration

// Select2 theming
@import "plugins/select2-bootstrap4";

// Ion Range Slider theming  
@import "plugins/ion-rangeslider";

// Bootstrap Colorpicker theming
@import "plugins/bootstrap-colorpicker";

// Custom form plugin styling
.select2-container--bootstrap4 {
  .select2-selection {
    border-radius: $input-border-radius;
    border-color: $input-border-color;
  }
}

Responsive Design Variables

AdminLTE provides responsive design controls through breakpoint variables:

// Responsive breakpoints (inherited from Bootstrap)
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

// AdminLTE specific responsive variables
$sidebar-mini-breakpoint: $grid-breakpoints[lg];
$main-header-height-mobile: calc(#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width});

// Custom responsive sidebar behavior
@media (max-width: #{$sidebar-mini-breakpoint - 1px}) {
  .sidebar-mini {
    .main-sidebar {
      width: 0;
      transform: translateX(-#{$sidebar-width});
    }
    
    .content-wrapper {
      margin-left: 0;
    }
  }
}

The SCSS styling system provides:

Complete visual customization through variables
Modular component organization
Bootstrap 4 integration and extension
Dark theme and alternative color scheme support
Responsive design controls
Third-party plugin integration
Utility class generation system