Blog Reign » CSS

Tiny Fluid Grid – a CSS Grid Framework Generator

Wallace — Sat, 29 May 2010 14:49:52 +0000

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/

Develop and Customize Web Forms with Formee CSS Framework

Wallace — Wed, 12 May 2010 13:11:37 +0000

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.

HTML5 CSS Framework – LessFramework

Wallace — Tue, 02 Mar 2010 17:45:54 +0000

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/

EZ-CSS: Simple, Lightweight and Flexible CSS Framework

Wallace — Fri, 26 Feb 2010 02:18:40 +0000

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/

52Framework – HTML5 plus CSS3 Framework

Wallace — Sun, 07 Feb 2010 06:38:02 +0000

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/

Take Control of Your CSS with eCSStender

Wallace — Tue, 27 Oct 2009 02:46:10 +0000

eCSStender is an open source JavaScript library, created by Aaron Gustafson, that aims to prevent the usage of browser-specific properties and hacks but make lean and mean CSS possible. Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work. To use the extensions, download eCSStender and include it and your extensions in your sites. For more information on the eCSStender API, make sure to consult the documentation.

http://ecsstender.org/

Free Visual CSS Editor – ArduoCSS

Wallace — Fri, 21 Aug 2009 05:58:51 +0000

Arduo CSS Editor is a handy freeware CSS editor that allows you to visually create and edit CSS files with an intuitive and easy-to-use interface. You can visually preview the changes while edit the CSS codes. In addition, Ardou CSS Editor also provides users with syntax higlight and property selectors making it more easier to create styles for you HTML pages. You can test your work anytime in an test page with all HTML elements shown in the preview area. ArduoCSS can show the stylesheet in external HTML pages if you need to test the CSS in a particular page. There is a simple feature that optimizes your stylesheet with CSSTidy tool made by Florian Schmitz. Right click here to download ArduoCSS.

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

CSS Prism – Stylesheet Color Inspector

Wallace — Fri, 07 Aug 2009 01:47:23 +0000

Developer Ryan Berg has recently launched a new web app – CSS Prism, a CSS color spectrum inspector, that takes a stylesheet URL and then scans through and output displays all the hex colors from the file. Simply enter the path to any CSS file, and it will output an easy to scan display of all its hex colors spectrum. Unwanted colors are editable via a Photoshop-like jQuery color picker and the final resulting CSS file can be exported and downloaded for your convenience. A CSS Prism bookmarklet inserts links to any webpage’s linked .CSS files inside the body tag for you to view and modify the color spectrum easily.

http://cssprism.com/

Sexy Scalable Buttons with CSS3 and RGBA

Wallace — Fri, 24 Jul 2009 12:49:38 +0000

With a little CSS3 technique, we can create a scalable set of buttons with nearly half the CSS it would have taken with hexadecimal colors. One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. ZURBlog has created an excellent example with some super awesome, scalable buttons. Give a try for your next project to achieve a different button without huge impact on the CSS style sheet.

CSS Type Set Online Typography Tool

Wallace — Tue, 14 Jul 2009 00:23:44 +0000

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/

Elasticss: Elastic CSS Framework

Wallace — Mon, 13 Jul 2009 14:31:44 +0000

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/

Stylish SlickMap CSS Sitemap Design Solution

Wallace — Thu, 09 Jul 2009 06:40:25 +0000

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/

Dan Cederholm’s Bulletproof Web Design Continuation: Handcrafted CSS

Wallace — Thu, 02 Jul 2009 13:34:06 +0000

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

Best-selling author Dan Cederholm’s new book that will be released on August 2009. This is a different kind of CSS book. It takes the approach that there’s a real connection between craftsmanship and Web design. Handcrafted CSS gives frustrated Web designers the ammo they need to convince their clients and bosses to adopt innovative and effective CSS techniques that make their lives easier while improving the end user’s experience. This book offers designers a transitional approach that teaches them when it’s OK to push the envelope a bit, how best to do it, and when not to.

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

Online CSS Style Text Generator – CSSTxt

Wallace — Thu, 02 Jul 2009 02:23:46 +0000

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/

Generate Simple Approach CSS Grid with The 1Kb CSS Grid

Wallace — Sat, 20 Jun 2009 17:53:09 +0000

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/

Custom CSS Framework with Grid System Generator

Wallace — Mon, 15 Jun 2009 15:50:21 +0000

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