Using Semantic UI and ASP.NET Core Together

After thinking a lot about my blogging app I decided to start over somewhat on the UI of the site and to simplify things in general. In so doing, Razor seemed like the best option, as I won't have a lot of complexity in either the UI or the middle tier. Since I'm re-thinking the view layer anyway, it felt like a good time to investigate one of the awesome new UI frameworks I've heard about. After some review, Semantic UI was my favorite, so after choosing to use it I found there are a few various resources on the web about using Semantic UI with ASP.NET at various levels of completeness, so I chose to write this one. In this post, I'll walk through the basic steps of using dotnet new along with the Semantic UI getting started experience to blend the two together. There's an accompaying repository if you prefer to just dive in.

Semantic UI and ASP.NET Core

Every great project has to start somewhere. Mine always start with a brand new, spanking clean directory. My app will live in semantic-aspnet. The folks over at Semantic UI have a great getting started article. Take a look at it to get the details, but for the impatient, getting started is as simple as:

npm install semantic-ui --save

Install Semantic UI

Once NPM performs the magical routine of bringing all your site's dependencies down, you'll notice a call to gulp install at the very end of the process. This launches a friendly Semantic UI step-by-step wizard. Since I have no idea what I'm doing as this is my first rodeo with Semantic UI, I'll be gentle and accept the defaults.

Install output

The obvious next step - open the directory up in Visual Studio Code, 2018's favorite software development environment. Then the real fun can begin.

CLI output

The semantic.json file contains configuration that's used by Semantic UI's Gulp build process (don't worry, we'll cover that next, and it's not complicated) to know where to drop files produced by the build. There are a ton of components (Button, Flags even a Reveal) in Semantic UI, and with all those modules come a good number of .css and .js files. They get minified and packaged up awesomely by the gulp build command.

Note: Take note that you need to CD into the semantic folder (the folder identified by the base property in semantic.json) before running gulp build.

Gulp build

When the build completes, all of the files needed to run Semantic UI will be in my semantic\dist folder.

Gulp build output

That's no good, since I know I'll need to have those files in the static files area - the wwwroot folder - so I need to make some tweaks to the configuration. Specifically, I'll swap all the instances of dist with ../wwwroot/semantic. That way, I'll be able to edit my .cshtml files in the Pages folder, my C# source code, and my UI layer by making use of the great theming capabilities and layout features Semantic UI offers. Once I tweak the configuration I can simply run the gulp build command once more, and...

Edit to wwwroot

Voila! Now, the Semantic UI's output is dropped into the wwwroot folder. With it there, I'll be able to drop in the .NET Core stuff next. That way, the Semantic UI distribution components fit nicely inline with the conventions I'm used to when I'm building ASP.NET Core Razor page apps.

Build in wwwroot

Now I'll run dotnet new razor to lay down the ASP.NET source code I'll need to get started. It'll drop down the typical Bootstrap UI layer, but I can delete the lib folder altogether since I'll be using Semantic UI.

DotNet new

Since I'm no longer using Bootstrap I can refer to the Semantic UI docs on including Semantic UI in my site's HTML, as well as stripping out most of the remaining HTML from the layout page.

Most basic HTML starting point

Then I pull over the navigation and footer HTML from the fixed layout sample, and rip the body area as well to surround the call to @RenderBody(), edit the index.cshtml file some to just show a basic text paragraph. All of the source code for this super-basic beginning is in the accompanying repository, but the results look pretty nice.

Resulting layout

Summary

I've taken a look at Semantic UI as it's been years since I tried a new UI framework. As with any new trick or sauce, it takes a little trial-and-error to get things perfect, but the effort is minimal to get tweak your new ASP.NET Razor app to make use of Semantic UI. I'm still learning about the theming capabilities; there are so many awesome things the folks at Semantic UI give you to make creating your own color schemes and layouts a breeze. Hope this helps you if you're thinking of using the two together, and getting started literally takes 10 minutes. Happy coding!

Brady Gaster
Hi! I'm a christian dad who lives near Seattle, where I work with the talented folks at Microsoft to create compelling demonstrations for conferences that instruct and inspire developers who want to party in the cloud.