Thursday, November 29, 2012

Responsive frameworks

Bootstrap

Bootstrap is a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls and even a web-based Customizer. Bootstrap utilizes LESS CSS and is compiled via Node. It is probably one of the best know and mature responsive frameworks around. Check the examples to see it in action.

Thursday, November 29, 2012

15 cool jQuery modal plugins

15 cool jQuery modal plugins

There are many situations where jQuery modal plugins can be useful for guiding the visitors focus to a specific piece of content. Basically a modal window is a kind of pop-up window that have been embedded into a web page and therefore appears without the need for a new browser window.

Sunday, November 25, 2012

Meet Bower: a package manager for the web

Bower: a package manager for the web

As the web platform has matured, the tools for managing our projects, too, have matured. In this tutorial, I'll introduce you to one of these tools that makes managing the dependencies of your project considerably easier: Bower.

Sunday, November 25, 2012

Tiny Circleslider: who said sliders are boring?

Tiny Circleslider

Image - or, more general, content sliders are as popular as can be. There are plenty of them on the market. Design and functionality resemble, the choice of a slider is more or less a matter of taste. Tiny Circleslider is different though. This tool lets you place content elements in a circle. This makes for a futuristic look and feel.

Sunday, November 25, 2012

BookBlock and Windy: 2 jQuery-plugins provide exceptional content navigation

BookBlock and Windy

Chances are, you are not looking for sliders, you have to watch your steps to avoid not trampling on them. There are more sliders on this planet than content for them to take care of. As this is the case, why do we introduce two more variants to our readership? It’s simple. BookBlock and Windy, the new jquery-plugins by Codrops, are extraordinary, totally fresh and new in their approach. They offer a variety of exciting effects to have you present your content in ways not seen before. I am impressed.

Sunday, November 25, 2012

Optimizing typography in responsive web design

Optimizing typography in responsive web design

Each time a discussion pops up about responsive design, the common terminology and concepts that get the maximum attention include grids and images, and obviously the settings like fluid or flexible. Typography, though essentially always deemed important, is rarely given the weightage it deserves when it comes to responsive web design.

Tuesday, November 20, 2012

Image rollover borders that do not change layout

Image rollover borders

It's a fact of CSS life that the border of any block level element gets factored into it's final box size for layout. That means that if you add a border on a hover to an element that didn't already have a border of that exact size, you will cause a layout shift. It's one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward.

Tuesday, November 20, 2012

Understanding Magento Layout Update XML

Magento
Note: The following article is constisted of pieces from more than one sources. You can view all of them at the end of the article.

In Magento, layouts are the XML files that define a given page within the store. The templates usually specify a module and a template to go with that block, allowing for standard modules (such as loading a products data) to be combined with custom templates to style the data.

In Magento a block is simply an imaginary container for something. A block can contain other blocks or it can contain the content itself.

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
     [...other stuff inside...]
</block>

Tuesday, November 20, 2012

Give floats the flick in CSS layouts

Give floats the flick in CSS layouts

If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You'll be dazzled by the ingenuity, astounded by the complexity and you'll gain a sense of achievement when you finally understand how floats work.

Don't be fooled. You're being brainwashed.

Monday, November 19, 2012

CSS display: inline-block: Why it rocks and why it sucks


CSS display: inline-block

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block.