I’ve been working for the last month or two on some super cool mobile templates for a client. As I’ve mentioned in other posts, we’ve pulled out all of the awesome for this. If Tridion were a person, it would be peeing its kilt with excitement every day — even though it definitely isn’t wearing a kilt.
I’m not going to go into all of the awesome stuff we’ve been doing. This is less informational and more …rant-al? Ranty? Venting? There’s an adjective out there somewhere.
Flexy is sexy
I’m going to touch ever-so-softly on one thing: The Flexbox Module in CSS. If you don’t know Flexbox, Chris Coyier has an awesome break down. If you’re really curious, hit me up on Twitter or Facebook or something and I can provide additional resources.
Whatever, this is me getting informational, you don’t need this! You know how the internet works. You’ve got to be moderately adept at reading or clicking links —unless you’re a Fox News junkie. The backstory is simple: super awesome templates, built using CSS’ flex box module, mobile.
But flexbox isn’t supported by
[insert anything here]
Actually, Flexbox is supported pretty well in desktop browsers. Chrome shows flexbox a lot of love. IE10 and 11 treat it nicely, too. FireFox takes flexbox out for dinner, but forgets to call the next day.
So, Flexbox is decently supported, but… the prefixes, man!
To help us manage all of the vendor prefix shenanigans, we did three things:
- Used a CSS preprocessor (Stylus)
- wrote some custom mixins and functions
- Used Stylus’ nib library (a CSS3 fixer-upper better maker)
This solved about 99% of our problems right here. The client wanted these Tridion templates to work in IE10+, Chrome, FireFox, and mobile. But, you know how the song goes.
Android is the honey badger of flexbox
Here’s a simple form for helping you get flexbox working a mobile device:
Really, why so much hate?
I’m hoping you clicked a link somewhere and read up on flexbox a little bit. Otherwise, this explanation might not make sense. Also, you should watch this highly educational YouTube video on the Honey Badger (NSFW)
- Android don’t give a s### that you put
order: 1to move that login widget to the top on a phone
- Android smacks the s### out of your
- What’s that, you put in
flex-grow: 1? “Thanks for the code, stupid” — Android
- You tried to use
@supportsto write a CSS fallback for this. Android don’t give a s### about that
Android don’t care that you used
vmax as units of measurement. You’re just gonna gave to change the order of your widths so that
width: 60vw is first and
width: [reallyHardMathForALiberalArtsMajor]rem is last. That’s fine, Android don’t care.
If a client wants some html templates, or even Tridion templates, that treat the layout like a lady, instead of a one-night stand, build them using the CSS flexbox module. We can manage four different layouts (1-4 column), multiple navigations, dropdown navigations, and even variable-sized footers using one html template. Granted, you can do this in CSS2.1, too – but it takes twice as long.
If that client wants those HTML templates to work in any mobile browser other than Chrome, give me a head’s up so I can buy stock in Jack Daniels.