Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on Building Impressive Presentations with Impress.js. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to follow him on Google+
Understanding Masonry Layout
The modern web design world is an innovative one. Table-based lists with offset pagination are rapidly falling out of favor, whereas Masonry layouts with infinite scrolling are becoming the new norm. This article provides an in-depth look at the Masonry layout and its usage.
Defining Masonry Layout
The term Masonry layout probably owes its name to the popular jQuery Masonry plugin that is used to generate this type of layout. Masonry layout is also referred to as the Pinterest Style Layout, as www.pinterest.com was the first major website to use this layout style.
Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.
Developers and designers are accustomed to seeing web pages laid out with CSS floats. But this common type of layout doesn’t take the size of the elements into consideration. Instead, it adds elements one after another, first in the horizontal direction, then vertically. The following image shows a typical web page that uses floats for layout:
As you can see, having boxes with dynamic dimensions makes it difficult to design a layout without unnecessary gaps. This type of layout makes it harder for users as well, because the page height increases due to the additional spaces. It requires unnecessary scrolling to navigate to the bottom of the page. In such scenarios, we have to use a fixed-size box in each row.
Creating Intro.js Powered Tours in WordPress
In a previous article, An Introduction to Product Tours with Intro.js, we discussed the importance of creating product tours and how we can use Intro.js to create awesome product tours. Unfortunately, we configured each step manually – a methodology that is not suitable for users with limited programming knowledge. However, the real power of Intro.js […]
An Introduction to Product Tours with Intro.js
Selling products online has become a trend for catching the attention of a global audience. Among those products, it’s easier to sell purely web based products and services compared to tangible products. Marketing products online is a decisive factor in making higher sales. So, it’s important to show the features of your products and services […]
Translation and Text-to-Speech with Microsoft Translator
Text to speech is a popular technique used by many websites to provide their content in an interactive way. The generation of artificial human voice is known as Speech Synthesis. Even though it's highly popular, there are very few speech synthesis services, especially when looking for those free of charge. Microsoft Translator is one of […]
Beginners Guide to DOM Selection with jQuery
Planning a Perfect WordPress Forms Plugin
These days, WordPress powered sites ranges from simple static websites to complex dynamic web applications. WordPress offers great built-in features for providing content for users, allowing the site owners to publish dynamic content from the back end. Getting users to interact with the website is another vital aspect of building successful websites. Therefore, we need […]
Building Amazing Presentations with WImpress
Integrating impress.js into WordPress
This entry is part 1 of 2 in the series WImpressOnline presentation tools are rapidly gaining popularity over desktop presentations. Impress.js is one of the most popular open source libraries for creating amazing presentations using CSS transitions and transformations. Even though it’s highly popular library, not many tools are available for generating presentations with dynamic […]
Manage Complexity with the Facade Pattern
Design patterns standardize common solutions for the problems we face in developing complex software. One such problem is managing a complex series of actions in a workflow. The Facade pattern helps hide the complexity to expose a clean, neat API. See exactly what Facade is and how it helps us write good code.
Extending Twig Templates: Inheritance, Filters, and Functions
The ability to create extensible templates allows us to reuse templates and features in multiple places throughout our applications when necessary, and Twig is one of best templating libraries when it comes to support for for extending the core library’s functionality. Learn how to extend your Twig templates using template inheritance, functions, and filters.