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.
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
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.
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
.js files. They get minified and packaged up awesomely by the
gulp build command.
Note: Take note that you need to CD into the
semanticfolder (the folder identified by the
semantic.json) before running
When the build completes, all of the files needed to run Semantic UI will be in my
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
../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...
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.
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.
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.
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.
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!