Rules to Better UI (Bootstrap)

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!

Twitter Bootstrap & ASP.NET MVC - Intro / Quickstart with Ben Cull

In this video, Ben Cull walks us through Bootstrap, how it impacts your development experience and how to get the most out of it to produce functional and visually pleasing solutions.

​ ​​​​
  1. Do you always use LESS instead of plain old CSS?

    Writing CSS is easy. Writing a lot of CSS can become unweildy and unmanageable. Using LESS CSS helps you segment and organise your css logically and compiles down to regular css so there's extra steps to get up and running.

    The key advantage to using LESS CSS is nested selectors. Instead line after line of specific css selectors you can nest them and they will compile down for you. Check out this example:​

    RulesLESS - css.png
    Bad Example: Using regular CSS, you repeat yourself a lot
    RulesLESS - less.png
    Good Example: Using LESS, we can structure our css better.

    The LESS CSS above compiles down to the regular CSS shown above.

  2. Do you provide alternate sizings for Bootstrap columns?

    ​​​​​​Bootstrap provides a powerful, responsive layout with its rows and columns.

    The common way to use Bootstrap's layout system is to create a basic grid which will appear as horizontal columns on the desktop but then stack on a smaller screen such as mobiles. This is done with a single set of .col-md-* classes.

    Figure: Bad example - create the default stacking layout with Bootstrap
    23-06-2014 1-04-08 PM.png
    Figure:​ Bad example - the default stacking behavior on small devices

    Did you know you can have more control over the responsive layout by including multiple column classes? The ability to control the layout across multiple screen sizes is a powerful tool within Bootstrap. For example, if you don't want your columns to stack on smaller devices, use the smaller grid classes by adding additional column classes (e.g. .col-xs-* .col-sm-*) to the respective <div>s.

    23-06-2014 12-45-30 PM.png
    Figure: Good example - add additional column classes to your columns
    23-06-2014 1-14-39 PM.png
    ​Figure: Good example - On a smaller device, these columns now arrange horizontally as desired
  3. Do you set device width when designing responsive web applications?

    When designing a responsive website, you need to make sure that the browser understands how to correctly render your website. Device-Width informs the browser what the size of the viewport should be.

    Since we want our website to render corectly for all screen sizes, we specify that it should set the viewport to the size of the device's screen.

    <meta name="viewport" content="width=device-width" />​

    ​This ensures the browser always renders at the correct resolution for the device.

  4. Do you use Font Awesome for icons?

    ​​​​​​​​​​Bootstrap comes with a good font-based icon library to use in your web application, but there is an even better one you should use whenever you are using Bootstrap.
    When building a web application, it is common that you will need icons in the UI. Traditionally, this has been done with images (e.g. png, jpg) which leads to a lot of resource management.
    23-06-2014 11-20-02 AM.png
    Figure: Bad example - using images for application icons

    This is simplified if you are using Bootstrap, as it comes with a font-based icon library you can use in your web application. However, there is an even better third-party font-based icon library you should use when using Bootstrap.

    Font Awesome provides scalable vector icons which can be customized purely through CSS and is completely free for commercial projects. This is great if you’re tight on implementation deadlines, but is no replacement for a specifically designed icon set. However, if you need generic icons in a hurry, then use Font Awesome.

    Using it on your project is easy, just add the following stylesheet to your app:

       <link 
       href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" 
       rel="stylesheet" />​

    Then you have access to over 350 icons. Here are a few commonly used ones:

    ​​​

    Figure: Examples of Font Awesome icons

    The HTML is easy, e.g. to add the above trashbin icon.

    You can also download and reference Font Awesome locally.

    23-06-2014 11-08-06 AM.png
    Figure: After adding Font Awesome from NuGet, two lines of code add the below icon
    18-06-2014 2-33-45 PM.png
    Figure: A 5x scaled paper plane icon has been added to my Web Application

    You can get Font Awesome from NuGet or http://fontawesome.io.

    Also check out Eric Phan's blog for more info: http://ericphan.net/blog/2013/10/15/javascript-corner-font-awesome .

  5. Do you use hidden/visible classes when resizing to hide/show content?

    When designing responsive websites, it's important to consider what content is appropriate for each screen size. Desktops might have large navigation areas and extra content in a sidebar, whereas the phone might focus on other content.

    By default, bootstrap will wrap the columns and make them full width on phones. If you want to hide content rather than let it wrap you can use the following classes:

    • .hidden-xs
    • .hidden-sm
    • .hidden-md
    • .hidden-lg

    As well as being able to hide content per view, you can also selectively show it. This is helpful to add an extra sidebar for very large screens.

    • .visible-xs
    • ​.visible-sm
    • .visible-md
    • .visible-lg
    RulesBootstrap - hidden.png
    ​Bad Example: The mobile view on the right has a large unneccessary title.

    Remove the title by adding the .hidden-xs class.

        <h1 class="hidden-xs">ASP.NET</h1>​

    RulesBootstrap - hidden2.png
    G​ood Example: The mobile view is now leaner and cleaner thanks to our .hidden-xs class.
  6. Do you use Respond JS to target IE8 with Bootstrap?

    It's great when you can target modern browsers for your web application, but what happens when you want Bootstrap to work in older browsers, such as Internet Explorer 8?

    Include Respond JS in your application, after Bootstrap. Respond JS enables responsive web designs in browsers which don't support CSS3 Media Queries.

    18-06-2014 2-04-12 PM.png
    Figure: Include respond.js in your bootstrap bundle

    Note: Respond JS will be included in a new MVC5 Web Application. If you are working on an existing application, you can get it from NuGet or https://github.com/scottjehl/Respond​.

    18-06-2014 2-15-09 PM.png
    Figure: A new MVC5 Web Application running in IE8 with Bootstrap and Respond JS​
  7. Do you use the CSS class "form horizontal" to arrange your fields and labels?

    You should align labels next to the inputs on medium and large displays and above inputs on small and extra-small displays.

    Bootstrap makes this easy. Use the css class form-horizontal on your html form for it to use this behaviour by default.

    <form class="form-horizontal">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
        </div>
    </form>

    Figure: Example html using Bootstrap to get the above behaviour

    ​See http://getbootstrap.com/css/#forms-horizontal for more information.

    Related Rule

  8. Do you use Web Essentials?

    ​Web Essentials is a Visual Studio extension that greatly improves the productivity of web developers. More times than not, the features of Web Essentials make their way into Visual Studio itself.

    ​You can install Web Essentials from the Tools | Extensions and Updates menu.

    SSW - Rules - Web Essentials.png
    ​​Good Example: Web Essentials is in the Installed list.

    Be sure to make sure your visual studio version and your web essentials version are the same.

    You can find more information at the extensions website found here: http://vswebesse​ntials.com/​​

    Read more about Do you use Web Essentials?