Inspired by 1kbgrid, Tiny Fluid Grid was developed by an American design agency Girlfriend, for help web designers to easily build fluid grid based websites. TinyFluidGrid is a handy CSS grid framework for creating fluid grids instantly. You just need to define the Number of Columns, Gutter Percentage, and Min & Max Width with the sexy slider. Once created, you can preview the grid and download it which includes with a index.html with demo code, and the grid.css containing the CSS for the grid.

• http://www.tinyfluidgrid.com/

Original Post URL: Tiny Fluid Grid – a CSS Grid Framework Generator

Developed by Bernard De Luna, Daniel Araujo and Marcello Manso, Formee is a CSS framework for styling form elements and creating web based form layout. It uses Fluid 960 Grid System technique to compose the layout, providing you total flexibility to put it in any website. It also helps you create standard compliant forms with less but more markup semantic markup. Formee is built with the smallest number of tags possible and it generates semantic forms. You can use this CSS framework for quickly creating cross-browser and flexible web forms. Moreover, there are some side elements in the package that are widely used with web forms such as message boxes to show errors, warnings and success alerts. Formee is available for download under GPL and MIT Licenses. You can find further information, demo and download on Formee Website.

Original Post URL: Develop and Customize Web Forms with Formee CSS Framework

Developed and maintained by web designer Joni Korpi, Less Framework is a new generation CSS framework that is built perfectly for any web browser such as Chrome, Safari 3.0+, Firefox 3.0+ and Internet Explorer 7+, and any device including the Apple iPhone and iPad. It’s a lightweight CSS framework for building flexible multi-column website layouts. LESS contains an eight-column grid optimized for a line-height of 24px, and a set of typography presets based on the golden ratio that fit into the grid’s vertical rhythm. Webpage can collapse automatically into a single column in old browsers and on small width screens. LESS CSS framework requires a single.css, multi.css, HTML5.js and switcher.js to function. Download Less Framework 1.0.

• http://lessframework.com/

Original Post URL: HTML5 CSS Framework – LessFramework

EZ-CSS is a simple, lightweight (1kb only) and flexible CSS Framework for complex table-less layouts and rapid prototyping. EZ-CSS lets you apply any width you want to containers and gutters for building any type of CSS layouts. It’s a easy-to-use CSS framework for creating browser-friendly CSS layouts for your websites. When using EZ-CSS framework, you are not bound to a grid but it allows you create multiple columns of any width, with or without gutters of any width. EZ-CSS has a very small footprint (only 915 bytes) for a fast download time, and it’s also framework agnostic that integrates well with any other style sheet. Rounding issues, rounding errors, and collapsing margin across all containers are all prevented. EZ-CSS is an open source CSS framework and available for download.

• http://www.ez-css.org/

Original Post URL: EZ-CSS: Simple, Lightweight and Flexible CSS Framework

52Framework is the ever first framework that integrates with HTML5 and CSS3 framework together. It helps web designers and developers to have a easier method to build up websites using HTML5 and CSS3 which support all modern web browsers. Using HTML5 makes for much cleaner mark up by the grid system. This framework fully uses all the great advantages of HTML5. With CSS3 you can save time designing and slicing layouts. CSS3 has great features like text/box shadow, rounded corners, and animations. 52Framework uses HTML5 tags like header, nav, section, article, footer or new input field types like url, email, etc. The framework also has a HTML5 compatible reset stylesheet.

• http://52framework.com/

Original Post URL: 52Framework – HTML5 plus CSS3 Framework

• http://ecsstender.org/

Original Post URL: Take Control of Your CSS with eCSStender

• http://www.arduosoft.com/page/ArduoCss-Freeware-CSS-Editor.aspx

Original Post URL: Free Visual CSS Editor – ArduoCSS

• http://cssprism.com/

Original Post URL: CSS Prism – Stylesheet Color Inspector

Original Post URL: Sexy Scalable Buttons with CSS3 and RGBA

Not sure if you remember CSSTxt CSS text generator that we have introduced before, CSS Type Set is a handy typography tool allowing web designers and developers to interactively test and learn how to style their web content. CSSTypeSet is a life saver for your style sheets. The WSIWYG editor allows you to view changes as you make them, so you can easily decide what sort of look you want. You can change the font style and the color using the gradient color wheel. There are also the standard bold, italic and strikethrough, letter-spacing, word-spacing and line-height options. It will automatically generate the CSS style sheets for you. You can see the changes instantly. Once you made all your tweaks, simply copy the CSS to your design, you’re done.

• http://www.csstypeset.com/

Original Post URL: CSS Type Set Online Typography Tool

CSS frameworks are the consequence of repeated ready-made Cascading Style Sheets library that helps designers and developers get faster for designing and outlaying a webpage. Elastic CSS Framework is a simple CSS framework to layout web-based interfaces for creating elastic, fixed and liquid layouts with various column layout. It based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations.

