1
0
mirror of https://github.com/Llewellynvdm/front-end-frameworks.git synced 2024-11-13 15:46:28 +00:00
front-end-frameworks/compare/compare.html

632 lines
30 KiB
HTML
Raw Normal View History

2013-02-23 17:43:34 +00:00
<!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>
2013-02-23 17:47:37 +00:00
<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>
2013-02-23 17:43:34 +00:00
<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://groundwork.sidereel.com/">GroundworkCSS</a></h1>
<div class="info">
<p>A responsive framework with a fractional, semantic grid system built with Sass &amp; Compass.
</br>
<a target="_blank" href="http://groundwork.sidereel.com/">Visit Site</a> - <a target="_blank" href="https://github.com/groundworkcss/groundwork">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>MIT</h2></td>
</tr>
2013-02-23 17:43:34 +00:00
<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>
2013-03-06 04:36:41 +00:00
<h1><a target="_blank" href="http://yuilibrary.com/">YUI CSS</a></h1>
2013-02-23 17:43:34 +00:00
<div class="info">
2013-02-24 22:09:58 +00:00
<p>Simple CSS for the web.
2013-02-23 17:43:34 +00:00
</br>
2013-03-06 04:36:41 +00:00
<a target="_blank" href="http://yuilibrary.com/">Visit Site</a>
2013-02-23 17:43:34 +00:00
</p>
</div>
</td>
<td>
2013-02-24 22:09:58 +00:00
<div class="responsive hint hint--left hint--success yes" data-hint="Responsive">
2013-02-23 17:43:34 +00:00
<div class="desktop yes"></div>
2013-02-24 22:09:58 +00:00
<div class="tablet yes"></div>
<div class="phone yes"></div>
2013-02-23 17:43:34 +00:00
</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.
2013-02-23 17:43:34 +00:00
</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>
2013-02-24 04:50:48 +00:00
<tr>
<td>
<h1><a target="_blank" href="http://gumbyframework.com/">Gumby</a></h1>
<div class="info">
<p>The Responsive 960 Grid CSS Framework That Youre Already Familiar With.
</br>
<a target="_blank" href="http://gumbyframework.com/">Visit Site</a> - <a href="https://github.com/dsurgeons/gumby" target="_blank">View on Github</a>
2013-02-24 06:42:57 +00:00
</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>
2013-02-24 04:50:48 +00:00
<td><h2>Free</h2></td>
</tr>
2013-02-23 17:43:34 +00:00
</table>
</section>
<footer>
<p>Proudly brought to you by <a href="http://usabli.ca/" target="_blank">usabli.ca</a></p>
</footer>
</body>
</html>