F2fw.

F2fw is a HTML/CSS framework for converting and integrating designs, a process also known as PSD/AI to HTML/CSS.
It's 6.57 kb. It's small, optimized and minifed. It's perfect for your design projects.

Download F2fw 3, from GitHub.



You choose what it comes with.

F2fw is made up from nodes, specific components that you decide if to include in the framework or not.

It has a small total size.

F2fw gives you the basics of what you'll need to start converting & integrating; nothing else, nothing more.

It's easy to understand.

F2fw is easy to use & learn: go through the documentation and get used with the nodes.



Example: How to include the logo.

  • Under the Don't Repeat Yourself principle, F2fw suggests the following method to insert the logo in your web site:
  • Save the logo as logo.png inside the /images folder and add the sizes in the style.css file; examine the first box on the right side.
  • Under the h3.incl element, F2fw automatically loads any logo.png from the /images folder, without you having to repeat the CSS properties needed to remove the text and display the background image.

CSS 

#logo h3.incl a {
height:24px;
width:56px;
}

HTML 

<div id="logo">
<h3 class="incl">
<a href="#" title="#">F2fw</a>
</h3>
</div><!-- end #logo -->

Getting started.

  1. Download F2fw and unzip it.

    It's already small, optimized and minifed.

  2. Modify index.html.

    The index.html comes with a base of meta tags already included in the HTML file.
    Simply choose which to leave in or remove out.

  3. Start.

    Check the documentation for F2fw's nodes.



Documentation.

  1. Base

    Base is the starting point of F2fw, which includes the master reset.

  2. Layout

    Layout contains layout-specific components, such as: the wrapper, the header with logo and menu, and other several general CSS classes, like: floatleft, floatright, marginauto, etc.

  3. BIA

    Following the principles of CSS Sprites, this node helps you greatly whenever you have a Button, an Icon or an Arrow that are custom designed and needs to be inserted.

  4. Typography

    Typography adds a basic reset and styling to HTML typographic-related tags, such as: headings, paragraphs, unordered lists, tables, etc.

  5. Columns

    The columns nodes gives you up to 6 columns that you can use and define as you want.

  6. Navigation

    The navigation node includes common components, such as: breadcrumbs, tabs, jump to the top, pagination and sitemap.

  7. Notifications

    The notification node support the following 4 type of messages: inform, success, warning and error messages.

Latest

HOW-TO:
Convert PSD to HTML/CSS

Learn how to slice your own designs with the "HOW-TO: Convert PSD to HTML/CSS" e-book guide.

HOW-TO:
Optimize Your Website Speed

Briefly guide on how you can ptimize your website speed, gathered from the Internet.

F2fw:
HTML/CSS Framework

A HTML/CSS framework for converting and integrating designs, process known as PSD to HTML/CSS.

Specialchars:
Google Chrome Extension

Specialchars lets you search through the most common HTML special characters and displays the entity codes and names.

For Google Chrome.