Skip to content

Commit 969e4ac

Browse files
committed
Update docs
1 parent e4cf7f5 commit 969e4ac

1 file changed

Lines changed: 27 additions & 6 deletions

File tree

docfx/articles/blazor/RENDERABLECONTENT.md

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -238,18 +238,39 @@ Result:
238238

239239
### **Styling**
240240

241-
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.
241+
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.
242242

243-
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:
243+
To add the styles to your Blazor application, reference the CSS file in your *_Host.cshtml* (or *App.razor* for .NET 8+ Blazor applications):
244244

245+
```html
246+
<link rel="stylesheet" href="/_content/AXSharp.Presentation.Blazor.Controls/css/momentum.css">
245247
```
246-
<link rel="stylesheet" href="/_content/AXSharp.Presentation.Blazor.Controls/css/ix-bootstrap.min.css">
248+
249+
If you are also using the Operon library, include its stylesheet as well:
250+
251+
```html
252+
<link rel="stylesheet" href="/_content/Inxton.Operon/css/momentum.css">
247253
```
248-
It is possible to add built-in javascript libraries as well:
254+
255+
#### Building Custom Styles
256+
257+
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:
258+
249259
```
250-
<script src="/_content/AXSharp.Presentation.Blazor.Controls/js/ix-bootstrap.bundle.min.js"></script>
251-
<script src="/_content/AXSharp.Presentation.Blazor.Controls/js/jquery-3.6.0.min.js"></script>
260+
src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/tailwind.css
252261
```
262+
263+
To rebuild the styles:
264+
265+
1. Ensure Node.js is installed on your system
266+
2. Navigate to the `AXSharp.Presentation.Blazor.Controls` directory
267+
3. Run `npm install` to install dependencies (if not already done)
268+
4. Run the Tailwind CLI to build the CSS:
269+
```
270+
npx @tailwindcss/cli -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/momentum.css --minify
271+
```
272+
273+
> **Note:** The build process automatically handles the Tailwind CSS compilation when you run the project build script.
253274
### **Custom components libraries**
254275

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

0 commit comments

Comments
 (0)