CSS

Flexible layouts

An element with ‘display:flex’ or ‘display:inline-flex’ is a flex container. Children of a flex container are called flex items and are laid out using the flex layout model.

Flex dimensions

main, cross, all the specs

Tons of things to use: overview on MDN

Too much flexibility makes you sloppy

• There has been 3 flexible layout
  specifications so far
• All implemented...
• with tutorials online and stuff
• Learn to recognize the implementations

Cool, I want to use it

Browser support is a mess
 
• Old 2009 version partial:
Chrome, Firefox 2+, Safari 3.1+
IE10 - something in between
(the "we almost nailed it" spec version)
• New syntax:
Firefox 20+, Chrome 21+, Opera (&Mobile) 12.1+, Blackberry 10+
• Current state - caniuse.com
• html5please says avoid

- so you're a clientside architect

- that's right!

- and how is your CSS structured?

Structure tips

• #namespace in front of everything at least
• sort it, comment it (describe hacks!)
• future proof
  .yellowthing .firstSection .top .center
• meaningful classes
  .role-{role name} .bt-{action name}
.box-{what it does}
• split to multiple files
• separate functionality from looks
• start using LESS/SASS while you can
• STYLEGUIDE!!!!11one

Style guide

Reusable CSS bits to aid UI development. Good practices are strong in this one.

.button {  }
.button:hover {  }
.button.active {  }

.icon-duck {  }

.navbar {  }

.notification {  }
.notification.error {  }
.notification.success {  }

.item {  }

Style guide

It has a demo page too. Easy to work with, easy to demo. Saves the hassle of running the app

<section>
  <p>Test all markup elements you want to turn into buttons</p>

  <div class="button">div button</div>
  <a href="" class="button">a button</a>
  <span class="button">span button</span>
  <input type="button" class="button" value="input button" />

  <div class="button active icon-duck">active button with duck icon</div>
  <div class="button icon-duck" title="empty icon button"></div>

</section>

Style guide
howto

• Start your project from making a styleguide
• LESS/SASS are the best for that!
• You can start small
• Did you know that designers are learning to CSS now?
• You can use twitter bootstrap and alikes
  if you don't have a designer :)

What's in it for me?

• You might have to clean it up
• ...but it's still better than a drawing
• Build structure, forget pixel perfection
• Now merge it in - once and for all

The setup

• less.js for development
• Styleguide as a part of your app
• Single optimized css file on production
• How about I show you some? (live demo)

CSS transforms

So you're writing an app...
well, good luck with that.

• Want to know how the object was transformed?
  No problem, you just need a parser
• Fix: don't store variables in CSS, ok?
• Forget mouse interactions
• jQueryUI *able is a solid piece of code
  with all the options you'd need. not.
• Fix: ... doh

CSS transforms

I'm going on an adventure!

• drag, drop, select, zoom, pan, scroll and don't forget the fingers
• controls for transformed elements are hard. You know it when you try
• libraries are full of assumptions
• I've recently patched jQuery UI draggable and selectable to work
  with scale

Flash had it all figured out over a decade ago!
[I checked]

There's hope