1
0
mirror of https://github.com/Llewellynvdm/front-end-frameworks.git synced 2024-11-26 05:17:35 +00:00
front-end-frameworks/compare/compare.html
Afshin Mehrabani 88c7adfd04 mistake!
2013-02-23 21:17:37 +03:30

595 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A collection of best front-end frameworks with comparison | By usabli.ca</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta property="og:title" content="Front-end CSS Frameworks" />
<meta property="og:url" content="http://usablica.github.com/front-end-frameworks/compare.html" />
<meta property="og:image" content="http://usablica.github.com/front-end-frameworks/images/css-frameworks.png" />
</head>
<body>
<a href="https://github.com/usablica/front-end-frameworks"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=281502801861442";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<header>
<div class="line"></div>
<h2>Front-end</h2>
<h1>CSS</h1>
<h3>Frameworks</h3>
<p><span class="clr"></span></p>
<p style="margin-top: 80px;">
<a href="https://twitter.com/usablica" class="twitter-follow-button" data-show-count="true">Follow @usablica</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="A collection of best #front-end-frameworks with comparison, by @usablica.">Tweet</a>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fusablica.github.com%2Ffront-end-frameworks%2Fcompare.html&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=89657377228" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=usablica&repo=front-end-frameworks&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=usablica&repo=front-end-frameworks&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</p>
<p style="margin-top: 40px;">
A collection of best front-end frameworks for faster and easier web development.
</p>
</header>
<section style="margin-top: 40px;">
<table>
<tr>
<td>
<h1><a target="_blank" href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></h1>
<div class="info">
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.
</br>
<a target="_blank" href="http://twitter.github.com/bootstrap/">View on Github</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
<div class="desktop"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Apache v2.0</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://foundation.zurb.com/">Foundation</a></h1>
<div class="info">
<p>The most advanced responsive front-end framework in the world.
</br>
<a target="_blank" href="http://foundation.zurb.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
<div class="desktop"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://960.gs/">960gs</a></h1>
<div class="info">
<p>Simple grid system
</br>
</br>
<a target="_blank" href="http://960.gs/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
<div class="desktop"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>GPL & MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://www.getskeleton.com/">Skeleton</a></h1>
<div class="info">
<p>A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
</br>
<a target="_blank" href="http://www.getskeleton.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
<div class="desktop"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://www.99lime.com/">99lime HTML KickStart</a></h1>
<div class="info">
<p>UltraLean HTML Building Blocks for Rapid Website Production.
</br>
<a target="_blank" href="http://www.99lime.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://imperavi.com/kube/">Kube</a></h1>
<div class="info">
<p>CSS-framework for professional developers.
</br>
</br>
<a target="_blank" href="http://imperavi.com/kube/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
<div class="desktop"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://lessframework.com/">Less Framework</a></h1>
<div class="info">
<p>An adaptive CSS grid system.
</br>
</br>
<a target="_blank" href="http://lessframework.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
<div class="desktop"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://flaminwork.com/">Flaminwork</a></h1>
<div class="info">
<p>The tiny front-end framework for lazy developers.
</br>
</br>
<a target="_blank" href="http://flaminwork.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://framework.gregbabula.info/">G5 Framework</a></h1>
<div class="info">
<p>(X)HTML5, CSS3, PHP & jQuery Front End Framework.
</br>
<a target="_blank" href="http://framework.gregbabula.info/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://easyframework.com/">Easy Framework</a></h1>
<div class="info">
<p>Your new starting point for every front-end projects!
</br>
<a target="_blank" href="http://easyframework.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://www.blueprintcss.org/">Blueprint</a></h1>
<div class="info">
<p>Blueprint is a CSS framework, which aims to cut down on your development time.
</br>
<a target="_blank" href="http://www.blueprintcss.org/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://www.yaml.de/">YAML</a></h1>
<div class="info">
<p>YAML is an (X)HTML/CSS framework for creating modern and flexible floated layouts.
</br>
<a target="_blank" href="http://www.yaml.de/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Creative Commons</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://bluetrip.org/">BlueTrip</a></h1>
<div class="info">
<p>A full featured and beautiful CSS framework which originally combined the best of Blueprint,...
</br>
<a target="_blank" href="http://bluetrip.org/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="https://developer.yahoo.com/yui/grids/">YUI 2: Grids CSS</a></h1>
<div class="info">
<p>The foundational YUI Grids CSS offers four preset page widths, six preset templates, ...
</br>
<a target="_blank" href="https://developer.yahoo.com/yui/grids/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>BSD license</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://elements.projectdesigns.org/">Elements</a></h1>
<div class="info">
<p>Elements is a down to earth CSS framework.
</br>
</br>
<a target="_blank" href="http://elements.projectdesigns.org/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://52framework.com/">52framework</a></h1>
<div class="info">
<p>With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today .
</br>
<a target="_blank" href="http://52framework.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Creative Commons</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://elasticss.com/">elastiCSS</a></h1>
<div class="info">
<p>A simple css framework to layout web-based interfaces, based on the printed layout .
</br>
<a target="_blank" href="http://elasticss.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://code.google.com/p/css-boilerplate/">Boilerplate</a></h1>
<div class="info">
<p>noun standardized pieces of text for use as clauses in contracts or as part of a computer program.
</br>
<a target="_blank" href="http://code.google.com/p/css-boilerplate/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>New BSD License</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://code.google.com/p/emastic/">Emastic</a></h1>
<div class="info">
<p>Emastic is a CSS Framework, its continuing mission: to explore a strange new world ...
</br>
<a target="_blank" href="http://code.google.com/p/emastic/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://code.google.com/p/malo/">Malo</a></h1>
<div class="info">
<p>Malo is ultra small css library for building web sites.
</br>
<a target="_blank" href="http://code.google.com/p/malo/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://code.google.com/p/the-golden-grid/">The Golden Grid</a></h1>
<div class="info">
<p> It 's a product of the search for the perfect modern grid system.
</br>
<a target="_blank" href="http://code.google.com/p/the-golden-grid/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/">1kb grid</a></h1>
<div class="info">
<p>Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles.
</br>
<a target="_blank" href="http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/">Visit Site</a> - <a href="https://github.com/heygrady/compass-grid-plugin" target="_blank">View on Github</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://www.designinfluences.com/fluid960gs/">Fluid 960 Grid System</a></h1>
<div class="info">
<p>The Fluid 960 Grid System templates have been built upon the work of Nathan Smith ...
</br>
<a target="_blank" href="http://www.designinfluences.com/fluid960gs/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>GPL / MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://www.baselinecss.com/">Easy Framework</a></h1>
<div class="info">
<p>Baseline is a framework built around the idea of a “real” baseline grid.
</br>
<a target="_blank" href="http://www.baselinecss.com/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Creative Commons</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://code.google.com/p/lovely-css/">Lovely CSS Framework</a></h1>
<div class="info">
<p>A simple and straight forward way to easily deploy an XHTML/CSS site.
</br>
<a target="_blank" href="http://code.google.com/p/lovely-css/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://xcss.antpaw.org/">xCSS</a></h1>
<div class="info">
<p>xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing .
</br>
<a target="_blank" href="http://xcss.antpaw.org/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="http://www.frontendmatters.com/projects/fem-css-framework/">FEM CSS Framework</a></h1>
<div class="info">
<p>FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles.
</br>
<a target="_blank" href="http://www.frontendmatters.com/projects/fem-css-framework/">Visit Site</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--error no" data-hint="Not Responsive">
<div class="desktop yes"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>MIT/GPL</h2></td>
</tr>
<tr>
<td>
<h1><a target="_blank" href="https://github.com/cbrauckmuller/helium">Helium</a></h1>
<div class="info">
<p>Helium is a framework for rapid prototyping and production-ready development
</br>
<a target="_blank" href="https://github.com/cbrauckmuller/helium">View on Github</a>
</p>
</div>
</td>
<td>
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
<div class="desktop"></div>
<div class="tablet"></div>
<div class="phone"></div>
</div>
</td>
<td><h2>Free</h2></td>
</tr>
</table>
</section>
<footer>
<p>Proudly brought to you by <a href="http://usabli.ca/" target="_blank">usabli.ca</a></p>
</footer>
</body>
</html>