20多个现代CSS框架
openkk 12年前
最近越来越流行的CSS框架，使开发人员能够快速原型设计。 CSS框架的想法是做所有你在每个站点上一遍又一遍的重复的任务繁重，让您得到更快的结果，并得到有趣的东西。在这篇文章中，包括20+最流行的CSS框架的概述，利用这些工具和资源，可以帮您节省不少开发时间。 <p style="text-align:left;"><strong>1. <a href="/misc/goto?guid=4958190856166238268" rel="external nofollow">Blueprint</a></strong></p> <p>Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.<br /> <a href="/misc/goto?guid=4958190856166238268" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/2df98350e859c2a38b0978373874c47d.jpg" width="500" height="252" /></a></p> <p style="text-align:left;"><strong>2. <a href="/misc/goto?guid=4958323184960250439" rel="external nofollow">Elements</a></strong></p> <p>Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.<br /> <a href="/misc/goto?guid=4958323184960250439" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/172ee200ca6a1b4142d10ee750f5052f.jpg" width="500" height="207" /></a></p> <p style="text-align:left;"><strong>3. <a href="/misc/goto?guid=4958190852589808445" rel="external nofollow">960 Grid System</a></strong></p> <p>The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem<br /> <a href="/misc/goto?guid=4958190852589808445" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/e6eb26309d48f9c311510b95c17e11fb.jpg" width="500" height="302" /></a></p> <p style="text-align:left;"><strong>4. <a href="/misc/goto?guid=4958185241289305217" rel="external nofollow">YUI</a></strong></p> <p>YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications. YUI is provided under a BSD license and is available on GitHub for forking and contribution.<br /> <a href="/misc/goto?guid=4958185241289305217" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/2d06fe3f762c9edd1225d7123336ee19.jpg" width="500" height="264" /></a></p> <p style="text-align:left;"><strong>5. <a href="/misc/goto?guid=4958190843100478465" rel="external nofollow">52framework</a></strong></p> <p><a href="/misc/goto?guid=4958190843100478465" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/53ac31aad20d320d4d9fe4f4fbc54b4c.jpg" width="500" height="222" /></a></p> <p style="text-align:left;"><strong>6. <a href="/misc/goto?guid=4958190842362786743" rel="external nofollow">YAML</a></strong></p> <p>“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.<br /> <a href="/misc/goto?guid=4958190842362786743" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/a98d3a88e604a4df3e6eb961c364703b.jpg" width="500" height="290" /></a></p> <p style="text-align:left;"><strong>7. <a href="/misc/goto?guid=4958195860145935056" rel="external nofollow">BlueTrip</a></strong></p> <p>A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.<br /> <a href="/misc/goto?guid=4958195860145935056" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/47d75e3af93e36c039b314b06ad2a645.jpg" width="500" height="236" /></a></p> <p style="text-align:left;"><strong>8. <a href="/misc/goto?guid=4958323193853503127">css-boilerplate</a></strong></p> <p>A simple CSS framework.<br /> <a href="/misc/goto?guid=4958323193853503127"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/990f87bf002de5c149922771080b97c3.jpg" width="500" height="220" /></a></p> <p style="text-align:left;"><strong>9. <a href="/misc/goto?guid=4958190853329676484" rel="external nofollow">A CSS Framework by Mike Stenhouse</a></strong></p> <p><a href="/misc/goto?guid=4958190853329676484" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/7f51fe8fa0047d1268de7618eb14cb05.jpg" width="500" height="242" /></a></p> <p style="text-align:left;"><strong>10. <a href="/misc/goto?guid=4958191197782798970" rel="external nofollow">inuit.css</a></strong></p> <p>Yup, ‘fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file.<br /> <a href="/misc/goto?guid=4958191197782798970" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/738f387751c6a623a9bf306b01295877.jpg" width="500" height="248" /></a></p> <p style="text-align:left;"><strong>11. <a href="/misc/goto?guid=4958183651027140306" rel="external nofollow">SenCSs </a></strong></p> <p>SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style.<br /> <a href="/misc/goto?guid=4958183651027140306" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/f6eda01bbaa036d619416b38d498c0a3.jpg" width="500" height="202" /></a></p> <p style="text-align:left;"><strong>12. <a href="/misc/goto?guid=4958323199793307331">Emastic </a></strong></p> <p>Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.<br /> <a href="/misc/goto?guid=4958323199793307331"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/1bfd18b9216d3438c56e7f7d9465233c.jpg" width="500" height="209" /></a></p> <p style="text-align:left;"><strong>13. <a href="/misc/goto?guid=4958183777706430020" rel="external nofollow">jQuery UI</a></strong></p> <p>jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.<br /> <a href="/misc/goto?guid=4958183777706430020" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/45c9eb9d92bb1b5caf84c3ec41037a06.jpg" width="500" height="182" /></a></p> <p style="text-align:left;"><strong>14. <a href="/misc/goto?guid=4958190851180406639" rel="external nofollow">Fluid 960 Grid System</a></strong></p> <div style="text-align:center;margin:0px;float:none;"> <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0px;margin:0px;padding-left:0px;width:336px;padding-right:0px;display:inline-table;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0px;"> <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0px;margin:0px;padding-left:0px;width:336px;padding-right:0px;display:block;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0px;" id="aswift_1_anchor"></ins> </ins> </div> <p><a href="/misc/goto?guid=4958190851180406639" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/f9e42184b7c35f4141e2dc3de714f4b9.jpg" width="500" height="241" /></a></p> <p style="text-align:left;"><strong>15. <a href="/misc/goto?guid=4958191190448199782" rel="external nofollow">Gridless</a></strong></p> <p>Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.<br /> <a href="/misc/goto?guid=4958191190448199782" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/c920fcf85071154d9682ea80844c3b91.jpg" width="500" height="225" /></a></p> <p style="text-align:left;"><strong>16. <a href="/misc/goto?guid=4958183659367958470" rel="external nofollow">Baseline</a></strong></p> <p>Baseline is a framework built around the idea of a “real” baseline grid.<br /> <a href="/misc/goto?guid=4958183659367958470" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/9bc642390d284ebd1be5f7a407212025.jpg" width="500" height="239" /></a></p> <p style="text-align:left;"><strong>17. <a href="/misc/goto?guid=4958195864574607626" rel="external nofollow">Compass</a></strong></p> <p>Compass is an open-source CSS Authoring Framework.<br /> <a href="/misc/goto?guid=4958195864574607626" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/3a1da018e61fe6a48b5fb6769482063f.jpg" width="500" height="201" /></a></p> <p style="text-align:left;"><strong>18. <a href="/misc/goto?guid=4958183653824592667" rel="external nofollow">FEM</a></strong></p> <p>FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts<br /> <a href="/misc/goto?guid=4958183653824592667" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/9f99149c7a9a94e6daed80e1824b6d42.jpg" width="500" height="297" /></a></p> <p style="text-align:left;"><strong>19. <a href="/misc/goto?guid=4958323210143948225" rel="external nofollow">Formee</a></strong></p> <p>Fresh baked forms for your websites!<br /> <a href="/misc/goto?guid=4958323210143948225" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/412b547c34320ea3e3b10125290344e4.jpg" width="500" height="235" /></a></p> <p style="text-align:left;"><strong>20. <a href="/misc/goto?guid=4958183667660444505" rel="external nofollow">Less Framework 4</a></strong></p> <p>Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.<br /> <a href="/misc/goto?guid=4958183667660444505" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/e61d37b01744247a5056480af16a2d32.jpg" width="500" height="244" /></a></p> <p style="text-align:left;"><strong>21. <a href="/misc/goto?guid=4958191192654594751" rel="external nofollow">Gravity</a></strong></p> <p>Gravity is a SASS based framework for making powerful, easily maintainable HTML5 websites. It helps you rapidly prototype your ideas and will generally make your life much easier.<br /> <a href="/misc/goto?guid=4958191192654594751" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/776234807a13c54bf53f4a76cdfc4d58.jpg" width="500" height="199" /></a></p> <p style="text-align:left;"><strong>22. <a href="/misc/goto?guid=4958191194158365658" rel="external nofollow">G5 Framework</a></strong></p> <p>G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.<br /> <a href="/misc/goto?guid=4958191194158365658" rel="external nofollow"><img class="size-full wp-image-29 aligncenter" title="CSS Framework" alt="20多个现代CSS框架" src="https://simg.open-open.com/show/6a311ceeff7e32bc65abf1c154443ea5.jpg" width="500" height="275" /></a></p> via： <a href="/misc/goto?guid=4958323216084918810" target="_blank">http://webdesign14.com/20-top-css-framework/</a>