JFS.Components 1.0.0

JFS.Components

A collection of reusable Blazor components styled with Bootstrap 5.3+ that provide a consistent UI experience with the JFS prefix.

Installation

Install the package via NuGet Package Manager:

dotnet add package JFS.Components

Or via Package Manager Console in Visual Studio:

Install-Package JFS.Components

Prerequisites

• .NET 9.0 or later
• Bootstrap 5.3 or later (must be included in your project)

Setup

1. Include Bootstrap CSS

Ensure Bootstrap 5.3+ is included in your project. Add this to your wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

2. Include JFS Components CSS

Add the JFS Components CSS to your project:

<link href="_content/JFS.Components/jfs-components.css" rel="stylesheet" />

3. Add Component References

Add the following to your _Imports.razor file:

@using JFS.Components

Available Components

Card Components

JFS.Card

A wrapper component that creates a Bootstrap card container.

Parameters:

• ChildContent (RenderFragment): The content to render inside the card
• CssClass (string): Additional CSS classes to apply
• AdditionalAttributes (Dictionary<string, object>): Additional HTML attributes

JFS.CardHeader

A component for the card header section.

Parameters:

• ChildContent (RenderFragment): The content to render inside the card header
• CssClass (string): Additional CSS classes to apply
• AdditionalAttributes (Dictionary<string, object>): Additional HTML attributes

JFS.CardBody

A component for the main card content area.

Parameters:

• ChildContent (RenderFragment): The content to render inside the card body
• CssClass (string): Additional CSS classes to apply
• AdditionalAttributes (Dictionary<string, object>): Additional HTML attributes

JFS.CardFooter

A component for the card footer section.

Parameters:

• ChildContent (RenderFragment): The content to render inside the card footer
• CssClass (string): Additional CSS classes to apply
• AdditionalAttributes (Dictionary<string, object>): Additional HTML attributes

Usage Examples

Basic Card

<JFS.Card>
    <JFS.CardHeader>
        <h5 class="card-title mb-0">Card Title</h5>
    </JFS.CardHeader>
    <JFS.CardBody>
        <p class="card-text">This is the main content of the card.</p>
        <button class="btn btn-primary">Action Button</button>
    </JFS.CardBody>
</JFS.Card>

Card with Custom CSS Classes

<JFS.Card CssClass="shadow-lg border-primary">
    <JFS.CardHeader CssClass="bg-primary text-white">
        <h5 class="card-title mb-0">Featured Card</h5>
    </JFS.CardHeader>
    <JFS.CardBody>
        <p class="card-text">This card has custom styling applied.</p>
    </JFS.CardBody>
    <JFS.CardFooter CssClass="text-muted">
        <small>Last updated 3 mins ago</small>
    </JFS.CardFooter>
</JFS.Card>

Card with Additional Attributes

<JFS.Card id="special-card" data-testid="main-card">
    <JFS.CardBody>
        <h5 class="card-title">Card with Custom Attributes</h5>
        <p class="card-text">This card has additional HTML attributes.</p>
    </JFS.CardBody>
</JFS.Card>

Responsive Card Layout

<div class="row">
    <div class="col-md-4">
        <JFS.Card CssClass="h-100">
            <JFS.CardHeader>
                <h6 class="card-title mb-0">Card 1</h6>
            </JFS.CardHeader>
            <JFS.CardBody>
                <p class="card-text">Content for the first card.</p>
            </JFS.CardBody>
        </JFS.Card>
    </div>
    <div class="col-md-4">
        <JFS.Card CssClass="h-100">
            <JFS.CardHeader>
                <h6 class="card-title mb-0">Card 2</h6>
            </JFS.CardHeader>
            <JFS.CardBody>
                <p class="card-text">Content for the second card.</p>
            </JFS.CardBody>
        </JFS.Card>
    </div>
    <div class="col-md-4">
        <JFS.Card CssClass="h-100">
            <JFS.CardHeader>
                <h6 class="card-title mb-0">Card 3</h6>
            </JFS.CardHeader>
            <JFS.CardBody>
                <p class="card-text">Content for the third card.</p>
            </JFS.CardBody>
        </JFS.Card>
    </div>
</div>

Component Prefixing

All components use the JFS prefix to avoid naming conflicts with other component libraries. The components are designed to work seamlessly with Bootstrap's CSS classes while providing additional customization options.

Styling

The components come with minimal additional styling that enhances Bootstrap's default card styling:

• Subtle box shadows for depth
• Enhanced border radius
• Custom footer styling with proper contrast
• Consistent spacing and typography

You can override any styling by providing custom CSS classes via the CssClass parameter or by targeting the component-specific CSS classes (e.g., .jfs-card, .jfs-card-header, .jfs-card-body, .jfs-card-footer).

Browser Support

This library supports all modern browsers that are compatible with:

• Bootstrap 5.3+
• Blazor/.NET 9.0+

Contributing

Contributions are welcome! Please ensure that:

1. All components follow the established naming convention with the JFS prefix
2. Components are styled with Bootstrap classes as the foundation
3. Additional custom styling is minimal and enhancement-focused
4. All components include proper documentation and examples

License

This project is licensed under the MIT License.

Changelog

Version 1.0.0

• Initial release
• Card, CardHeader, CardBody, and CardFooter components
• Bootstrap 5.3+ integration
• Comprehensive documentation and examples