Disable CSS transitions and animations… temporarily or permanently!

There’s a fairly easy way to diable all transformations, transitions and animations introduced in CSS3, which often are being used in a nasty way, just as Flash animations were used ten years ago and as .gif images were used twenty years ago.

This can be done purely in CSS, when disabling them permanently or with a little bit help from Javascript (actually jQuery or Zepto), when willing to disable them just for some time or event.

This article also show how to set styles for absolutely every element in document.

Read More “Disable CSS transitions and animations… temporarily or permanently!”

Quick mobile UI review

I don’t like jQuery Mobile for being ugly and slow and I don’t like paid full-featured stuff like Sencha or Kendo. You won’t find them here. I like fast and beauty mobile applications, especially those written in PhoneGap. So you will find performance-first, beauty-second UI frameworks here. With special emhasis on being PhoneGap-oriented. Only quick review without any unnecessary blah-blah.

Read More “Quick mobile UI review”

Use your custom TTF font cross-browser

I had some troubles with Font Awesome library and found solution for them in this Stack Overflow answer.

It also contains links to on-line services for converting .ttf files (officially supported in CSS3 only) to .eot, .svg and optionally to .woff, to make your TTF font supported in a large variety of web browsers:

After conversion use CSS styles as in mentioned answer to get all things working together.

CSS and JS minifier/beautifier that rocks!

I definitely love and adore Avivo’s CSS/JS Minifier/Beautifier. Mostly for options that similar tools lack. Like: braces on own line, preserve empty lines and ability to select intend character.

It has a small bug in CSS Beautifier. Every : is beautified to : (with space), which breaks pseudo-classes like :hover and and pseudo-objects like ::before. But, this can be easily fixed (manually; simple find-and-replace in text editor).

So, even with this, Avivo’s tool is just fabulous!

Self-adapting images in responsive design

In my humble opinion, responsive design is a future. One layout, carefully designed, will look beautiful and by user-friendly, no matter, which device user will use to view it. Of course, you can craft responsive designed website by hand, but the easiest way is to use some framework. But what about non-framework elements, like for example images? How to style them, what size should they have, to be responsive and look exactly like other, framework elements, on any device?

There are at least few approaches to solve this problem, among which one or two are not that famous.

Read More “Self-adapting images in responsive design”

An app-like full screen layout in CSS

Usually mobile applications have a header and a footer, both of a fixed height, and remaining body, that fills the rest and contains entire application content. No matter if main application content is long enough to produce vertical scrollbar or not, header and footer are always visible and always have fixed height.

A layout like this can be build in pure CSS and HTML. Thus it is useful for PhoneGap applications developers.

Read More “An app-like full screen layout in CSS”

Normalize.css. A modern alternative to CSS resets

Nearly every webdeveloper knows, what CSS reset is. Basically, this is a carefully crafted CSS file that makes browsers render all elements more consistently and in line with modern standards. In other words, they try to make your page look similar in all browsers. Today, I came across Normalize.css, a project by Nicolas Gallagher and Jonathan Neal, and wanted to share my thoughts.

Read More “Normalize.css. A modern alternative to CSS resets”

Changing look of website, if Javascript is disabled

There is a nifty trick, that allows you to change look&feel of your website and even hide certain elements on it, in case user has disabled Javascript in his or her browser. Facebook is not working, when Javascript is disabled and world collapses, when Facebook is not working, thus no one serious is disabling Javascript nowadays. However, good web developer should be prepared for everything.

Read More “Changing look of website, if Javascript is disabled”