Introducing FluentBootstrap

Extensions, helper classes, and other goodies to help you use the Bootstrap CSS framework.

Published on Wednesday, November 19, 2014

FluentBootstrap Web Site
GitHub
NuGet


I'm been using Bootstrap for a long time, and other CSS frameworks (like the now orphaned YUI) even longer. I like the way a good CSS framework gives you a lot of boilerplate and provides a jumping-off point for more complex design and functionality without having to start from scratch. As I started to integrate my ASP.NET MVC projects with Bootstrap more frequently (and then Microsoft made it part of the default ASP.NET MVC template), I became frustrated with the lack of integration between the HTML and CSS with the model and code. FluentBootstrap was born about a year ago as a way to provide strongly-typed HtmlHelpers for Bootstrap components (especially Bootstrap-styled forms). However, as I continued adding support for more and more of the Bootstrap framework, I decided just to take it all the way and support code-based helpers for all Bootstrap components. This took a long time to complete (and it's not totally done - I still need to support the JavaScript components), but today I am pleased to announce the first public release of FluentBootstrap!

Put simply, FluentBootstrap lets you output this HTML:

<nav class="navbar-static-top navbar-default navbar" 
 id="navbar" role="navigation">
 <div class="container-fluid">
  <div class="navbar-header">
   <a class="navbar-brand" href="#">FluentBootstrap</a>
   <button class="collapsed navbar-toggle" data-target="#navbar-collapse"
    data-toggle="collapse" type="button">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
   <div class="navbar-left navbar-nav nav">
    <li><a href="/">Introduction</a></li>
    <li><a href="/Installation">Installation</a></li>
    <li><a href="/Usage">Usage</a></li>
    <li><a href="/Development">Development</a></li>
   </div>
  </div>
 </div>
</nav>

By writing this code instead:

@using (var navbar = Html.Bootstrap(this).Navbar("FluentBootstrap")
    .SetPosition(NavbarPosition.StaticTop).Begin())
{
    @navbar.NavbarLink("Introduction", "/")
    @navbar.NavbarLink("Installation", "/Installation")
    @navbar.NavbarLink("Usage", "/Usage")
    @navbar.NavbarLink("Development", "/Development")
}

There's a lot more information over on the FluentBootstrap web site, so check it out. Right now I'm particularly interested in any feedback you have or bugs that you find. I'm also interested in where you'd like to see the project go. For example, would you rather see more model binding functionality, T4MVC support, etc.?

comments powered by Disqus