Responsive css only carousel

A while ago I looked at some methods to create css only carousels. Since then new css features have become widespread allowing us to do more. Here i'm revisiting the css carousel to see what we can achieve with very simple code!

Wordpress, Timber & Twitter Bootstrap

Wordpress is one of the most popular CMS blogging platforms on the internet today, with the latest updates it's really improved in terms of user experience for the admin user. However there is still one massive pain for developers in the template system....where there isn't really one!

Responsive and adaptive images using focus points

Devices and computers come in millions of shapes and sizes it's very hard as a web developer to make your images fit and look good at every size. In this post i'm going to look at a second solution which uses focal points to tell the browser what should be on screen.

Responsive images using css only

One of the biggest challenges on responsive sites is handling images across different size screens and resolutions. Here we are going to look at the future support for it and also a simple method to solve this problem using css only.

Create a simple site using php and json

There are many solutions to create a site using out-of-the-box software such as WordPress or Django. However sometimes we just need a very simple custom model such as a portfolio list, or some events. You may want to update your data, but have the paging and templates update automatically.

Here is a simple solution which allows you to use PHP to load json files (as data) and then render page templates using TWIG template engine. This solution is fully compatible to then run the json feeds from external sources or APIs at a later date!

Circular loading bar using css only

I've recently started a new project where audio files are played in loops. This presents an interesting challenge as the loading bar makes more sense to be circular rather than linear. Added to this I also wanted to be able to control the amount of time it takes for the animation to complete, and to be able to loop it. Here is how I achieved it!

Facebook login inside a hybrid app using Cordova and OpenFB

Recently i've been playing with Apache Cordova more and more. It opens up a new set of API's, allowing you to use native features of a device from within a web view using JavaScript.

However one issue i've come across is trying to get Facebook Login to work correctly. Here I will explain the different ways to implement Facebook login with a Hybrid app and which method worked well for me.

Improving the AngularJS app starter template

AngularJS is a very powerful front-end library which allows you to build apps and prototypes quickly, without getting bogged down in browser inconsistencies. However when you look at the documentation and examples you will find that they vary massively and there are several ways to write, organise and build an app.

I've built a few projects using AngularJS & Twitter Bootstrap, and have now settled on a structure which feels easy to maintain and understand. I will attempt to explain it here with examples.

Responsive cross browser lightbox using only html and css

There are many great lightbox plugins out there, however lots of them rely on jQuery or other libraries. Also another negative aspect is that they use JavaScript for the resizing and other parts which really isn't needed. So how can we make our own css only efficient lightbox overlay, which works cross browser IE8+?

Responsive mobile dropdown navigation using css only

When building a fully responsive site the layout should adapt to different screen sizes, from mobile to tablet and desktop. Navigations are usually complicated as the space is limited, and functionality can differ between mobile and desktop.
Here we will look at a css only solution to a responsive dropdown navigation!