Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items. View demo Download source Today we’d like to share an experimental responsive layout with you. All effects are done with CSS transitions and controled by applying classes with JavaScript. Please note: this only works as intended in browsers that support the respective CSS properties. The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor. Let’s take a look at some screenshots: The initial screen has the four flexible boxes. When clicking on a box, it get’s expanded to fullscreen. The view of a box that is expanded. In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The navigation through the items has the same page transition. We hope you like this little experiment and find it inspiring!

Build an App With WordPress - The compulsory todo list Matt Mullenweg’s State Of The Word was very insightful into what was to come of WordPress in 2012. One thing he mentioned would be big, is be WordPress powering apps. With that in mind, there aren’t many posts around that teach you how to make an app. I thought I’d start with the compulsory “How to make a to-do list app using WordPress!” It even works across all platforms- that’s right. Mobile, Tablet and Desktop! There is a Demo page (username: user, password: notes) where you can see and play with what we’ll be creating. A bit of Theory Many web app frameworks these days use MVC or MVVM structure. WordPress is a good starting point because it provides a plethora of APIs for us to leverage. The approach we’re going to take is simple. To bring you up to speed The focus of this tutorial isn’t to show you how to design an app, but to build it with AJAX. The starter theme I’ve put together for you is just a skeleton without any functionality. Data flow in a single page web app The base theme

Create Google Maps With gmaps.js How To Use GMaps.js GMaps is a javascript plugin that makes it really easy to use Google Maps to display a map to your user. There are multiple options that make it easy to add pointers to the map, directions, information boxes and lots more. This plugin is massive there is loads of options to go through, in this tutorial I'm not going to go through all of them. If you want to see all the options for this plugin you can view the documentation on the Github Repository. Documentation To start using GMap.js you need to download the latest version from Github. Download GMap Once you have the latest now include the Javascript file and jQuery on your page inside your head tag. When adding the gmap.js to the page it will create a Javascript object called GMaps which you will use to create your maps. Basic Map In this example it's just going to be a basic map inside a div. First we add the GMap Javascript file to the page like above and create a HTML div. Basic Map Demo Mouse Events On The Map Directions

Surviving the Zombie Apocalypse with HTML5 & SVG The SVG spec has been around for a while now. Under development since 1999, the spec, or more accurately a family of specs, describes an XML-based file format for vector graphics. An SVG block defines the individual components of a vector image, such as paths, shapes, fills, strokes and other features. This provides a lightweight option for certain types of graphics that might otherwise have been created in Adobe Illustrator or Inkscape and then exported to a raster format. It also promises a raft of potential functionality in manipulating an image on the fly—hence the “scalable” part of SVG. With widespread adoption of HTML5 standards, browsers are taking SVG in new directions, such as emphasizing the <svg> tag for inline SVG, using CSS for styling, and opening up the DOM so that SVG images can be created or manipulated on the client side with JavaScript. To demonstrate, this series of walkthroughs will aim to benefit humankind in two ways. Step One: Prepare <! Voila. Step Three: Add Text