• Elastic CSS Framework defines a declarative language to make layouts;
• A freestyle framework you can mix and nest any number of columns, you can even mix any number of columns, fixed-columns, and elastic-columns;
• Provides a set of helper classes, to accomplish hard things by pure CSS like: same-height, full-width, and vertical-center;
• You can mix classes to accomplish complex layouts like elastic header and footer, fixed width content.
• http://elasticss.com/

Original Post URL: Elasticss: Elastic CSS Framework

SlickMap CSS is a stylish visual sitemap tool for web designers and developers for displaying up to three levels of page navigation and additional utility links sitemap directly from HTML unordered list navigation. The simple CSS stylesheet streamlines the web design process by automating the illustration of sitemap while at the same time allowing for the predevelopment of functional HTML navigation. Moreover, the SlickMap CSS is easily implemented and customized to meet your individual needs, branding, or style preferences. You can see the working demo and download SlickMap CSS for free. SlickMap CSS Sitemap Solution was coded and released by Astuteo design studio.

• http://astuteo.com/slickmap/

Original Post URL: Stylish SlickMap CSS Sitemap Design Solution

SimpleBits today announced the publication of Dan Cederholm’s new book: Handcrafted CSS: More Bulletproof Web Design, it’s the continuation of Bulletproof Web Design.

Handcrafted CSS: More Bulletproof Web Design is an attempt to share some of these details that matter most. By encouraging “progressive enrichment” to utilize advanced CSS and CSS3 properties that work in browsers today, to reevaluating past methods and best practices. This book will show how craftsmanship can be applied to flexible, bulletproof, highly efficient and adaptable interfaces that make up a solid user experience.

Handcrafted CSS: More Bulletproof Web Design

The book’s seven chapters deconstruct various aspects of a case-study Web site, focusing on aspects that make it bulletproof and demonstrate progressive enrichment techniques over more traditional labor-intensive methods. Subjects include building for unanticipated future use; progressively enriching designs using CSS3 properties that work today; the magic and flexibility of using RGB color with an alpha channel; modular float management, crafting flexible frameworks; fluid layouts using grid-based design principles; and craftsmanship details on typography, jQuery, and shifting backgrounds.

PreOrder Handcrafted CSS: More Bulletproof Web Design

Original Post URL: Dan Cederholm’s Bulletproof Web Design Continuation: Handcrafted CSS

If you are not familiar with CSS syntax, or just want to save time for styling a simple paragraph text, you come to the right place. CSSTxt is an online tool to allow you easily generate the CSS style for text. Go straightly to type or cut and paste your text into the text square, and then select the basic text style including bold, underline, overline, italic, oblique, line through, uppercase or smallcaps, and then click the generate button. It will generate two versions of code to paste on your web page, “Novice” and “Expert”, both return the same result. The difference is that the expert version will separate the text and stylesheet for advanced users.

There are two more styling options for advanced users to customize the text. The first, on the left allows you to adjust letter spacing, word spacing, font size, line height and border size; and to the right, you can arrange alignments, border styles, font and background colors as well as font type. Finally, advanced option enables you to set margin and padding for the text.

• http://csstxt.com/

Original Post URL: Online CSS Style Text Generator – CSSTxt

1KbCSSGrid.com is a simple CSS online tool that allows you to specify a desired number of columns, column width and gutter width and then generates a lightweight approach CSS file tailored to your needs.The site was design and developed by Tyler Tate. When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. The 1Kb CSS Grid’s convenient row and column syntax provide all the necessary scaffolding. If you are not looking for a complex CSS frameworks for grid system, style reset, basic typography or form styles, The 1Kb CSS Grid is worth to browse.

• http://www.1kbgrid.com/

Original Post URL: Generate Simple Approach CSS Grid with The 1Kb CSS Grid

Grid System Generator is a grid system generator, is created by Ewout Kozel, that asks for grid width, number of columns, margin-left or right and generates a fixed grid system with valid XHTML and CSS for rapid web design prototyping and development. The grid generator is based on 960.gs and Golden grid system. When a custom grid system has been generated successfully, you can download the generated grid system files accordingly. Besides the CSS framework, a .PNG background file is created as well to help in design and prototyping. You refer to the instructions for using the grid generator.

• http://www.gridsystemgenerator.com/

Other great CSS grid generators:

1. Variable Grid System, a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

2. Blueprint Grid CSS Generator, helps you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.

3. Grid Layout Generator by DIV Design, generate CSS and HTML codes for liquid lor fixed grid layout.

4. Grid Generator by netProtozo

5. Grid Designer

Original Post URL: Custom CSS Framework with Grid System Generator