Category Archives: CSS3

Jonathan Stark – “Building mobile apps with HTML, CSS and JavaScript” workshop

Jonathan began with an overview of the current mobile landscape. In a nutshell it’s a minefield of platform fragmentation and device fragmentation.

“‘It’s brutal to develop natively across platforms”

Jonathan Stark
So what to do? Well, we then looked at three approaches; native, web and hybrid. All have their advantages but hybrid looked the way to go for most mobile use cases. In Jonathan’s words the advantages are:
  • Web files bundled in native executable
  • Access to device APIs
  • Sell in native app stores
  • Not perfect, but pretty damn good

Next we looked at some useful guidelines for the mobile use case. A nice summation would be “Do one thing and do it well”.

CSS3

We looked at various CSS3 features; advanced styling, transforms, transitions, animations etc. There’s a wealth of information out there on these so I won’t go into too much detail. Here are some interesting pointers:
  • android requires text-shadow to have a blur value.
  • box-shadow has performance issues, particularly on Blackberry (consider using media-query to turn off for Blackberry).
  • border-image is particularly interesting, as it does away with sliding doors css.
  • animations are hardware accelerated on iOS.
  • be careful of z-index on transforms. By default on it stacks above static positioned elements.
  • box-reflect works with form elements.
  • box-shadow takes up space like borders.
  • box-reflect works on <VIDEO> tag.
  • Talk of hardware acceleration for animation in the next version of Android  (Ice Cream Sandwich).
  • using lots of CSS3 gradients, animations, box-shadow will cause performance issues, tread careful and test often.
I liked the look of CSS animations. I have some reservations of how manageable they will become on medium to large projects. Having written code based animation sequences in Flash I know from experience it can get pretty complicated managing dependances and interactions. Using LESS, or SASS looks like an absolute must for using CSS animation on anything but the smallest projects.

HTML5

Next up was looking at some of the useful offline features of HTML5. Namely; web storage, web SQL database and application cache. My personal favourite was web storage – it looked easy to use and very useful for state maintenance. Application cache also looked great but I can see huge problems debugging, even Jonathan struggled to demo it properly.

Phonegap, jQTouch and Sencha Touch

Here we looked at the various frameworks for building hybrid apps. Again there is a ton of info out there. Jonathan was obviously keen on jQTouch but I actually think Phonegap looked the more promising platform for development. It seemed to have a good balance between ease of use, learning curve and features. Sencha Touch looked really powerful, whilst  jQTouch looked lightweight and quick to build with.

Debugging

In the final part of the day Jonathan showed some great debugging tools. If you’ve ever had to debug mobile CSS you know what a pain it is to debug on the device itself.  The stand out star for me was weinre, a really fantastic tool for debugging mobile apps.  The basic premise is it gives you access to the webkit inspector on your laptop which in turn is linked to the phone browser. It allows you to see exactly what is happening on the phone and allows live editing as well. Pretty amazing really.

Conclusion

Jonathan’s workshop has re-enforced my opinion that writing mobile apps for all formats is best done using HTML5 / CSS and JS.  The key benefits are:
  • write once*
  • The skills are already available and less costly than hiring native specific developers
  • one central code base
* They’ll always be some platform specific code needed.
All the slides and downloads from Jonathan’s talk are available here: http://jonathanstark.com/talks-wdx4.php

CSS3 Flexbox

CSS3 brings us a host of new features. Whilst most people will be familiar with gradients, text-shadow etc. I’d like to draw your attention to one of the lesser known modules in CSS3: flexbox. What’s interesting about Flexbox is that you can use it now if you use a Gecko or Webkit based browser (no IE sadly and Opera’s support isn’t there yet).

What does Flexbox bring us that we didn’t have before? Well it gives us a whole raft of new ways of controlling layout and flow. What we now achieve with floats we can do far more successfully and with more control with Flexbox.

I’ve never liked floats, they always seemed a hacky way of structuring HTML. Unfortunately with the meager positional CSS available, floats ended up being the best way of creating flexible fluid layouts. Let’s look at some examples.

