This week’s tasty tips…

Some ‘magic’ CSS3 transitions:

http://www.minimamente.com/magic-css3-animations/

 

Starting with the basics, then really getting into the depths, with some top tricks for using browser dev tools. Not had time to read the all, but my favourites thus far:

http://devtoolsecrets.com/secret/console-output-data-as-a-table.html
http://devtoolsecrets.com/secret/console-referencing-the-current-and-previous-element.html

Good modern UI too. Great work all round.

http://devtoolsecrets.com/

 

I don’t often post about design related items, but for app UI/UX designers, here’s a PSD template for creating all-new spaffy (if you like that sort of thing) iOS7 designs. Personally I’m in two minds – layered effects for intuitive understanding of navigational relationships are great. The soft focus pastels? 70’s porn of UI design.

http://www.teehanlax.com/tools/ios7/

Request Quest – HTTP Request Quiz

What causes an HTTP request to be fired?
What *should* cause an HTTP request to be fired?
How can you take advantage of the discrepancies between browsers?
Why are there still SO many damn discrepancies?

Meh – about half these questions can be at least partially answered by Jake Archibald’s (WIP at time of writing) quiz, which is also a nice bit of front end design (so… only works in Chrome desktop atm!), and with a little thought, if you have a captive target browser, another can be answered too.

http://jakearchibald.github.io/request-quest/

If you care to compare, I scored 29.

Justification for marginless RWD

Deliberately disingenuous post title aside, this is some very clever stuff.

I would very much like to try making the line breaking element a pseudo-element.

While working on a project early last year, I quickly became frustrated having to re-calculate the margins between menu items in my full-width footer nav each time the client requested a new link in the menu.

Thinking about how “justified” text in Microsoft Word fills the entire width of the line by creating even word spacing, I wondered if the same principle could be applied to a menu of text links in HTML. Knowing that ‘text-align: justify’ was a long established CSS property (the descendent of HTML 4  attribute align=”justify”), I did some Googling for answers.

In its natural state, ‘text-align: justify’ will not work unless the contents of the line are long enough to cause a line-break. Otherwise, the text remains left aligned. Incase you’re wondering why this is, it’s because in a typesetting situation this is the desired behavior – the final line of a block of justified text is always left aligned. Perhaps this was an oversight when the CSS spec was designed, but even if we only have one line of text, that one line still behaves like the final line.

It took me a few tries, but we can solve this problem by giving 100% width to an invisible inline element at the end of the line (shown in purple for demonstration purposes). As this “break” element is too wide to share a line with anything else but itself, it causes a line-break, thus becoming the final line, and  forces the words before it to justify.

Text-align: Justify and RWD