36个专为网页设计人员准备的CSS框架

     设计师可以利用CSS框架，使设计变得更容易和更有效率    <p><span style="font-family:impact;font-size:28px;">1. <a href="/misc/goto?guid=4958195851450695774" target="_blank">1KB CSS GRID</a> </span></p>    <p>Most of the CSS frameworks out there are Great but since somtimes its too complicated for some designers , especially beginners to start off using them …so in that case they need a simple, lightweight approach that doesn’t require them to understand and learn a whole lot. And the answer to this problem would be….tadaa… 1KB CSS Grid  </p>    <p><a href="/misc/goto?guid=4958195852199570150"><img title="36个专为设计人员准备的CSS框架" border="0" alt="36个专为设计人员准备的CSS框架" src="https://simg.open-open.com/show/11fbfd1c164be3292378a4bf7c9e57db.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">2. <a href="/misc/goto?guid=4958183642685553820" target="_blank">1 LINE CSS GRID FRAMEWORK</a> </span></p>    <p>According to this framework , just to make it simple and easy to make a webpage , you just need to use one simple line of css to manage everything.<br /> <code>.dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }</code><br /> Some people don’t even consider this as a framework at all and I am not saying they are right or wrong coz everyone has their own way of understanding.<br /> Well to understand more about this framework , just click on the name and see it for your self.</p>    <p><a href="/misc/goto?guid=4958195853608300916"><img class="aligncenter size-full wp-image-2379" title="1lineCSSGridFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/1lineCSSGridFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">3. <a href="/misc/goto?guid=4958190843100478465" target="_blank">52Framework</a> </span></p>    <p>This one provides an easy way to get started using html5 and css3 while still supporting all modern browsers.<br /> And I know one of the first things that’ll come to your mind would be … “<strong>does it support IE6</strong> <strong>?</strong>“… and you will be glad to hear ” <strong>IT DOES</strong> ” <img class="wp-smiley" alt=":)" src="http://blog.arunace.com/wp-includes/images/smilies/icon_smile.gif" /> </p>    <p><a href="/misc/goto?guid=4958195855035636018"><img class="aligncenter size-full wp-image-2380" title="52framework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/52framework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">4. <a href="/misc/goto?guid=4958190852589808445" target="_blank">960 GRID SYSTEM CSS FRAMEWORK</a> </span></p>    <p>Allows you to organise and streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels having two variants: 12 and 16 columns, which can be used separately or one after the other.</p>    <p><a href="/misc/goto?guid=4958195856444296156"><img class="aligncenter size-full wp-image-2381" title="960GridSystem" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/960GridSystem.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">5. <a href="/misc/goto?guid=4958195857179956470" target="_blank">Atatonic CSS Framework</a> </span></p>    <p>It’s main emphasis in on typography and grid tools.<br /> Focusses on clean and solid core and then aiming to add more features as addons like stylesheets for forms or some extra typographical features.</p>    <p><a href="/misc/goto?guid=4958195857918747979"><img class="aligncenter size-full wp-image-2382" title="AtatonicCSSframework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/AtatonicCSSframework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">6. <a href="/misc/goto?guid=4958195858655853456" target="_blank">BLUEPRINT CSS FRAMEWORK</a> </span></p>    <p>A solid foundation with an easy-to-use grid system, sensible typography, a stylesheet for printing and many other plugins as addon features.</p>    <p><a href="/misc/goto?guid=4958195859413257646"><img class="aligncenter size-full wp-image-2383" title="BlueprintCSS" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/BlueprintCSS.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">7. <a href="/misc/goto?guid=4958195860145935056" target="_blank">BLUETRIP CSS FRAMEWORK</a> </span></p>    <p>Its a framework cocktail made up of Blueprint, Tripoli, Hartija, 960.gs, and Elements.<br /> A full featured beautiful CSS framework which now has its own personality.</p>    <p><a href="/misc/goto?guid=4958195860892420542"><img class="aligncenter size-full wp-image-2384" title="BlueTripCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/BlueTripCSSFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">8. <a href="/misc/goto?guid=4958195861632772519" target="_blank">BOILERPLATE CSS FRAMEWORK</a> </span></p>    <p>Since the main focus of this framework is on simplicity and you can get the idea by its name (boilerplate) I will just keep the description short and would just say …it is simple, elegant and semantic.</p>    <p><a href="/misc/goto?guid=4958195862368441119"><img class="aligncenter size-full wp-image-2385" title="boilerplateCSSframework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/boilerplateCSSframework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">9. <a href="/misc/goto?guid=4958195863109809744" target="_blank">CLEVERCSS</a> </span></p>    <p>It allows you to build structured and clean stylesheet.<br /> Inspired by Python… but totally indentation based and therefore more structural.</p>    <p><a href="/misc/goto?guid=4958195863836648107"><img class="aligncenter size-full wp-image-2386" title="CleverCSS" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/CleverCSS.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">10. <a href="/misc/goto?guid=4958195864574607626" target="_blank">COMPASS CSS FRAMEWORK</a> </span></p>    <p>An open-source CSS Authoring Framework with cleaner markup without presentational classes.<br /> Includes best reusable patterns, makes CSS3 seem easy and allows you to make your personal framework very simple.</p>    <p><a href="/misc/goto?guid=4958195865306497729"><img class="aligncenter size-full wp-image-2387" title="CompassCSS" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/CompassCSS.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">11. <a href="/misc/goto?guid=4958195866040738496" target="_blank">CWS (Content with Style) FRAMEWORK</a> </span></p>    <p>Possibility of breaking down stylesheets into components that could be reused across projects.<br /> Allowing rapid development with pre-written & tested components.</p>    <p><a href="/misc/goto?guid=4958195866773905930"><img class="aligncenter size-full wp-image-2388" title="ContentwithStyleCSS" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/ContentwithStyleCSS.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">12. <a href="/misc/goto?guid=4958195867516178807" target="_blank">EASY FRONT-END FRAMEWORK</a> </span></p>    <p>Framework includes all 3 layers of front-end: structural, presentational and interactive.<br /> Main motive is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques.</p>    <p><a href="/misc/goto?guid=4958195868255889629"><img class="aligncenter size-full wp-image-2389" title="EasyFrontEndFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/EasyFrontEndFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">13. <a href="/misc/goto?guid=4958183656594598654" target="_blank">ELASTIC CSS FRAMEWORK</a> </span></p>    <p>A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.</p>    <p><a href="/misc/goto?guid=4958195869660648283"><img class="aligncenter size-full wp-image-2390" title="ElasticCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/ElasticCSSFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">14. <a href="/misc/goto?guid=4958195870405334956" target="_blank">ELEMENTS CSS FRAMEWORKS</a> </span></p>    <p>It has its own project workflow and helps you write CSS faster and more efficiently.<br /> It has Collection of preset classes, Lightbox already included, adds style & usablity to external links with icons.</p>    <p><a href="/misc/goto?guid=4958195871133830881"><img class="aligncenter size-full wp-image-2391" title="ElementsCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/ElementsCSSFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">15. <a href="/misc/goto?guid=4958195871873682746" target="_blank">EMASTIC CSS FRAMEWORK</a> </span></p>    <p>Extremely lightweight with the use of fixed & fluid columns in the grid and elastic layout with “em”s and baseline Grid Typography.</p>    <p><a href="/misc/goto?guid=4958195872609019223"><img class="aligncenter size-full wp-image-2392" title="EmasticCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/EmasticCSSFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">16. <a href="/misc/goto?guid=4958195873345859042" target="_blank">FORMY CSS FORM FRAMEWORK</a> </span></p>    <p>Formy is a simple-yet-functional CSS framework which enables you to create form layouts without tables, divs or lists.</p>    <p><a href="/misc/goto?guid=4958195874090088545"><img class="aligncenter size-full wp-image-2393" title="FormyCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/FormyCSSFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">17. <a href="/misc/goto?guid=4958195874822330808" target="_blank">HARTIJA CSS PRINT FRAMEWORK</a> </span></p>    <p>Unites the best CSS printing practices into a universal Cascading Style Sheet for web printing.</p>    <p><a href="/misc/goto?guid=4958195875552133748"><img class="aligncenter size-full wp-image-2394" title="hartijaCssPrintFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/hartijaCssPrintFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">18. <a href="/misc/goto?guid=4958195876297410028" target="_blank">JQUERY CSS FRAMEWORK</a> </span></p>    <p>jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller.</p>    <p><a href="/misc/goto?guid=4958195877035186274"><img class="aligncenter size-full wp-image-2395" title="jQueryUIThemingAPI" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/jQueryUIThemingAPI.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">19. <a href="/misc/goto?guid=4958195877776616098" target="_blank">LOGIC CSS FRAMEWORK</a> </span></p>    <p>The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.</p>    <p><a href="/misc/goto?guid=4958195878514974195"><img class="aligncenter size-full wp-image-2396" title="LogicCSS" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/LogicCSS.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">20. <a href="/misc/goto?guid=4958195879243848241" target="_blank">Lovely CSS</a> </span></p>    <p>A simple and straight forward way to easily deploy an XHTML/CSS site.<br /> Based on a simple 960px wide grid system, featuring multiple column layouts and various plugins.</p>    <p><a href="/misc/goto?guid=4958195879993967806"><img class="aligncenter size-full wp-image-2397" title="lovely-css" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/lovely-css.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">21. <a href="/misc/goto?guid=4958195880737905061" target="_blank">M5 CSS Framework</a> </span></p>    <p>A Typographical CSS Framework</p>    <p><a href="/misc/goto?guid=4958195881456799549"><img class="aligncenter size-full wp-image-2398" title="m5cssframework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/m5cssframework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">22. <a href="/misc/goto?guid=4958195882200694024" target="_blank">MALO</a> </span></p>    <p>Is an ultra small css library for building web sites<br /> Personalized width of the page in (%, px, em) and super flexible.</p>    <p><a href="/misc/goto?guid=4958195882946192000"><img class="aligncenter size-full wp-image-2399" title="MaloCSSLibrary" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/MaloCSSLibrary.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">23. <a href="/misc/goto?guid=4958195883682360465" target="_blank">Markercss</a> </span></p>    <p>Open source code for web page layout, extremely flexible and fast and purely standards-based CSS structure</p>    <p><a href="/misc/goto?guid=4958195884419446482"><img class="aligncenter size-full wp-image-2400" title="Markercss" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/Markercss.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">24. <a href="/misc/goto?guid=4958195885155986327" target="_blank">MY CSS FRAMEWORK</a> </span></p>    <p>The Standards Guy css framework<br /> Emphasis on CSS validation for WCAG 1.0, Cross-browser compatibility—including Internet Explorer (IE) 5.x on the Mac, hacks for IE in separate file and Quick template creation.</p>    <p><a href="/misc/goto?guid=4958195885901403512"><img class="aligncenter size-full wp-image-2401" title="MyCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/MyCSSFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">25. <a href="/misc/goto?guid=4958195886637819531" target="_blank">NivelStyle CSS Framework</a> </span></p>    <p>Uses flexible structures without grids, same class names for layout and structures without redundant code to be rewritten.</p>    <p style="text-align:center;"><a href="/misc/goto?guid=4958195887363440308"><img class="aligncenter size-full wp-image-2414" title="NivelStyle" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/NivelStyle.png" width="600" height="174" /></a><span style="font-family:impact;font-size:28px;" class="Apple-style-span"> </span></p>    <p><span style="font-family:impact;font-size:28px;">26. <a href="/misc/goto?guid=4958195888095097725" target="_blank">OOCSS (Object Oriented CSS Framework)</a> </span></p>    <p>A CSS “object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript and that object can then be reused throughout a site.</p>    <p><a href="/misc/goto?guid=4958195888842866747"><img class="aligncenter size-full wp-image-2403" title="Object-orientedCSS" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/Object-orientedCSS.png" width="600" height="321" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">27. <a href="/misc/goto?guid=4958183651027140306" target="_blank">SENCSS Framework (Sensible Standards CSS Baseline)</a> </span></p>    <p>It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you.</p>    <p><a href="/misc/goto?guid=4958195890247885372"><img class="aligncenter size-full wp-image-2404" title="SenCSs" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/SenCSs.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">28. <a href="/misc/goto?guid=4958195890989077267" target="_blank">SIMPL.CSS</a> </span></p>    <p>The simple css framework which tries to use the whole width and does a clean nice job of designing as well.</p>    <p><a href="/misc/goto?guid=4958195891719464387"><img class="aligncenter size-full wp-image-2405" title="Simpl.cssFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/Simpl.cssFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">29. <a href="/misc/goto?guid=4958195892454538512" target="_blank">TAFFY CSS FRAMEWORK</a> </span><span style="color:#ff0000;">(project development not active anymore)</span></p>    <p>It allows you to override default browser styles, give your type a readable measure, re-work typography and much more.</p>    <p><a href="/misc/goto?guid=4958195893188406748"><img class="aligncenter size-full wp-image-2406" title="taffy-css-framework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/taffy-css-framework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">30. <a href="/misc/goto?guid=4958195893923910747" target="_blank">THE GOLDEN GRID</a> </span></p>    <p>CSS tool for grid based web sites.<br /> 6/12 grid system and Super lightweight (compressed weight less then 1kb)</p>    <p><a href="/misc/goto?guid=4958195894674556376"><img class="aligncenter size-full wp-image-2407" title="the-golden-grid" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/the-golden-grid.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">31. <a href="/misc/goto?guid=4958195895406763996" target="_blank">THE SQUARE GRID</a> </span></p>    <p>Based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites.</p>    <p><a href="/misc/goto?guid=4958195896149007744"><img class="aligncenter size-full wp-image-2408" title="TheSquareGrid" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/TheSquareGrid.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"><br /> 32. <a href="/misc/goto?guid=4958195896886830422" target="_blank">TYPOGRIDPHY</a> </span></p>    <p>It is used to quickly code typographically pleasing grid layouts with larger baseline and font size, and is much more robust.</p>    <p><a href="/misc/goto?guid=4958195897626107897"><img class="aligncenter size-full wp-image-2409" title="Typogridphy" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/Typogridphy.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">33. <a href="/misc/goto?guid=4958195898367575185" target="_blank">Unobtrusive CSS Framework</a> </span></p>    <p>The common sense CSS framework.<br /> It has three basic css framework css files : core , forms and tabular.</p>    <p><a href="/misc/goto?guid=4958195899101441012"><img class="aligncenter size-full wp-image-2410" title="UnobtrusiveCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/UnobtrusiveCSSFramework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">34. <a href="/misc/goto?guid=4958195899828271779" target="_blank">WYMSTYLE CSS FRAMEWORK</a> </span></p>    <p>Allows you to design web sites faster, using robust CSS modules, which are already tested in a large array of web browsers.</p>    <p><a href="/misc/goto?guid=4958195900572210813"><img class="aligncenter size-full wp-image-2411" title="WYMstyleCSSframework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/WYMstyleCSSframework.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">35. <a href="/misc/goto?guid=4958195901308186708" target="_blank">YAHOO! UI LIBRARY: GRIDS CSS FRAMEWORK</a> </span></p>    <p>Offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns.<br /> The 4kb file provides over 1000 page layout combinations.</p>    <p><a href="/misc/goto?guid=4958195902047147078"><img class="aligncenter size-full wp-image-2413" title="YUI2- GridsCSS" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/YUI2-GridsCSS.png" width="600" height="325" /></a></p>    <p><span style="font-family:impact;font-size:28px;"> </span></p>    <p><span style="font-family:impact;font-size:28px;">36. <a href="/misc/goto?guid=4958195902793213853" target="_blank">YAML (Yet Another Multicolumn Layout) CSS FRAMEWORK</a> </span></p>    <p>Used for creating modern and flexible floated layouts, extremely versatile in its programming and absolutely accessible for end users.<br /> Has slim framework core with numerous extensions, focussed on web standards and accessibility , flexible layout concept (columns & grids) and also complete multilingual documentation.</p>    <p><a href="/misc/goto?guid=4958195903529983923"><img class="aligncenter size-full wp-image-2412" title="YamlCSSFramework" alt="" src="http://blog.arunace.com/wp-content/uploads/2011/10/YamlCSSFramework.png" width="600" height="325" /></a><br /> <br /> via：<a href="/misc/goto?guid=4958195904261733818" target="_blank">http://blog.arunace.com/36-css-frameworks-for-designers/</a></p> 。