background preloader

Off Canvas Layouts CSS - Foundation 3 - ZURB Playground -

Off Canvas Layouts CSS - Foundation 3 - ZURB Playground -
Off Canvas What Now? If you've used Facebook's iPhone app (or Path, or any number of apps that now follow this convention) then you've seen an off canvas panel in a native app. You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way). He and Jason Weaver then worked to create a batch of layouts, which they published to demonstrate how layouts like this could work on the Web. Four Layouts, No Waiting We've put together four different layouts, each with specific functionality and code for you to check out and download. Bottom Nav Layout This layout moves the nav menu to the bottom on mobile, and enables a sliding sidebar. Sidebar on Mobile Only This layout moves the navigation to the sidebar on mobile only. How to Use These Layouts The download below includes everything you need to play with these layouts and use them on your own site or app. Foundation 3.2, the release version of Foundation 3. Repurpose, Rebuild, Reuse

Off Canvas Inspired by the observations of Luke Wroblewski, this Off Canvas layout demo has 3 panels that display differently depending on the viewport width. The idea here is to have the two supporting panels of navigation and sidebar content hidden just off-screen to the left and right for easy access on small/medium viewports. Off Canvas is a design pattern, not a plugin or framework. Dev Rocket - Photoshop panel plugin for iOS developers Foundation: The Most Advanced Responsive Front-end Framework from ZURB Forge Documentation — Forge - Cross-platform App Development Tools Log In Docs home Quickstart Questions? 1. 2. 3. Sign Up Modules summary - see all Modules allow you to drop in the native features to your Forge app that you want.

Better CSS Sprites with SVG - Bessere CSS Sprites mit SVG | eleqtriq For webdesigners it's still frustrating to deal with the limitations of the CSS "background-image" property. Sure, things have improved ten times with CSS3. We now are able to add multiple backgrounds, have a decent control of sizing and some clipping features. But where is "background-rotation"? So in the end we often find ourselves creating another version of a bitmap if we want to rotate it or need some more padding, feeling guilty because we know that this will cause more traffic and additional http-requests. I have good news for you: there actually exists a ridiculously easy method to have all this additional attributes and it is supported in every modern browser. Using SVG sprites offers a lot of benefits over conventional sprites. Some Demos Demos open in new window. Caveats Linking to an SVG which in return links to a bitmap means more http requests and as we all have learned, this is a BAD thing. "background-image: url('data:image/svg+xml; charset=utf-8,<svg></svg>" Trackback

dgileadi/zepto-page-transitions Off Canvas Multi-Device Layouts Most multi-device layout patterns for the Web are designed to rearrange page elements within a visible browser window. Off canvas multi-device layouts, on the other hand, use the space outside a browser’s viewport to hide secondary elements until people need them. Jason Weaver and I put together demonstrations of several new off canvas layout patterns. Why Off Canvas Layouts? In my survey of multi-device layouts patterns, I found several common ways to adapt Web page designs to a variety of screen sizes. Since many multi-device layout patterns are only considering the visible browser window as their canvas, this situation is pretty much inevitable. Off canvas layouts do just that. Footer Nav & Off Canvas Column On large screens, this pattern looks like a pretty typical Web page layout: primary navigation on top, a left-hand column with some supporting information, and a main content area in the middle. Check out the Footer Nav & Off Canvas Column demo and in action on this site.

Retina.js | Retina graphics for your website How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute

Le format JSON, AJAX et jQuery JSON (JavaScript Object Notation) est une forme d'écriture de données en JavaScript. Son avantage est de fournir un support pour une écriture simple et légère au format texte, relativement compréhensible par les développeurs JavaScript, mais aussi - et surtout - d'être nativement interprété contrairement au XML qui fait appel à de l'analyse syntaxique et parfois à DOM/XSLT pour accéder à sa structure et à son contenu. Il s'agit donc d'une arborescence de données, inspirée de XML mais dont l'emploi en JavaScript est plus aisé et plus performant, à partir du moment où on en connaît la structure. On retrouve des facilités d'utilisation de JSON dans des frameworks tels que jQuery avec des fonctions d'aide à la création d'appels AJAX (surtout $.getJSON) pour lequel JSON est bien adapté. Néanmoins, il existe d'autres implémentations dans une multitude d'autres langages pour se servir de JSON, il n'est pas limité à JavaScript : consultez une liste sur Principe "clef" : "valeur" <?