10个轻量级、小型的CSS框架CSS框架
ajax 13年前
<div class="dd_content_wrap"> <p></p> <div id="gt-res-content" class="almost_half_cell"> <div style="zoom:1;" dir="ltr"> <span id="result_box" lang="zh-CN"><span>CSS框架</span><span>应</span><span>基于</span><span>您目前的网页</span><span>设计项目</span><span>的复杂性和</span><span>功能要求</span><span>，并</span><span>不能只</span><span>根据</span><span>个人喜好</span><span>，</span><span>大多数</span><span>网页设计师</span><span>往往会这么做</span><span>。</span><span>在这篇文章中</span><span>，我们收集了</span><span>10个轻</span><span>量级，</span><span>小型</span><span>的</span><span>CSS框架</span><span>。</span><span>希望您能喜欢！</span></span> </div> </div> <p><a href="/misc/goto?guid=4958183642685553820" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183642685553820" target="_blank">1. 1 line CSS Grid Framework</a></h2> <a href="/misc/goto?guid=4958183642685553820" target="_blank"></a> <p><br /> This is the challenge of writing entire CSS layout system with one line CSS class.<br /> <img alt="1-line-CSS-Grid-Framework.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/1-line-CSS-Grid-Framework.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183642685553820" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183645460825319" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183645460825319" target="_blank">2. Tiny Fluid Grid</a></h2> <a href="/misc/goto?guid=4958183645460825319" target="_blank"></a> <p><br /> Tiny Fluid Grid ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.<br /> <img alt="Tiny-Fluid-Grid.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/Tiny-Fluid-Grid.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183645460825319" target="_blank">Source</a><br /> <br /> <a href="/misc/goto?guid=4958183648246631769" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183648246631769" target="_blank">3. The 1KB CSS Grid</a></h2> <a href="/misc/goto?guid=4958183648246631769" target="_blank"></a> <p><br /> A simple, lightweight approach that doesn’t require a PhD.<br /> <img alt="The-1KB-CSS-Grid.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/The-1KB-CSS-Grid.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183648246631769" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183651027140306" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183651027140306" target="_blank">4. SenCSs</a></h2> <a href="/misc/goto?guid=4958183651027140306" target="_blank"></a> <p><br /> 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.<br /> <img alt="SenCSs.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/SenCSs.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183651027140306" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183653824592667" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183653824592667" target="_blank">5. FEM CSS Framework</a></h2> <a href="/misc/goto?guid=4958183653824592667" target="_blank"></a> <p><br /> A fixed layout, based on the 960.gs, but with a twist in its philosophy to make it more flexible and faster to play with boxes. It has only a 12 column grid, with the columns having 10px margin on each side, making a 20px gutter – giving some breathe between boxes.<br /> <img alt="FEM-CSS-Framework.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/FEM-CSS-Framework.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183653824592667" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183656594598654" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183656594598654" target="_blank">6. Elastic CSS Framework</a></h2> <a href="/misc/goto?guid=4958183656594598654" target="_blank"></a> <p><br /> A simple CSS frameworks, based on the printed layout techniques of 4 columns but with the capability to offer unlimited column combinations and capacity to make elastic, fixed or liquid layouts easily.<br /> <img alt="Elastic-CSS-Framework.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/Elastic-CSS-Framework.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183656594598654" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183659367958470" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183659367958470" target="_blank">7. Baseline</a></h2> <a href="/misc/goto?guid=4958183659367958470" target="_blank"></a> <p><br /> Built with typographic standards in mind, Baseline makes it very easy to develop a website with a pleasing grid and good typography.<br /> <img alt="Baseline.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/Baseline.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183659367958470" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183662139348512" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183662139348512" target="_blank">8. Atatonic CSS Framework</a></h2> <a href="/misc/goto?guid=4958183662139348512" target="_blank"></a> <p><br /> Works just like any other grid system, but with only about 10 lines of CSS and has its main focus on typography. The idea behind this project is to provide a solid, yet minimal, base to start every development project.<br /> <img alt="Atatonic-CSS-Framework.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/Atatonic-CSS-Framework.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183662139348512" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183664900857049" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183664900857049" target="_blank">9. The Square Grid</a></h2> <a href="/misc/goto?guid=4958183664900857049" target="_blank"></a> <p><br /> A simple CSS framework based on 35 equal-width columns. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3, 2, with the total width of the grid is 994px – which the majority of modern monitors will support.<br /> <img alt="The-Square-Grid.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/The-Square-Grid.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183664900857049" target="_blank">Source</a></p> <p><a href="/misc/goto?guid=4958183667660444505" target="_blank"><br /> </a></p> <h2><a href="/misc/goto?guid=4958183667660444505" target="_blank">10. Less Framework 3</a></h2> <a href="/misc/goto?guid=4958183667660444505" target="_blank"></a> <p><br /> Has been built so that you design your default layout as normal, and then all additional layouts using inline media queries.<br /> <img alt="Less-Framework-3.jpg" src="http://www.jquery4u.com/wp-content/uploads/2011/07/Less-Framework-3.jpg" /><br /> <a class="seelivedemo" href="/misc/goto?guid=4958183667660444505" target="_blank">Source</a></p> </div> <p> </p>