Secret ingredients to quality software

SSW Foursquare

Rules to Better UI (Bootstrap) - 6 Rules

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.

Note: There's been syntax changes in Bootstrap versions from when this was recorded. Example: In the video what was written: "col-md-offset" currently written: "offset-col-md" (according to the Bootstrap 5 docs)

  1. Writing CSS is easy. Writing a lot of CSS can become unwieldy and unmanageable. Using CSS pre-processors like LESS or SCSS helps you segment and organize your CSS logically and compiles down to regular CSS so there are extra steps to get up and running.

    The key advantage of using CSS pre-processors 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
    Bad Example: Using regular CSS, you repeat yourself a lot

    RulesLESS   less
    Good Example: Using LESS, we can structure our CSS better

    The pre-processed CSS then compiles to the regular CSS shown above.

    We recommend using SCSS for its slightly more robust language scripting, however, the differences between LESS and SCSS are minor.

  2. 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.

    23 06 2014 12 47 33 PM
    Figure: Bad example - create the default stacking layout with Bootstrap

    23 06 2014 1 04 08 PM
    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
    Figure: Good example - add additional column classes to your columns

    23 06 2014 1 14 39 PM
    Figure: Good example - On a smaller device, these columns now arrange horizontally as desired

  3. 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 correctly 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. 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
    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
    Good Example: The mobile view is now leaner and cleaner thanks to our .hidden-xs class.

  5. By default, we do not accommodate IE8 or lower, but should it arise as a specific requirement, then you can include Respond JS in your application, after Bootstrap. Respond JS enables responsive web designs in browsers that don't support CSS3 Media Queries.

    18 06 2014 2 04 12 PM
    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

    18 06 2014 2 15 09 PM
    Figure: A new MVC5 Web Application running in IE8 with Bootstrap and Respond JS

  6. Do you use the best libraries for icons?

    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
    Figure: Bad example - using images for application icons can generate a lot of pain

    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.

    Font Awesome provides scalable vector icons that can be customized purely through CSS and some are completely free for commercial projects. This is great if you’re tight on implementation deadlines and need generic icons in a hurry. In the ideal world, a specifically custom-designed icon set is the way to go.

    Using it on your project is easy, just use your email and register on their website: Get Started. Then you will be able to download and serve locally or use a CDN.

    There are hundreds of icons. Here are a few commonly used ones:

    Figure: Examples of Font Awesome iconsRead the "Basic Use" documentation.

    If you are using Azure , there is an awesome icon collection with several options for you to use:

    18 06 2014 2 33 45 PM
    Figure: Good example - a 5x scaled paper plane icon added to a Web Application

    Also check out Eric Phan's blog for more info: .

We open source. Powered by GitHub