Paul Hayes

Code

Use CSS transitions to link Media Queries and JavaScript

A com­mon prob­lem in respon­sive design is the link­ing of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be use­ful to use JavaScript and pull in dif­fer­ent con­tent at the same time, e.g. higher qual­ity images. With CSS tran­si­tions, specif­i­cally their tran­si­tio­nEnd events, we can marry up our media queries and JavaScript per­fectly, with­out resort­ing to win­dow resize events.

Improving the CSS only modal

In my orig­i­nal post I explained how to cre­ate a CSS only modal pop-up using :tar­get, pseudo-elements and pointer events. This had a num­ber of caveats, any browser that didn’t sup­port pointer events would see a non-clickable page and the forward/back con­trols would nav­i­gate through dia­logues, which is usu­ally unde­sir­able. This follow-up addresses those con­cerns and cre­ates a more production-ready version.

Creating a sphere with 3D CSS

With CSS3’s 3D trans­forms it is pos­si­ble to cre­ate a sphere-like object, albeit with many ele­ments. Recently I’ve been look­ing at cre­at­ing applic­a­ble 3D carousels. These rely on posi­tion­ing pan­els in a cir­cle around a cen­tral point (ie. rota­tion about the Y-axis), I put these pan­els in an unordered list. A nat­ural exten­sion is to dupli­cate each <ul> and rotate about the X-axis, cre­at­ing a sphere.

Thoughts on Responsive Enhancement

At AsyncJS in Brighton last night, Jeremy Keith gave an overview of “Respon­sive enhance­ment” — adapt­ing a lay­out in response to browser or device capa­bil­i­ties. After con­sid­er­ing why fixed width designs are so preva­lent, via a brief his­tory les­son, we delved into the tools and meth­ods by which a truly respon­sive design can be imple­mented, focussing pri­mar­ily on size con­straints but also touch­ing on trou­bles sur­round­ing speed.