Extension SCSS Theme Structure


Extension Basics

Title
SCSS Theme Structure
Name
ckanext-scss
Type
Public extension
Description
SCSS-based theme framework with mobile-first Bootstrap 5 architecture
CKAN versions

~2.9, ~2.10, ~2.11

Show details
Download-Url (zip)
Download-Url commit date
2025-03-15
Url to repo
Category
Specialized Tools


Background Infos

Description (long)
Show details

A comprehensive SCSS theme structure and compilation framework for CKAN that implements modern web design principles. The extension provides a complete theme architecture organized into base styles, abstracts (variables, mixins, functions), components (buttons, forms, tables, etc.), layout (header, footer), and page-specific styles. It follows 7 core styling principles: mobile-first responsive design, component-based architecture, BEM naming methodology, Bootstrap 5 utility classes, Sass variables for theming, REM units for accessibility, and reusable Sass mixins. The framework includes a complete development workflow with NVM for Node.js version management, npm scripts for compilation (dev mode with source maps and watch, production mode with minification), and detailed examples for all design patterns.

Version
0.0.1
Version release date
2025-03-15
Contact name
DataShades
Contakt email
(not set)
Contact Url
(not set)


Installation Guide

Configuration hints

Add ‘scss’ to ckan.plugins in your CKAN configuration. Theme Structure: base/ (fonts, reset), abstracts/ (animations, functions, mixins, placeholders, primitives, variables), components/ (badges, breadcrumb, buttons, dropdown, facets, forms, pagination, tables, tooltip), layout/ (header, footer), pages/ (dataset, home, resource). 7 Styling Principles: 1) Mobile-First Approach - Bootstrap 5 methodology, design for mobile then enhance for larger screens using @include m.media-breakpoint-up(sm) and (lg). 2) Component-Based Approach - Independent reusable components in separate SCSS files. 3) BEM Naming - Block__Element–Modifier convention (e.g., .card, .card__title, .card–featured). 4) Bootstrap 5 Classes - Utility classes for layout (d-flex, justify-content-*, align-items-), spacing (m-, p-), display (d-none, d--block). 5) Sass Variables - Single source of truth for colors, breakpoints, using color.adjust() and maps. 6) REM Units - Relative to root (16px default), use to_rem() function, conversion: 10px=0.625rem, 12px=0.75rem, 14px=0.875rem, 16px=1rem, 24px=1.5rem, 32px=2rem, 48px=3rem, 64px=4rem. 7) Sass Mixins - Reusable blocks with parameters for flex-center, transitions, responsive fonts. Compilation Setup: Install NVM (Node Version Manager), run ‘nvm i’ from project folder to install correct Node.js version from .nvmrc. Setup: ‘npm ci’ for clean install using package-lock.json. Development: ‘npm run dev’ for watch mode with source maps, tracks SCSS changes automatically. Production: ‘npm run build’ for minified styles deployment. Examples included for all patterns in README.

Plugins to configure (ckan.ini)
scss
CKAN Settings (ckan.ini)
(not set)
DB migration to be executed
(not set)
<< back to Extensions