Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Xhtml & Css’ Category

If you already use it, then you know that LESS is a "time and byte-saver" when creating + serving stylesheets (if not, you should definitely check it).

You either use the .less files directly (via less.js or on the server with Node.js) or compile them into CSS from command-line and use only the CSS.

Crunch

Crunch is a free Adobe AIR application that eases the compiling part without the need of command-line but via a user-friendly interface.

It is a simple CSS/LESS editor with syntax highlighting and multi-tab support.

Once a LESS file is saved, the CSS version is created automatically (which is handy for anyone willing to develop with LESS but don't want to rely on JavaScript on the client-side).

The CSS3 Test is a web-based test suite for finding out which CSS3 properties are supported by the browser being used.

It checks many features like backgrounds/borders, transitions, media queries, fonts, animations and much more.

Multiple testcases are ran on each element and this can be displayed by simply clicking to items.

The application is a must-bookmark to quickly check the issues on each property for shaping our styles accordingly.

CSS3 Test

When creating/designing a web page, we either start with the HTML, build the structure and style it later or style-while-structuring.

If you design with the 1st approach and bored of creating a CSS file with copy-pasting all those class + id names, here is a quick solution:

Bear CSS is a free-to-use web application that generates a stylesheet with all the elements, ids and classes from a given HTML file.

The app is mostly useful for projects with a pretty long HTML and it would be better if Bear CSS had asked which items to include inside the stylesheet just after the upload -feature request : )-.

Bear CSS

You'll remember the 2 previously shared and popular resources for quickly developing websites: Twitter Bootstrap and Foundation.

Here is a powerful alternative named HTML KickStart which is a HTML5, CSS and jQuery-powered toolkit for easily creating any type of layouts with web elements in-rhythm.

It has styles for grids, typography, forms, buttons, tables or lists and cross-browser eb elements like a JavaScript gallery, lightbox, breadcrumb navigation, menus with sub-menus and more.

HTML KickStart

HTML KickStart is focused on providing a clean, standards-compliant and cross-browser mark-up (for HTML,CSS and JS).

The project is documented in detail, has examples for all elements and it is improved regularly.

Gridpak is an interactive web application for generating responsive grid layouts very quickly.

The width of the grid, number of columns, column padding and gutter width can all be defined which are standard features we have seen from several other layout generators.

Gridpak

It gets better with the ability of adding breakpoints for responsive outputs. You can change the size of the layout, click "Add break point" and there you have it.

Once you have setup the layout, a custom download is ready which includes:

  • a CSS file with all the classes and properties you need to create the responsive grid layout
  • a LESS file with much the same information but including variables, mixins and methods to help you.
  • an SCSS file like the LESS file, but in SCSS.
  • a semi transparent PNG image for each grid you have created to help with your design, or with lining things up in your front end.
  • a JavaScript snippet that allows you to toggle an overlay of your grid on and off in any browser using the 'G' key.

Fbootstrapp is a base HTML-CSS template for quickly developing Facebook iframe apps.

It is built on Twitter Bootstrap, has styles for typography, forms, buttons, tables, grids, navigation and much more which are all styled to fit Facebook's classic design.

The template supports both 520px + 760px sizes and includes JavaScript plugins (provided by the original Bootstrap) that would help providing Facebook-like interactions.

Fbootstrapp

Grid Builder is a web application handy for anyone looking to create a base HTML-CSS grid quickly.

On a canvas with a 3*4 grid, you simply drag 'n' drop the given grid units to create the desired template (like a 3 column design with a header and footer).

3*4 Grid Builder

After that, just click the "Show me the code" button and get the HTML-CSS output of the designed grid.

P.S. You can also check out "The 892 unique ways to partition a 3 x 4 grid" article andget the PDF provided to find more about the 3*4 grids.

You'll remember Twitter Bootstrap, a toolkit by Twitter for kickstarting CSS development and creating beautiful interfaces easily.

jQuery UI Bootstrap is a jQuery UI theme that is inspired from Twitter's project and brings the slickness of it to jQuery UI widgets.

jQuery UI Bootstrap

Using the theme, it is not only possible to use the Bootstrap-themed widgets but also work with Twitter Bootstrap side-by-side without issues.

You can also read more about the motivation behind the project on the developer's web page announcing the jQuery UI Bootstrap.

CompareNinja is a free-to-use web application for generating comparison tables very quickly.

It simply requires several variables to get started like "the title of the tables" or "number of items to be compared" and then asks for the details of the comparison.

CompareNinja

There are few skins provided to choose from, new columns and rows can always be added and the HTML output is generated instantly.

After that, you can always edit the source and improve the table further.

And, yes, creating tables is not hard but, sometimes, a quick method that doesn't require any web editor is handy.

If you like applications that are simple and get the job done quickly, you'll like excssive.

It is a free-to-use CSS compressor where you can drag 'n' drop any number of files and they will be compressed instantly.

excssive

The application merges all files into a single one and enables you to reorder the files (so as the output) again with drag 'n' drops.

In case, you are not compressing the CSS files dynamically, excssive is a must-bookmark for easily minimizing your stylesheets.

P.S. The source of the application is also freely available.

Uptime Robot
feed-holder
FeedBurner
  • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
  • ManageWP
  • PSD to HTML
    PSD to HTML