Styling & UX
Relevant source files
The following files were used as context for generating this wiki page:
The Styling and User Experience (UX) of Actionmap is built upon a modern Rails asset pipeline utilizing Webpacker to integrate industry-standard CSS frameworks and interactive JavaScript libraries. The system focuses on providing a responsive, clear, and interactive interface for users to navigate geographical data and political information.
The visual identity is primarily driven by the Bootstrap framework and the "Cosmo" theme from Bootswatch, supplemented by custom SCSS for specific components like interactive SVG maps and form error handling. Interactive elements are enhanced using libraries like Select2 for stylized dropdowns and Timeago for human-readable timestamps.
Frontend Architecture & Dependencies
The project uses a hybrid approach to asset management, combining the traditional Rails asset pipeline for static images and topojson files with Webpacker for modern JavaScript and SCSS compilation.
Core Frameworks
Actionmap relies on several key libraries to manage its UI/UX:
| Library | Purpose | Source |
|---|---|---|
bootstrap | Core UI components and grid system | package.json:17 |
bootswatch | Application-wide "Cosmo" theme | package.json:18, app/javascript/stylesheets/application.scss:2-4 |
@fortawesome/fontawesome-free | Vector icons for visual cues | package.json:15, app/javascript/packs/application.js:31 |
select2 | Enhanced selection boxes with Bootstrap theme | package.json:25, app/javascript/packs/application.js:37-39 |
timeago | Automatic updating of fuzzy timestamps | package.json:26, app/javascript/packs/application.js:34-36 |
Asset Processing Flow
The frontend assets are processed through a pipeline involving PostCSS for browser compatibility and Webpacker for module bundling.
Styling Implementation
Global Styles and Theming
Global styles are managed through application.scss, which imports the Bootswatch Cosmo variables and the main Bootstrap library. This ensures a consistent look and feel across the application while allowing for overrides.
Specific global style rules include:
- Default Links: Black by default, changing to white text on a black background when hovered.
- Typography: Verdana, Arial, Helvetica, sans-serif is used for primary text.
- Layout: A default margin of 33px is applied to the body in the scaffold styles.
Sources: app/javascript/stylesheets/application.scss:2-4, app/assets/stylesheets/scaffold.css:1-15
Interactive Map Styling
Maps are rendered as SVGs where regions (states/counties) are represented by <path> elements. The styling for these elements is defined in both global SCSS and specific map-related JS files.
- Default Path Style: Paths have a light gray fill (
#ccc) and a white stroke (#fff) with a width of0.5px. - Active/Selected State: In specific views, like the county map, the selected region is highlighted using a blue fill (
#2780E3). - Responsiveness: Map containers use
overflow-x: autoandwhite-space: nowrapto handle smaller viewports.
Sources: app/javascript/stylesheets/application.scss:6-15, app/javascript/packs/county_map.js:16-18
User Experience Components
Dynamic Map Interactions
The UX is heavily focused on geographical navigation. The interaction flow typically involves hovering for information and clicking to drill down into more specific regions (e.g., from a National Map to a State Map).
Form Feedback and Errors
UX for data entry is managed through specific CSS classes that provide immediate visual feedback for validation errors.
- Error Indicators: The class
.field_with_errorsis used to highlight problematic inputs, applying red text or backgrounds. - Error Explanations: A specific
#error_explanationblock is used to aggregate validation messages, styled with a prominent red border and header.
Sources: app/assets/stylesheets/scaffold.css:40-66, app/javascript/stylesheets/application.scss:22-24
Visual Assets and Icons
The application utilizes a standardized set of icons and branding assets:
- Icons: FontAwesome is used to "improve page visuals" through standardized vector icons.
- Favicons: A comprehensive set of favicons for different platforms (iOS, Windows, Android Chrome) is generated based on a master picture (
saasbook.jpeg).
Sources: app/javascript/packs/application.js:31, config/favicon.json:1-55
Conclusion
The Styling & UX module of Actionmap provides a robust framework for visualizing political data. By leveraging Bootstrap for structural layout and D3.js for interactive mapping, the application ensures that users can intuitively navigate from a national level down to specific county-based representative information while maintaining visual consistency and accessibility through standardized error handling and typography.