614 lines
29 KiB
HTML
614 lines
29 KiB
HTML
|
||
<!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&send=false&layout=button_count&width=110&show_faces=true&font&colorscheme=light&action=like&height=21&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>Ultra–Lean 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, it’s 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>
|
||
<tr>
|
||
<td>
|
||
<h1><a target="_blank" href="http://groundwork.sidereel.com/">Sidereel Groundwork</a></h1>
|
||
<div class="info">
|
||
<p>An HTML5, CSS and JavaScript framework with focus on responsiveness for various devices.
|
||
</br>
|
||
<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>
|
||
</table>
|
||
</section>
|
||
<footer>
|
||
<p>Proudly brought to you by <a href="http://usabli.ca/" target="_blank">usabli.ca</a></p>
|
||
</footer>
|
||
</body>
|
||
</html>
|