display: box

To define an element as a flexbox we set the display to box.

.flexbox {
display: -moz-box;
display: -webkit-box;
display: box;
}

Example 1

box-orient

Notice that by default flexbox elements are aligned horizontally. If we want to change that to vertical:

.rule {
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
}

Example 2

Box-orient is inherited i.e. child elements will also be aligned horizontally.

Example 3

Observant viewer will have noticed that Firefox (3.6.8) ignores the width and height setting on the child boxes, whilst Webkit respects it but overflows the content.

So if you want child elements to be aligned vertically, you’ll need to set the containing element to box-orient:vertical.

box-ordinal-group

We can reorder elements as we like, using box-ordinal-group.

#box-2 {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}

Example 4

The immediate application of this should be obvious, for the first time we have way of defining display order without reverting to all the hacks we’ve had to use up to now (floats, relative positioning, negative margins etc). Powerful stuff.

box-flex

Box-flex allow the content to expand to fill the available space.

.rule {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}

example 5

Notice once again the difference between Webkit and Gecko; whilst Webkit expands the main block to the browser window, Gecko expands to fit the content.

Box-flex fills space in proportion to the value given. Quoting the specs:

“All flex is relative. For example, a child with a box-flex of 2 is twice as flexible as a child with a box-flex of 1.”

To explain this better lets look at an example:

#box-1 {
box-flex: 1;
}
#box-2 {
box-flex: 2;
}
#box-3 {
box-flex: 7;
}

Example 6

For ease of calculation I’ve given the H1 child element a width of 50px, and the containing element a width of 600px. So the available space is:
600px – 150px = 450px

Working out the ratio is:
1 + 2 + 7 = 10

450px / 10 = 45px

this produces:

box 1 width: 50px + (45px * 1) = 95px
box 2 width: 50px + (45px * 2) = 120px
box 3 width: 50px + (45px * 7 ) = 365px

Further more you can set relative spacing whilst having fixed width paddings and margins. If you tried that with floats you’d either have to use percentage margins or have boxes bouncing all over the place.

box-align

Box-align works in the opposite direction to the orient setting. i.e. if the element is set to horizontal, box-align controls alignment in the vertical and vica versa.

#main {
-moz-box-align: stretch;
-webkit-box-align: stretch;
box-align: stretch;
}
#box-1 {
-moz-box-align: start;
-webkit-box-align: start;
box-align: start;
}
#box-2 {
-moz-box-align: center;
-webkit-box-align: center;
box-align: center;
}
#box-3 {
-moz-box-align: end;
-webkit-box-align: end;
box-align: end;
}

example 7

box-direction

This reverses the order of elements.

#main {
-moz-box-direction: reverse;
-webkit-box-direction: reverse;
box-direction: reverse;
}

Example 8

Notice the inconsistency between Gecko and Webkit again. Gecko aligns the right hand column, whilst Webkit aligns to left but reorders the elements.

box-pack

Box-pack controls alignment in the direction set by orient.

#main {
-moz-box-pack: justify;
-webkit-box-pack: justify;
box-pack: justify;
}
#box-1 {
-moz-box-pack: center;
-webkit-box-pack: center;
box-pack: center;
}
#box-2 {
-moz-box-pack: start;
-webkit-box-pack: start;
box-pack: start;
}
#box-3 {
-moz-box-pack: end;
-webkit-box-pack: end;
box-pack: end;
}

example 9

Justify is a nice attribute, equally spacing elements within the parent container.

Final Example

example 10

The classic 3 column layout. Notice the navigation appearing first, also note that the background colour extends to the full height of all boxes.

Sadly flexbox is not supported by IE and looks unlikely to be supported by IE9. So it will be a while before these techniques become mainstream.

About us: Isotoma is a bespoke software development company based in York and London specialising in web apps, mobile apps and product design. If you’d like to know more you can review our work or get in touch.