SSW Foursquare

Rules to Better UI (Bootstrap) - 5 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" ...is currently written: "offset-col-md" (according to the Bootstrap 5 docs)

  1. Do you always use a CSS preprocessor language over plain CSS, such as LESS or SCSS?

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

    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. Do you set device width when designing responsive web applications?

    Creating a responsive website? It's important to make sure the browser renders your content correctly on any screen size. Define the proper viewport meta tag to inform web browsers they need to behave responsively.

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

    Your website's viewport should be the same width as any given device's screen. Specify this with the content attribute _device-width_.

    viewport bad
    Figure: Bad example - No viewport meta tag

    viewport good
    Figure: Good example - Correct viewport meta tag

    Resize Text

    The viewport meta tag should not set _user-scaling=no_ or a _maximum-scaling_ value less than 2. This allows us to meet accessibility standards for scalable content. See WCAG 1.4.4.

  4. Do you use display classes to responsively 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 .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

    More information on Display property - Quickly and responsively toggle the display value of components and more with our display utilities.

    RulesBootstrap   hidden
    Figure: Bad Example - The mobile view on the right has a large unnecessary title

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

    <h1 class="d-xl-none">ASP.NET</h1>

    RulesBootstrap   hidden2
    Figure: Good example - The mobile view is now leaner and cleaner thanks to Bootstrap display classes

  5. Do you use the best libraries for icons?

    When building a web application, you may eventually need icons somewhere in the UI. In the past this was done with images (e.g. png, jpg) which can create a lot of resource management, inconsistency, and other pain. Instead, you should use an icon font that provides scalable and adaptable iconography.

    Awesome icon libraries

    • Bootstrap icons are quick and easy to use with or without using Bootstrap itself. Many consider this icon library timeless, but there is another popular icon library to challenge it...
    • Font Awesome provides scalable vector icons that can be fully customized with CSS and many are completely free for commercial use. This library is especially great if you need a wide selection of generic icons in a hurry. You can also purchase a pro license to access an extended collection of variations like thin, sharp, and duotone icons.
    • Google material icons and symbols are huge sets of variable icons. These icons can be customized right down to their line weight and roundness or sharpness.
    • The Azure icon collection is an awesome set of icons if you are using Azure. Instead of browsing individually, you can also download the entire up-to-date set from the Azure Architecture Center.
    • Check out Fluent iconography if you need Microsoft flavoured icons.
    • There are many more awesome icon libraries, including open-source community projects like Lucide.

    Why you should use icons, not images

    • Scalability: Icon fonts are vector-based, which means they can be scaled up or down in size without losing quality. This is particularly important for responsive web design, where icons need to adapt to different screen sizes and resolutions. Image files, however, become pixelated and lose quality when scaled.
    • Adaptability: The customization of icon color, size, and other properties is quick and easy using simple CSS. This removes any need to create new image files for icon variants or states.
    • Consistency: Using a single icon library makes it effortless to maintain a consistent design language across your website or product.
    • Cross-browser compatibility: Complete support across all modern browsers means icon fonts are reliable and render in a predictable, consistent way across different platforms and devices.
    • Accessibility: Icons can be made accessible to screen readers by using ARIA roles and labels. Doing so ensures that users with disabilities can understand their meaning.
    • SEO: Search engines can index text-based content more effectively than images. Using icons with proper semantic HTML can improve the SEO of your website, as search engines can understand and index that content.
    • Faster loading: Icon fonts reduce the number of HTTP requests to the server. Fewer requests means faster load timing. In addition, even a small collection of image files can take a large amount of space. Icon font files are much smaller and make icon load times almost a non-issue.

    If you absolutely must use images for icons (e.g. complex custom icons) use svg files. These vector-based images function closer to an icon font, being similar in scalability, adaptability, and customization.

    23 06 2014 11 20 02 AM
    Figure: Bad example - Using images as icons generates a lot of pain

    18 06 2014 2 33 45 PM
    Figure: Good example - A 5x scaled paper plane icon on the web

We open source. Powered by GitHub