Artmov: PSD to HTML

Introducing HTML/CSS Framework: F2

From my previous article on this blog related to HTML/CSS frameworks, I’ve been working on a personal framework that is now implemented in all Artmov’s projects: F2 Framework.

What is F2 Framework?

F2 Framework is a powerful HTML/CSS framework with the main purpose of speeding up the frontend development of a website. It contains many popular components that you will use in developing a website. The components are structured and coded in a intuitive way to provided a better and maintainable frontend development.

It’s beautiful code.

The library of components that are now included in version 0.1.3, you can find: breadcrumbs, from 1 to 6 columns code, jump to top, horizontal menu, vertical menu – and more.

Consider navigating through Live section or Help section to discover more.

Keynotes of F2 Framework

• You can add the F2 Framework in only one-line to your CSS;
• The total size of F2 Framework is 8 kb (estimative);
• Components are intuitive structured for better meaning and maintainability;
• It’s easy to learn: Go to Help section to see how the code is structured;
• The index.html automatically insert a Javascript file to notify Internet Explorer 6 users of their out-dated browser;
• Printer-specific stylesheet is provided by default.

Download and Live Demo

You can download a production version or the development version. Also, there’s a live demo available.

The future of F2 Framework

A to-do list of item to included in the next version of F2 Framework will be:

• Internet Explorer 7 support on default library of components;
• Searching and integrating more components.

Grouping buttons with CSS Sprites

As loading speed optimization is highly important for websites, the CSS Sprites technique has proven to be of a must-have for every website to incorporate. The most important part in reducing the HTTP Request of a web page is to reduce the number of image that are being displayed. Various images can be grouped together in one single image file and later called only once with the CSS Sprites technique.

For example: A web page of 10 images separated can now group the images together in one large file image and call those 10 images via CSS.

Of course, this example isn’t limited only to buttons, but to pratically any images you might need to load. You can group together the buttons, the logo and the horizontal line of your webpage in one single image file and later on, calling each respective via CSS, with one single image. Also, with the help of optimizing images there’s loading speed optimization for each web page and the end result is less time spendt on loading the web page.

Overview of an example

The below grouped image is an example of 4 grouped buttons in one single image. Each button have it’s own style for the respective state: default, hover and active. With the help of CSS Sprites you are automatically loading all states for a button. In this case, when the user goes over a button the state effect is already loaded – thus, the web page doesn’t need to load the separated image for the hover state – in this type of situations the normal state disappeared and user must wait for the hover state causing a ~1 second disappearing effect of button.

The old example

The old examples refers to the situation I’ve posted above when for each button and their respective state there’s a separated image. In this case, only the default states of the buttons are loaded at first; the hover state will load only when the user clicks over the button – causing a ~1 second effect of disappering.

The default state of button “Login” - Image filename: btt-login.png

The hover state of button “Login” - Image filename: btt-login-hover.png

a.login { display:block; width:79px; height:22px; background:url(images/btt-login.png) no-repeat; }
a.login:hover { background:url(images/btt-login-hover.png) no-repeat; }

When user went over the button of Login only then the a:login:hover loaded, thus loading the btt-login-hover then.

The new approach

Thus, with CSS Sprites you are practically loading all states for each button inside the grouped image file – this way you are removing the disappearing effect caused by the old approach and also optimized your web page for less loading time, by reducing the HTTP Requests.

a.login { display:block; width:79px; height:22px; background:url(images/grouped-image-file.png) no-repeat -7px -4px; }
a.login:hover { background-position:-7px -34px; }

The -7px -4px; and -7px; and -34px; are the background position coordonates (X and Y) of the default state and the hover state of button Login.

The new approach x 2

As I’m applying the CSS sprites techniques to various buttons, even the form button elements I’m calling the grouped file image only once and display the respective button based on the background-position. Of course, I’m talking about adding the same extra style that you need to add when replacing text with an image inside an anchor tag: the text doesn’t disappear; Safari might still show the text, etc.

My approach is to add a general class when used to call any type of button inside the web page. The class “btt” has all the formatting style you need to add, but no background positioning. As each button might have different width and height, these values aren’t added at .btt; but in case of same values of width and height, you can add them to .btt

.btt { display:block; background:url(images/btt.png) no-repeat 0 0; text-indent:-9999px; line-height:0; font-size:0; overflow:hidden; }

The formatting style added will remove any text inside the HTML. The overflow:hidden; is optional, but in various situation the text is still showed as very small (showed on a Safari browser)

a.btt-login { width:79px; height:22px; background-position:-7px -4px; }
a.btt-login:hover { background-position:-7px -34px; }

The above example adds the width and height of button Login and it’s background positioning for default and hover state. The HTML line of codes are below:

<a href="#" title="Login" class="btt btt-login">Login</a>

The anchor Login is now called via two CSS classes: One general class, .btt, that calls the grouped image only once and the specific-class of the buton, .btt-login, that sets the width, height and backgroun positioning.

A SEO-friendly end result as the anchor isn’t called as an image, but as a HTML anchor tag. Of course, this can be applied to other buttons only by setting a new class for the new button (width, height and background-position)

.btt-register { width:79px; height:22px; background-position:-7px -68px; }
.btt-register:hover { background-position:-7px -97px; }

<a href="#" title="Register" class="btt btt-register">Register</a>

Advantages of this approach

As pointed in this post this approach has many advantages that aren’t possible by using the old way.

• Number of HTTP Requests are more reduced by grouping the images together and call the image only once;
• A better optimization as of loading speed – due to less HTTP Requests;
• Better maintainance of images used – The modifications are done in one single file

CSS WITH COLOUR is now Artmov!

We are happy to announce that CSS WITH COLOUR is now called Artmov (www.artmov.com) – This doesn’t modify anything in our partnership with loyal clients or new clients.

We shall keep up the good work on PSD/PNG to HTML/CSS markup slicing

Artmov now incorporated CSS WITH COLOUR’s original services: PSD/PNG to HTML/CSS, the Mobile and Printer-friendly optimization with the addition of the new Coding Newsletters services.