The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

CSS/CSS3

CSS/CSS3 Category

IE6fixer: ease the pain of the ie6 css debugger

Does anyone still test websites with IE6? If you are one of them IE6fixer is your tool! IE6fixer is a tool specifically designed to ease the pain of the ie6 css debugger.

Senza titolo 11 496x600 IE6fixer: ease the pain of the ie6 css debugger

This tool was concieved to decrease the monkey work when starting an ie6 css fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It is meant to get a good head-start by fixing roughly 40-60% of all your ie6 issues with just one click, outputting a rough css that can be placed in a separate section and can be used as a solid start to finish up the rest of your ie6 debugging work.

Perkins: CSS3 LESS Framework

Perkins is a CSS Framework thought to make the life of designers and developers a bit easier. It can help you to make wireframes quickly using the dynamic grid, based in Tyler Tate’s 1kb CSS Grid which is already included and can be configured in the perkins.config.less file, as well as many other options.

perkins CSS3 LESS Framework 1310834195119 524x600 Perkins: CSS3 LESS Framework

It uses the latest Web standards, also known as HTML5 and CSS3. To take more advantage and allow you not to repeat yourself, it is based in LESS.js, which means that you can forget some of the proprietary browser prefixes. Also, it carries a number of preloaded basic styles, mixins, helpers, transparent textures and a @font-face driven icon set.

Calculate and generate grids – GridCalc

GridCalc is a web application that could seriously ease the work of a designer (you).

gridcalc Calculate and generate grids   GridCalcGridCalc is rather simple to use — you have to enter the width of your grid; minimum and maximum column width; and gutter width.

GridCalc will generate a list of possible combinations of grids that have the attributes you’ve specified.

Once you’ve seen a ‘prototype’ you want to use, you can download the source of your newly-created grid.

 

A Mobile-friendly Boilerplate – Skeleton

Skeleton is a ‘boilerplate’ for beautiful, responsive, and mobile-friendly design.

Skeleton A Mobile friendly Boilerplate   Skeleton

Skeleton uses a 960 pixel grid which allows for flexible design.

It includes jQuery; jQuery-driven tabs (unordered list); cleanly designed forms; and flexible structure, which allows you to make your customizations painlessly.

Overall, Skeleton looks like a rather fine boilerplate for most projects, and it’s a very big plus that Skeleton is mobile-oriented, as the next decade looks like everything but the PC.

Scalenine – Skins, Themes and Showcase for Flex and Adobe AIR

ScaleNine is a collection of skins and themes created for Flex and Adobe AIR (formerly Apollo), as well as a showcase of other apps using these frameworks. Some involve graphical skinning and others are purely CSS.

scale nine Scalenine   Skins, Themes and Showcase for Flex and Adobe AIR

ScaleNine provides skins and themes for Flex and AIR created by the community using the Adobe Creative Suite of tools and Flash Catalyst.

Check out the Gallery to see the latest submissions or gain a little inspiration from the Showcase area of great looking applications.

 

Automatically normalize styles – normalize.css

normalize.css is a CSS… file that tries to normalize things that need normalizing for different browsers.

normalize Automatically normalize styles   normalize.cssNormalize.css preserves defaults (unlike other “normalizing” CSS’es); corrects common bugs; and explains what the code does to the user.

Normalize.css works on most browsers, including IE6, Opera 10+, FF3+, etc.

This CSS file is a reasonable start for any design document; however, an uncommented (thus, significantly smaller) version would be welcome.