El Blog del Antonio » Design

Less Framework 2

Antonio Ramirez — Sun, 12 Sep 2010 10:17:03 +0000

All of us know how hard is to get a proper CSS layout for our pages. Thanks to 960 grid system we developers were able to solve some of the issues that we face when we design for different browsers. Now, new devices coming aboard such as Android, iPhones, Blackberry’s and their browsers and the nightmare continues. Nevertheless, nice people like those of 960 grid system give away their approaches and solutions in order to make our life’s easier. Less Framework 2 comes to help us:

A CSS framework for cross-device layouts

Everyone writes CSS differently. Less Framework takes this into account by having a minimal set of features, and does away with things like predefined classes.

No more 960 px

Less Framework uses inline CSS3 media-queries to switch between three layouts:

a two-column layout at 320 px, for smartphones
a five-column layout at 768 px, for iPads and netbooks
and an eight-column layout at 1280 px, for desktops and laptops.

No hacks, unless you want them

Less Framework works beautifully in Firefox, Chrome, Safari, Opera, IE9 (hopefully), Android phones, and all iOS devices (that’s all iPhones, iPads, and iPod Touches). It even behaves nicely in landscape mode.

Tweet this!

Javascript Online Compression Tools

Antonio Ramirez — Mon, 21 Dec 2009 11:03:28 +0000

When a Web project is finished, it is time to think how to make it better, faster… how to improve user’s experience. One of the most important things is javascript code compression in order to speed up page downloads and there are a couple of tools around that allows us to do it.

I just include three references:

The Online YUI Compressor – by Mike
The Online YUI Compressor – by Rodolphe Stoclin
The Online Javascript Minifier - by Vance Lucas

The Online YUI Compressors

These tools allows us to make use of the famous Yahoo Javascript Compression algorithm. Both of the above references does the same results, there is only a major difference between both: whilst the one created by Mike allows you to paste your script or upload a file to compress, the one created by Rodolphe Stoclin only allows us to upload the file to compress.

The Online Javascript Minifier

This tool can reduce our code by using two different algorithms: the JSMin by David Crockford and the Packer method by Dean Edwards.

Which One to Use?

I personally like those algorithms that do not make any use of the eval function and doesn’t change much the code I program, test, and implement. I think that will only depend of the developer choice.

There is an online tool that help us compare the algorithms. If that helps you to decide which one to use: http://compressorrater.thruhere.net/

Tweet this!

Stripe Generator 2.0

Antonio Ramirez — Tue, 15 Dec 2009 10:44:01 +0000

The Web 2.0 Stripe Generator is one of those great utilities that some good fellows program for us to use freely. This fantastic tool allow us to create, guess what… yeah, stripes!

If you are new to Web 2.0 nowadays design you may wonder why do you need such tool. Well, sometimes we wish to provide our borring form objects some nice background.

Its interface is self explanatory and very easy to use. What I like the most from this tool is its simplicity.

How to use stripes in our CSS Objects

This is even easier, let’s imagine whe are on Stripe Generator:

Play with sliders and color pickers, untill you obtain a super-cool stripe tile
Press “Download” to save your creation
Edit your css adding this line to the element you want to stripe:
```
background-image: url("path-to-stripe.png");
```
If you want to only repeat horizontally your tile (as in the case of tiles with gradient), you must add this line too:
```
background-repeat: repeat-x;
```

Example

The following is a picture taken from the contact section of www.antcut.com. I used the above instructions to set the input fields of my document.

Tweet this!