Flexbox check without modernizr

From Putting My Patterns through Their Paces by Ethan Marcotte.

Flexbox is, as you might already know, wonderful! And while it enjoysincredibly broad support, there are enough implementations of old versions of Flexbox (in addition to plenty of bugs) that I tend to use a feature test to check if the browser’s using a sufficiently modern version of flexbox. Here’s the one we used:

var doc = document.body || document.documentElement;
var style = doc.style;

if ( style.webkitFlexWrap == '' ||
    style.msFlexWrap == '' ||
    style.flexWrap == '' ) {
  doc.className += " supports-flex";
}

Eagle-eyed readers will note we could have used @supports feature queriesto ask browsers if they support certain CSS properties, removing the JavaScript dependency. But since we wanted to serve the layout to IE we opted to write a little question in JavaScript, asking the browser if it supports flex-wrap, a property used elsewhere in the design. If the browser passes the test, then a class of supports-flex gets applied to our html element. And with that class in place, we can safely quarantine our flexbox-enabled layout from less-capable browsers, and finish our teaser’s design:

.supports-flex .teaser-hed {
  display: flex;
  flex-direction: column-reverse;
}
.supports-flex .teaser .comment-count {
  position: absolute;
  right: 0;
  top: 1.1em;
}
Posted in Dalla rete | Tagged | Leave a comment

Grunt Responsive Images

Steps to install and to use Grunt plugin (by Andi Smith) for create automatic responsive images.

Continue reading

Posted in Articoli, Responsive | Tagged , | Leave a comment

Tour of a Performant and Responsive CSS Only Site

At 34 Cross, we wanted to develop our new website to be responsive, mobile friendly, and easily load on even 2G networks using only HTML and CSS. In this article we’ll tell you about the challenges we faced in both design and speed optimization of the site, and how we overcame them. First, we’ll focus on the scrolling parallax effect. Next, we show some interactive features that are possible through CSS alone. Finally, we include a checklist of things to consider for performance in general.

A guest post by Rajoshi Ghosh and Tanmai Gopal of 34 Cross on CSS Tricks.

Posted in Responsive | Tagged , , | Leave a comment

Government (UK) Service Design Manual

Build services so good that people prefer to use them. Think differently about digital delivery. Discover what it means to be part of an agile, user-focused and multidisciplinary team, delivering digital services in government. Particular care must be taken to GOV.UK elements (Layout, typography, colour, images, icons, forms, buttons and data).

Posted in Dalla rete | Tagged , , | Leave a comment