12 个高效的CSS框架

   <h2>1. Gumby : Responsive CSS Framework with Web UI Kit</h2>    <p><a href="/misc/goto?guid=4958340851016720239" rel="attachment wp-att-9479"><img class="aligncenter size-full wp-image-9479" title="gumby-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/0db77753d08832af3dc6e43aad54c286.jpg" width="530" height="290" /></a></p>    <p>Gumby is a responsive and 960px-grid CSS grid framework that can be customized to work in every resolution, it is quite similar to 推ter Bootstrap, it comes with a web UI Kit of good looking buttons, forms, navigation + tabs and a tiny JavaScript file that brings these components to life.</p>    <p>Gumby has multiple versions to download: 12 columns, 16 columns, a hybrid one or an all-in-one package. And, there are PSD files provided to ease designing with the grid. Its fluid-fixed layout self-optimizes the content for desktop, tablet and mobile resolutions and there is support for nested grids.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958340851830049814" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>2. Less : HTML5 Powered CSS Framework</h2>    <p><a href="/misc/goto?guid=4958340852627005129" rel="attachment wp-att-9489"><img class="aligncenter size-full wp-image-9489" title="less-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/94eec65e3c25543de56088e80eb95a08.jpg" width="530" height="290" /></a></p>    <p>Less Framework is a lightweight CSS framework that enables you to build flexible multi-column website layouts. It contains an eight-column grid optimized for a line-height of 24px & a set of typography presets based on the golden ratio which is parallel to the grid’s vertical rhythm.</p>    <p>Less Framework uses the HTML5 enabling script by Remy Sharp & optionally there is a JavaScript function provided (requires jQuery) included which mimics the function of min-device-width for browsers that do not support it.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958183667660444505" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>3. 52framework : CSS3 Framework with HTML5 Support</h2>    <p><a href="/misc/goto?guid=4958340854155932003" rel="attachment wp-att-9465"><img class="aligncenter size-full wp-image-9465" title="52frameworks" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/8ed7218c413fd67a717ec07efed0685e.jpg" width="540" height="296" /></a></p>    <p>52framework is a CSS framework which provides an easy way to build websites using HTML5 & CSS3 while still supporting all modern browsers (including ie6). It 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.</p>    <p>52framework uses the new :selection selector that enables you to customize the properties of selected text.It can apply rounded corners for any block level element, text-shadow for text elements & more. Framework also includes styles for creating grids : 16 column, 52 pixel based with 8 pixel gutter.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958190843100478465" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>4. RMSforms : A Flexible CSS Form Framework</h2>    <p><a href="/misc/goto?guid=4958340855688283574" rel="attachment wp-att-9466"><img class="aligncenter size-full wp-image-9466" title="rms-forms-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/c1b3690b8ae53372518ac9095619103c.jpg" width="530" height="290" /></a></p>    <p>RMSforms is a CSS framework that builds table-less, semantic forms that look good & work cross-browser. Considering forms are a list of elements, the framework uses unordered lists for grouping items & style them accordingly. The layout of the forms & how labels are displayed can be set to be horizontal or vertical by simply updating CSS classes used.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958340856492278039" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>5. Formee : CSS Forms Frameworks</h2>    <p><a href="/misc/goto?guid=4958340857293275063" rel="attachment wp-att-9482"><img class="aligncenter size-full wp-image-9482" title="formee-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/ccc38e52dda1c10de3d2264c9361ccf1.jpg" width="530" height="290" /></a></p>    <p>Formee is a CSS framework that helps you to easily create cross-browser web forms. It works with the technique provided by Fluid 960 Grid System to compose the form’s layout, allowing total flexibility to put it in any website or web system. Formee is built with the smallest number of tags possible and it generates semantic forms. Styling the forms created is not complicated as the framework comes with 2 CSS files: one for the structure and the other for styling.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958323210143948225" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>6. FEM CSS Framework</h2>    <p><a href="/misc/goto?guid=4958340858820431317" rel="attachment wp-att-9468"><img class="aligncenter size-full wp-image-9468" title="fem-css-works" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/39ea809509f45d871ed5753a3b6b0dc0.jpg" width="530" height="290" /></a></p>    <p>FEM CSS Framework is a 960px width, 12 column grid system with common styles to enable you developing web layouts quickly. Besides the grid, the framework comes with CSS rules for styling text, forms, tables and menus. There is also a stylesheet for adding backgrounds to boxes easily using the Grey Box method. Fem is lightweight framework (10 Kb) and Fem is compatible with all major browsers.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958183653824592667" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>7. Golden Grid : A CSS Grid Framework</h2>    <p><a href="/misc/goto?guid=4958340860349416899" rel="attachment wp-att-9469"><img class="aligncenter size-full wp-image-9469" title="golden-grid-css-framwork" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/44265b9bde86646afedafab0280d0c47.jpg" width="529" height="269" /></a></p>    <p>Golden grid a web grid system that is totally focused on grid-based designs (not a complete CSS framework). Golden Grid uses float:left approach for building grids rather than positions. It is a 6/12 column grid system with a 970px main width. </p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958340861152375584" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>8. Malo : Ultra Small CSS Framework</h2>    <p><a href="/misc/goto?guid=4958340861949769083" rel="attachment wp-att-9484"><img class="aligncenter size-full wp-image-9484" title="malo-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/1f0b83a400f29c6db2652921b4a72641.jpg" width="530" height="287" /></a></p>    <p>Malo is a very small CSS framework (0,25 kb compressed) for creating a structural base for small or medium web sites. Malo has two parts basic reset and grid system, it covers most of the grid scenario & very ideal for anyone that doesn’t want to use a complete framework but get some essentials, specially grids which are problematic in general.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958340862742577220" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>9. Perkins : HTML5/CSS3 Framework</h2>    <p><a href="/misc/goto?guid=4958340863559147695" rel="attachment wp-att-9471"><img class="aligncenter size-full wp-image-9471" title="perkins-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/87ce69ae26a12874edfbdb27ee0d4ea7.jpg" width="530" height="330" /></a></p>    <p>Perkins is a HTML5/CSS-powered framework that helps you to build websites quicker and easier. It comes with a simple template which includes most of the supported tags and a set of LESS stylesheets + mixins for popular items like navigation, rounded corners, gradients and more. All of the items (typography, forms, tables, buttons, etc.) are styled very nicely and there is a @font-face icon set included for instant-inline icons.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958191191217083204" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>10. The Square Grid : Simple Framework</h2>    <p><a href="/misc/goto?guid=4958340865094065486" rel="attachment wp-att-9472"><img class="aligncenter size-full wp-image-9472" title="square-grid-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/046fc2f4362d8e51be44f4e22c4a26a9.jpg" width="530" height="272" /></a></p>    <p>The Square Grid is a CSS framework which is based on 35 equal-width columns. It is equipped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block and the total width of the grid is 994 pixels. Besides the CSS file, download package also comes with templates for Photoshop, Illustrator and InDesign + there is a PDF sketch file included.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958195895406763996" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>11. Centage : Fluid CSS/LESS Framework</h2>    <p><a href="/misc/goto?guid=4958340866626887892" rel="attachment wp-att-9473"><img class="aligncenter size-full wp-image-9473" title="centage-fluid-css-frameworks" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/606d3f3e96718f1daf291ce7a93ea7e1.jpg" width="530" height="272" /></a></p>    <p>Centage is a CSS framework that helps users to create simple-to-advanced fluid layouts easily.It is based on less.js, a JavaScript implementation of less css, and makes use of it’s advanced features like mixins, variables and nesting. The framework doesn’t use any pixel values; everything expands and shrinks according to browser width, remaining in visual balance. Centage is currently in alpha stage and, although works as expected in most modern browsers, have problems in Opera and not fully tested in IE.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958340867428291437" target="_blank"><span class="left">Source </span></a></p>    <p> </p>    <p> </p>    <h2>12. Emastic : CSS Grid Framework</h2>    <p><a href="/misc/goto?guid=4958340868217089281" rel="attachment wp-att-9474"><img class="aligncenter size-full wp-image-9474" title="emastic-css-framework" alt="12 个高效的CSS框架" src="https://simg.open-open.com/show/fcd949d166467da1e2f49cd08d827d87.jpg" width="530" height="287" /></a></p>    <p>Emastic is a CSS grid framework that will enable you to easily create elastic layouts. Emastic is lightweight and have a several features like use of fixed fulid columns in the grid, elastic layout with “em”s, baseline grid typography and many more.</p>    <p> </p>    <p><a class="buttons btn_dark right" href="/misc/goto?guid=4958323199793307331" target="_blank"><span class="left">Source </span></a></p>    <p> </p>