Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions docfx/articles/blazor/RENDERABLECONTENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -238,18 +238,39 @@ Result:

### **Styling**

AXSharp.Presentation.Blazor contains in-built styles. Styling is provided by [Bootstrap library](https://getbootstrap.com/). In-built styles can be customized with Sass technology, which will produce SCSS files. SCSS files can be compiled into one CSS file which can be used as application-wide style.
AXSharp.Presentation.Blazor contains in-built styles. The styling is provided by `momentum.css`, a custom CSS file built with [Tailwind CSS](https://tailwindcss.com/). This approach consolidates all styling into a single dependency for better maintainability.

Currently, the framework contains a default style that can be added as a reference in the Blazor application file *_Host.cshtml* in the following way:
To add the styles to your Blazor application, reference the CSS file in your *_Host.cshtml* (or *App.razor* for .NET 8+ Blazor applications):

```html
<link rel="stylesheet" href="/_content/AXSharp.Presentation.Blazor.Controls/css/momentum.css">
```
<link rel="stylesheet" href="/_content/AXSharp.Presentation.Blazor.Controls/css/ix-bootstrap.min.css">

If you are also using the Operon library, include its stylesheet as well:

```html
<link rel="stylesheet" href="/_content/Inxton.Operon/css/momentum.css">
```
It is possible to add built-in javascript libraries as well:

#### Building Custom Styles

If you need to customize the styles, you can modify the Tailwind CSS source file and rebuild the `momentum.css`. The source file is located at:

```
<script src="/_content/AXSharp.Presentation.Blazor.Controls/js/ix-bootstrap.bundle.min.js"></script>
<script src="/_content/AXSharp.Presentation.Blazor.Controls/js/jquery-3.6.0.min.js"></script>
src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/tailwind.css
```

To rebuild the styles:

1. Ensure Node.js is installed on your system
2. Navigate to the `AXSharp.Presentation.Blazor.Controls` directory
3. Run `npm install` to install dependencies (if not already done)
4. Run the Tailwind CLI to build the CSS:
```
npx @tailwindcss/cli -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/momentum.css --minify
```

> **Note:** The build process automatically handles the Tailwind CSS compilation when you run the project build script.
### **Custom components libraries**

AXSharp.Presentation.Controls framework provides possibility to create a custom library of components with corresponding views.
Expand Down