Considerations for Making a CSS Framework

Eight months ago, I launched Halfmoon, a Bootstrap alternative boasting a built-in dark mode, ideal for dashboards and tools. While that remains true, I want to highlight a crucial, often underestimated aspect: customization and user personalization. The industry undervalues the power of letting users tailor their design experience. This isn't just about design systems; it's about framework functionality. Halfmoon directly addresses these needs.

Is Halfmoon Right for You?

Before proceeding, consider these questions:

• Building a dashboard, tool, or documentation site? Halfmoon offers unique components for these.
• Familiar with Bootstrap's classes but desire a more premium aesthetic?
• Do your users expect a dark mode?
• Prefer minimal dependencies? Halfmoon avoids jQuery and CSS preprocessors; it's pure CSS and JavaScript.
• Frustrated with complex build systems? Halfmoon has none – simply include the files (locally, via CDN, or npm) and start building.

A "yes" to any question suggests Halfmoon is worth exploring. However, Halfmoon isn't a React/Vue/Angular UI library. If you prefer purely utility-driven development, Tailwind CSS might be a better fit. Halfmoon adopts a balanced approach: combining utilities with semantic classes for common components.

Leveraging CSS Custom Properties

CSS custom properties are game-changers, poised to replace preprocessor variables. With excellent browser support, they're becoming standard.

Halfmoon utilizes over 1,500 global CSS variables, enabling extensive customization. It's not just about color; nearly everything is customizable by overriding a property. The documentation provides clear examples.

While other frameworks use Sass or Less variables, Halfmoon's reliance on native CSS custom properties eliminates build dependencies, enhancing flexibility and tech-stack neutrality. However, managing numerous variables requires careful consideration. Prioritize variables to enhance flexibility, but be mindful of maintainability.

Component Selection

Choosing which components to include is crucial. While a passion project might include everything, practicality dictates selectivity.

Halfmoon currently offers most components found in frameworks like Bootstrap or Bulma, but its focus on dashboards and tools results in unique features:

• Five sidebar types with built-in toggles and overlays.
• Two navbar types, including a bottom-aligned option for action buttons.
• Omni-directional dropdowns (12 placements).
• Enhanced form components.
• Built-in keyboard shortcut system.
• Extensive responsive utility classes.

The built-in dark mode, broad customizability, and standard component feel make Halfmoon well-suited for web tools and dashboards. Future updates will include a form validator, more form components, a multi-select component, date/time picker, data table, etc.

Missing components (tabs, list groups, spinners) are planned for v1.2.0. Others (carousels, tree navigation, avatars) are currently out of scope.

Enabling User Preferences

Frameworks often overlook user preference settings (font size, theme). The web is catching up to what operating systems have offered for years.

Examples of web personalization include:

1. Color mode selection: Automatic saving and respect for user preferences, or even syncing with OS settings.
2. Element sizing: Especially font size, allowing readability adjustments beyond browser zoom.
3. Content compactness: Options for large padding/rounded corners versus tighter layouts.
4. Primary color setting: A cosmetic but appealing feature.
5. High contrast mode: Crucial for accessibility, often lacking in frameworks due to aesthetic trade-offs.

Implementing user personalization can be challenging. However, Halfmoon's CSS variable architecture simplifies this. JavaScript can dynamically set and change CSS variables:

// Get the  tag (for reading and setting variables in global scope)
var myElement = document.documentElement;

// Read CSS variable
getComputedStyle(myElement).getPropertyValue("--variable-name");

// Set CSS variable
myElement.style.setProperty("--variable-name", "value");

Halfmoon's implementation involves:

1. User preference setting (changing a variable value).
2. JavaScript-based variable setting and storage in cookies or local storage.
3. Preference retrieval and setting on page load.

Visual examples in the documentation illustrate how to adjust font size and content compactness via variable changes.

The "Why"

User personalization enhances UX by offering choice. While less critical for landing pages, it's crucial for tools and dashboards used extensively. Halfmoon's design caters to this need. It also helps differentiate websites built with Halfmoon, focusing attention on content rather than the framework itself.

Not everything needs personalization, but understanding the framework's target audience and purpose guides these decisions.

Future Directions

Halfmoon aims to improve customization flexibility and promote design diversity. Future plans include:

• Form validator
• New components (range sliders, tabs, spinners)
• High contrast mode preference
• Multi-select component
• Date/time picker
• Data table
• GUI-based form builder
• More themes and templates

Explore the Halfmoon documentation and GitHub repository for more information.

The above is the detailed content of Considerations for Making a CSS Framework. For more information, please follow other related articles on the PHP Chinese website!