Tag Archives: css

Using CSS Media Queries for Responsive UI Design

Using something like Bootstrap for a responsive UI covers most of the bases. But if you need more control, it’s a good idea to get familiar with Media Queries in CSS. It might come in handy some time, plus that is what Bootstrap uses under the hood as well, and it never hurts to learn how the tools you use work. The Mozilla page on media queries goes into just the right amount of detail and gives you a good outline of everything you can do with it.

To be very brief though, here is how you use a media query in CSS:

@media query { normal-css }

This scopes it so that the CSS within the query (i.e. normal-css above) is applied only when the condition dictated by query is true. So, you could use it to say apply this style when the width or height or in a given range, or if we’re using a given type of device, or color setting, and so on.

The following, for example, sets the background color of the body to red only when the view area width is 300 pixels or more (stupid usage scenario, I know, but you get the point as to how this could be used to make your UI responsive in all sorts of ways):

@media (min-width: 300px) { 
   body {
     background-color: red;
   }
}

A powerful tool to have in your chest when building user interfaces.

Advertisements

Dancing with Responsive Design

I have been hearing about responsive design on and off for some time now, and it has always appealed to me as a pattern to follow for web-based user interfaces. CSS3 is obviously quite powerful and media queries provide a relatively easy way to build one unified UI that looks great on PCs, but then adapts and shape-shifts accordingly when viewed on a smartphone or tablet without having to completely re-implement a “mobile site” as so many do today. Since UI design is not my core area, though, I never could quite gather the energy to do something with it. Then I saw support for responsiveness in the new Bootstrap 3. Like with all other aspects of web UI design, it makes responsiveness that much easier as well. As added motivation, I tried out my To Do application in my smartphone – and it looked awful.

In the spirit of rolling my own, my next application I wanted to build for myself was a simple list maker that I could use for groceries, shopping, and other checklists. Since something like that would find its best use across multiple types of devices (and since I am not quite ready to jump into native mobile development just yet), it seemed like the perfect opportunity to try out responsive design with Bootstrap. After getting over a slight upgrade shock after switching from Bootstrap 2.3 to 3 (helped quite a bit by this post here), things became quite easy.

The end result is my new application, so very imaginatively titled My Lists– deployed here (again, be aware that this is a development instance), and open sourced here. Here is a screenshot of what it looks like in PCs and in tablets in landscape:

Image

Here is a screenshot of what it looks like in a smartphone and in tablets in portrait:

Image

Rest of the technology is pretty much the same as To Do– .NET REST API, AngularJS and MongoDB.

Responsive design takes a little getting used to, but I think is quite worth it.

TypeScript, AngularJS and Bootstrap: The Killer Combo

After having recently used this combination, I am in love with it. For those unfamiliar with any of these, here are quick one liners:

TypeScript is a JavaScript superset from Microsoft that compiles down to JavaScript and adds static typing and other neat features like classes and what not. It is worth mentioning that none other than Anders Hejlsberg (the father of C#) was involved in its development.

AngularJS is a JavaScript framework geared towards building rich and testable single-page applications. This one comes from none other than Google.

Bootstrap is a JavaScript/CSS based UI library from Twitter that provides you with a foundation to build killer UIs with little effort.

These are all open source and have good community support. It is interesting that a combination of technologies from Microsoft, Twitter and Google would gel so well. If you’re building a web application with a JavaScript-heavy frontend (which is what the tide has shifted to these days), I have found AngularJS to be most superior so far. I should qualify that by saying by experience with similar frameworks other than Angular is limited to Backbone and Knockout – but I believe that is a sufficient sample. There are countless comparisons of these frameworks side by side all over the web, so I will not get into details on that. As far as Bootstrap is concerned, the ease with which I can now build amazing professional looking and consistent user interfaces is amazing. I would go so far as to say I would not need a designer to do any of my UI or CSS work. Whatever CSS I know (and everyone should know a little CSS, I guess) proves more than sufficient. If you dabble in LESS, you can even get the LESS version of Bootstrap and go crazy.

I believe AngularUI also has a Bootstrap extension, although I have not used that particular library yet. Just vanilla and Angular are proving to be enough for me now, but it is nice to know it’s out there should I ever need it. Now, since you’ll be writing quite a bit of JavaScript with Angular, it has been my experience that TypeScript makes your job easier by an order of magnitude. No more functions within functions within functions to get the behavior of a class – no more weird bugs due to casting errors that went unnoticed. There is a TypeScript declarations file for Angular available here – just drop it in and you’re ready to roll with Angular and TypeScript. Getting that IntelliSense pop up when you type “angular” and hit the dot is a nice feeling.

Two things I miss from Knockout though are how easy it was to subscribe to observables and the notion of computed properties. I know you can do all of this in Angular, but the way you did it in Knockout still seems more intuitive to me. Perhaps I have not fully transitioned to the Angular way of thinking yet. One bone to pick also with TypeScript – it would be nice if there was an object initializer syntax similar to C#. One of the powers of JavaScript is being able to assign an object literal in JSON directly to a variable. That leads to abundant brevity (is that an oxymoron?) which is always good in code. With TypeScript, if your variable is of type Foo, you can’t just assign an object literal that resembles a Foo instance as the compiler has no way of knowing what it exactly is. So you’re stuck with having to create a new Foo, assign all the properties, and so on. I wish they would introduce object initializers. That would be gravy.

All this aside, if you are contemplating building rich web frontends, I strongly recommend this combination.