feat: add custom Bootstrap styling with SCSS support
Implement SCSS-based custom styling system to enable Bootstrap customization while maintaining CDN delivery for core framework. Changes: - Add Hugo Pipes SCSS processing pipeline using css.Sass - Create modular SCSS file structure (main.scss, _variables.scss, _custom.scss) - Implement custom typography (base font size 1.25rem, adjusted heading sizes) - Add custom link colors (#0b0089 primary, #0052a3 hover) - Configure CSS minification and SHA-384 fingerprinting for cache busting - Add comprehensive SCSS styling documentation Technical details: - Updated baseof.html to compile SCSS with Hugo Pipes - CSS loads after Bootstrap CDN for proper cascade - Minified output (~154 bytes) - Supports live reload in development mode 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -0,0 +1,18 @@
|
||||
## Why
|
||||
The site currently uses Bootstrap 5.3.2 from CDN with default styling. To establish a unique visual identity and brand consistency, we need the ability to customize Bootstrap variables (font sizes, colors, spacing) and add custom styles without modifying the core framework.
|
||||
|
||||
## What Changes
|
||||
- Add Hugo SCSS/SASS processing pipeline using Hugo Pipes
|
||||
- Create custom SCSS file structure for Bootstrap variable overrides and custom styles
|
||||
- Maintain Bootstrap CSS from CDN for core framework
|
||||
- Compile custom styles to supplement Bootstrap defaults
|
||||
- Enable customization of heading font sizes, link colors, and other design tokens
|
||||
|
||||
## Impact
|
||||
- Affected specs: `styling` (new capability)
|
||||
- Affected code:
|
||||
- `layouts/_default/baseof.html` - Update to include compiled custom CSS
|
||||
- `assets/scss/` - New directory for SCSS files
|
||||
- `hugo.toml` - May need configuration for SCSS processing
|
||||
- No breaking changes to existing functionality
|
||||
- Performance: Minimal impact, adds one additional CSS file (~few KB)
|
||||
@@ -0,0 +1,65 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: SCSS Processing Pipeline
|
||||
The system SHALL process SCSS files using Hugo Pipes to generate custom CSS that supplements Bootstrap's CDN-provided styles.
|
||||
|
||||
#### Scenario: SCSS compilation on build
|
||||
- **WHEN** Hugo builds the site
|
||||
- **THEN** SCSS files in `assets/scss/` are compiled to CSS
|
||||
- **AND** the compiled CSS is fingerprinted for cache busting
|
||||
- **AND** the resulting CSS file is included in the HTML output
|
||||
|
||||
#### Scenario: Development mode with live reload
|
||||
- **WHEN** running Hugo in development mode (hugo server)
|
||||
- **THEN** SCSS changes trigger automatic recompilation
|
||||
- **AND** the browser live-reloads with updated styles
|
||||
|
||||
### Requirement: Bootstrap Variable Customization
|
||||
The system SHALL allow customization of Bootstrap design tokens through SCSS variables without modifying the CDN-provided Bootstrap CSS.
|
||||
|
||||
#### Scenario: Override heading font sizes
|
||||
- **WHEN** custom heading sizes are defined in SCSS variables
|
||||
- **THEN** the compiled CSS applies these sizes to heading elements
|
||||
- **AND** the Bootstrap CDN CSS is loaded first (base styles)
|
||||
- **AND** custom CSS is loaded after (overrides)
|
||||
|
||||
#### Scenario: Override link colors
|
||||
- **WHEN** custom link colors are defined in SCSS variables
|
||||
- **THEN** links across the site use the custom colors
|
||||
- **AND** link hover states use appropriate custom colors
|
||||
|
||||
#### Scenario: Override spacing scale
|
||||
- **WHEN** custom spacing values are defined
|
||||
- **THEN** elements using those spacing classes reflect the custom values
|
||||
|
||||
### Requirement: Custom Style Organization
|
||||
The system SHALL organize custom styles in a maintainable SCSS file structure following Hugo and SASS best practices.
|
||||
|
||||
#### Scenario: Main SCSS entry point
|
||||
- **WHEN** Hugo processes SCSS
|
||||
- **THEN** a single main SCSS file serves as the entry point
|
||||
- **AND** this file imports Bootstrap variable overrides
|
||||
- **AND** this file imports custom component styles
|
||||
- **AND** this file imports custom utility styles
|
||||
|
||||
#### Scenario: Modular SCSS files
|
||||
- **WHEN** developers add new custom styles
|
||||
- **THEN** styles can be organized into separate partial files
|
||||
- **AND** partial files are imported into the main SCSS file
|
||||
- **AND** file naming follows SCSS conventions (e.g., `_variables.scss`, `_custom.scss`)
|
||||
|
||||
### Requirement: CSS Output Integration
|
||||
The system SHALL integrate compiled custom CSS into the base layout template alongside Bootstrap CDN CSS.
|
||||
|
||||
#### Scenario: CSS load order
|
||||
- **WHEN** a page is rendered
|
||||
- **THEN** Bootstrap CDN CSS loads first
|
||||
- **AND** custom compiled CSS loads second
|
||||
- **AND** CSS files include integrity hashes where applicable
|
||||
- **AND** the custom CSS file path includes a fingerprint for cache busting
|
||||
|
||||
#### Scenario: Production build optimization
|
||||
- **WHEN** building for production
|
||||
- **THEN** SCSS is compiled with minification
|
||||
- **AND** the output CSS is optimized for file size
|
||||
- **AND** source maps are not included in production builds
|
||||
@@ -0,0 +1,30 @@
|
||||
## 1. SCSS Infrastructure Setup
|
||||
- [x] 1.1 Create `assets/scss/` directory structure
|
||||
- [x] 1.2 Create main SCSS entry file `assets/scss/main.scss`
|
||||
- [x] 1.3 Create Bootstrap variable overrides file `assets/scss/_variables.scss`
|
||||
- [x] 1.4 Create custom styles file `assets/scss/_custom.scss`
|
||||
|
||||
## 2. Hugo Pipes Integration
|
||||
- [x] 2.1 Update `layouts/_default/baseof.html` to process SCSS with Hugo Pipes
|
||||
- [x] 2.2 Configure SCSS compilation with `css.Sass` (updated from deprecated `resources.ToCSS`)
|
||||
- [x] 2.3 Add fingerprinting for cache busting with `resources.Fingerprint`
|
||||
- [x] 2.4 Ensure correct CSS load order (Bootstrap CDN first, then custom)
|
||||
|
||||
## 3. Initial Custom Styles
|
||||
- [x] 3.1 Add heading font size customizations to `_variables.scss`
|
||||
- [x] 3.2 Add link color customizations to `_variables.scss`
|
||||
- [x] 3.3 Test variable overrides render correctly
|
||||
- [x] 3.4 Verify styles cascade properly over Bootstrap defaults
|
||||
|
||||
## 4. Testing & Validation
|
||||
- [x] 4.1 Test SCSS compilation in development mode (hugo server)
|
||||
- [x] 4.2 Test production build (hugo build)
|
||||
- [x] 4.3 Verify live reload works with SCSS changes
|
||||
- [x] 4.4 Check generated CSS file size and performance (154 bytes minified)
|
||||
- [x] 4.5 Validate CSS output is minified in production
|
||||
- [x] 4.6 Test in multiple browsers for consistency
|
||||
|
||||
## 5. Documentation
|
||||
- [x] 5.1 Document SCSS file structure and conventions
|
||||
- [x] 5.2 Add examples of how to customize Bootstrap variables
|
||||
- [x] 5.3 Document the CSS compilation and caching strategy
|
||||
Reference in New Issue
Block a user