Add compare table
This commit is contained in:
Afshin Mehrabani
parent
9968af277f
commit
139a4190d0
|
|
@ -0,0 +1,595 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A collection of best front-end frameworks | usabli.ca</title>
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||
</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>
|
||||
<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 #FrontEndFramework by @usablica.">Tweet</a>
|
||||
|
||||
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fusablica.github.com%2Ffront-end-frameworks%2F&send=false&layout=button_count&width=110&show_faces=false&font=arial&colorscheme=light&action=like&height=21&appId=281502801861442" 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>
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
<p>
|
||||
A collection of best front-end frameworks for faster and easier web development.
|
||||
</p>
|
||||
</header>
|
||||
<section>
|
||||
<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>
|
||||
</table>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Proudly brought to you by <a href="http://usabli.ca/" target="_blank">usabli.ca</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@font-face {
|
||||
font-family: 'DroidSansRegular';
|
||||
src: url('../fonts/DroidSans/DroidSans-webfont.eot');
|
||||
src: url('../fonts/DroidSans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/DroidSans/DroidSans-webfont.woff') format('woff'),
|
||||
url('../fonts/DroidSans/DroidSans-webfont.ttf') format('truetype'),
|
||||
url('../fonts/DroidSans/DroidSans-webfont.svg#DroidSansRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Sosa';
|
||||
src: url('../fonts/sosa/sosa.eot');
|
||||
src: url('../fonts/sosa/sosa.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/sosa/sosa.woff') format('woff'),
|
||||
url('../fonts/sosa/sosa.ttf') format('truetype'),
|
||||
url('../fonts/sosa/sosa.svg#Sosa') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DroidSansBold';
|
||||
src: url('../fonts/DroidSans/DroidSans-Bold-webfont.eot');
|
||||
src: url('../fonts/DroidSans/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/DroidSans/DroidSans-Bold-webfont.woff') format('woff'),
|
||||
url('../fonts/DroidSans/DroidSans-Bold-webfont.ttf') format('truetype'),
|
||||
url('../fonts/DroidSans/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'algerianregular';
|
||||
src: url('../fonts/Algerian/alger-webfont.eot');
|
||||
src: url('../fonts/Algerian/alger-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/Algerian/alger-webfont.woff') format('woff'),
|
||||
url('../fonts/Algerian/alger-webfont.ttf') format('truetype'),
|
||||
url('../fonts/Algerian/alger-webfont.svg#algerianregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
/*! Hint.css - v0.1.0 - 2013-02-03
|
||||
* https://github.com/chinchang/hint.css
|
||||
* Copyright (c) 2013 Kushagra Gour; Licensed MIT */
|
||||
|
||||
/*-------------------------------------*\
|
||||
HINT.css - A CSS tooltip library
|
||||
\*-------------------------------------*/
|
||||
/**
|
||||
* HINT.css is a tooltip library made in pure CSS.
|
||||
*
|
||||
* Source: https://github.com/chinchang/hint.css
|
||||
* Demo: http://kushagragour.in/labs/hintcss
|
||||
*
|
||||
* Release under The MIT License
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* source: hint-core.scss
|
||||
*
|
||||
* Defines the basic styling for the tooltip.
|
||||
* Each tooltip is made of 2 parts:
|
||||
* 1) body (:after)
|
||||
* 2) arrow (:before)
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint
|
||||
*/
|
||||
.hint {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/**
|
||||
* tooltip arrow
|
||||
*/
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
.hint:before, .hint:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 1000000;
|
||||
pointer-events: none;
|
||||
-webkit-transition: 0.3s ease;
|
||||
-moz-transition: 0.3s ease; }
|
||||
.hint:hover:before, .hint:hover:after {
|
||||
opacity: 1; }
|
||||
.hint:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
z-index: 1000001; }
|
||||
.hint:after {
|
||||
content: attr(data-hint);
|
||||
background: #383838;
|
||||
color: white;
|
||||
text-shadow: 0 -1px 0px black;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/**
|
||||
* source: hint-position.scss
|
||||
*
|
||||
* Defines the positoning logic for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--top
|
||||
* 2) hint--bottom
|
||||
* 3) hint--left
|
||||
* 4) hint--right
|
||||
*/
|
||||
/**
|
||||
* set default color for tooltip arrows
|
||||
*/
|
||||
.hint--top:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--bottom:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--left:before {
|
||||
border-left-color: #383838; }
|
||||
|
||||
.hint--right:before {
|
||||
border-right-color: #383838; }
|
||||
|
||||
/**
|
||||
* top tootip
|
||||
*/
|
||||
.hint--top:before {
|
||||
margin-bottom: -12px; }
|
||||
.hint--top:after {
|
||||
margin-left: -18px; }
|
||||
.hint--top:before, .hint--top:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
.hint--top:hover:before, .hint--top:hover:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom tootip
|
||||
*/
|
||||
.hint--bottom:before {
|
||||
margin-top: -12px; }
|
||||
.hint--bottom:after {
|
||||
margin-left: -18px; }
|
||||
.hint--bottom:before, .hint--bottom:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
.hint--bottom:hover:before, .hint--bottom:hover:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
/**
|
||||
* right tootip
|
||||
*/
|
||||
.hint--right:before {
|
||||
margin-left: -12px;
|
||||
margin-bottom: -6px; }
|
||||
.hint--right:after {
|
||||
margin-bottom: -14px; }
|
||||
.hint--right:before, .hint--right:after {
|
||||
left: 100%;
|
||||
bottom: 50%; }
|
||||
.hint--right:hover:before, .hint--right:hover:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
/**
|
||||
* left tootip
|
||||
*/
|
||||
.hint--left:before {
|
||||
margin-right: -12px;
|
||||
margin-bottom: -6px; }
|
||||
.hint--left:after {
|
||||
margin-bottom: -14px; }
|
||||
.hint--left:before, .hint--left:after {
|
||||
right: 100%;
|
||||
bottom: 50%; }
|
||||
.hint--left:hover:before, .hint--left:hover:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
/**
|
||||
* source: hint-color-types.scss
|
||||
*
|
||||
* Contains tooltips of various types based on color differences.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--error
|
||||
* 2) hint--warning
|
||||
* 3) hint--info
|
||||
* 4) hint--success
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* Error
|
||||
*/
|
||||
.hint--error:after {
|
||||
background-color: #b34e4d;
|
||||
text-shadow: 0 -1px 0px #5a2626; }
|
||||
.hint--error.hint--top:before {
|
||||
border-top-color: #b34e4d; }
|
||||
.hint--error.hint--bottom:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
.hint--error.hint--left:before {
|
||||
border-left-color: #b34e4d; }
|
||||
.hint--error.hint--right:before {
|
||||
border-right-color: #b34e4d; }
|
||||
|
||||
/**
|
||||
* Warning
|
||||
*/
|
||||
.hint--warning:after {
|
||||
background-color: #c09854;
|
||||
text-shadow: 0 -1px 0px #6d5228; }
|
||||
.hint--warning.hint--top:before {
|
||||
border-top-color: #c09854; }
|
||||
.hint--warning.hint--bottom:before {
|
||||
border-bottom-color: #c09854; }
|
||||
.hint--warning.hint--left:before {
|
||||
border-left-color: #c09854; }
|
||||
.hint--warning.hint--right:before {
|
||||
border-right-color: #c09854; }
|
||||
|
||||
/**
|
||||
* Info
|
||||
*/
|
||||
.hint--info:after {
|
||||
background-color: #3986ac;
|
||||
text-shadow: 0 -1px 0px #193c4c; }
|
||||
.hint--info.hint--top:before {
|
||||
border-top-color: #3986ac; }
|
||||
.hint--info.hint--bottom:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
.hint--info.hint--left:before {
|
||||
border-left-color: #3986ac; }
|
||||
.hint--info.hint--right:before {
|
||||
border-right-color: #3986ac; }
|
||||
|
||||
/**
|
||||
* Success
|
||||
*/
|
||||
.hint--success:after {
|
||||
background-color: #458746;
|
||||
text-shadow: 0 -1px 0px #1a331a; }
|
||||
.hint--success.hint--top:before {
|
||||
border-top-color: #458746; }
|
||||
.hint--success.hint--bottom:before {
|
||||
border-bottom-color: #458746; }
|
||||
.hint--success.hint--left:before {
|
||||
border-left-color: #458746; }
|
||||
.hint--success.hint--right:before {
|
||||
border-right-color: #458746; }
|
||||
|
||||
/**
|
||||
* source: hint-always.scss
|
||||
*
|
||||
* Defines a persisted tooltip which shows always.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--always
|
||||
*
|
||||
*/
|
||||
.hint--always:after, .hint--always:before {
|
||||
opacity: 1; }
|
||||
.hint--always.hint--top:after, .hint--always.hint--top:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
.hint--always.hint--left:after, .hint--always.hint--left:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
.hint--always.hint--right:after, .hint--always.hint--right:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
@charset "utf-8";
|
||||
@import url('http://fonts.googleapis.com/css?family=Droid+Sans');
|
||||
@import url('hint.css');
|
||||
/* CSS Document */
|
||||
|
||||
body {
|
||||
width:980px;
|
||||
margin:auto;
|
||||
background-image:url(../images/noise.png);
|
||||
font-family: 'Droid Sans';
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin:50px auto;
|
||||
position:relative;
|
||||
}
|
||||
header h1 {
|
||||
font-family: 'Droid sans-serif';
|
||||
font-weight: normal;
|
||||
color: #282828;
|
||||
margin:auto;
|
||||
font-size:118px;
|
||||
line-height:95px;
|
||||
background-image:url(../images/noise.png);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: 240px;
|
||||
}
|
||||
header .line {
|
||||
position:absolute;
|
||||
width:980px;
|
||||
height:1px;
|
||||
border-top:5px double rgba(0,0,0,.5);
|
||||
border-bottom:5px double rgba(0,0,0,.5);
|
||||
top: 70px;
|
||||
left: 0px;
|
||||
z-index: 0;
|
||||
}
|
||||
header h2 {
|
||||
letter-spacing: 7px;
|
||||
font-family: 'Droid sans-serif';
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#282828;
|
||||
font-size: 25px;
|
||||
line-height:26px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
header h3 {
|
||||
letter-spacing: 7px;
|
||||
font-family: 'Droid sans-serif';
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#282828;
|
||||
font-size: 20.7px;
|
||||
line-height:28px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.clr {
|
||||
font-size:70px;
|
||||
margin:20px auto auto;
|
||||
text-align:center;
|
||||
width: 980px;
|
||||
line-height:1.5em;
|
||||
color:#828282;
|
||||
display:block;
|
||||
}
|
||||
header p {
|
||||
font-weight: normal;
|
||||
margin:auto;
|
||||
color:#282828;
|
||||
font-size: 18px;
|
||||
line-height:1.5em;
|
||||
}
|
||||
section {
|
||||
margin:50px auto;
|
||||
}
|
||||
section table {
|
||||
width:980px;
|
||||
margin:auto;
|
||||
&background:rgba(255,255,255,0.5) url(../images/grid.png);
|
||||
border:rgba(255,255,255,.2) 10px solid;
|
||||
border-spacing: 1px;
|
||||
border-image: url(../images/content-border.png) 10 repeat;
|
||||
-moz-border-image: url(../images/content-border.png) 10 repeat;
|
||||
-webkit-border-image: url(../images/content-border.png) 10 repeat;
|
||||
box-shadow: 0 0 7px 0px rgba(162,162,162,.5);
|
||||
}
|
||||
|
||||
section table tr:nth-child(even) {
|
||||
background:rgba(255,255,255,0.5) url(../images/grid.png);
|
||||
}
|
||||
section table tr:nth-child(odd) {
|
||||
background:rgba(255,255,255,0.9) url(../images/grid.png);
|
||||
}
|
||||
section table tr td:first-child {
|
||||
width:450px;
|
||||
}
|
||||
section table tr td:last-child {
|
||||
width:148px;
|
||||
}
|
||||
section table tr td {
|
||||
width: 100px;
|
||||
max-height: 70px;
|
||||
}
|
||||
section table tr h1 {
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#000;
|
||||
font-size: 20px;
|
||||
padding:0px 10px;
|
||||
line-height:3.5em;
|
||||
text-align:left;
|
||||
float: left;
|
||||
}
|
||||
section table tr h2 {
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#828282;
|
||||
font-size: 16px;
|
||||
padding:0px 15px;
|
||||
line-height:1.5em;
|
||||
text-align:center;
|
||||
}
|
||||
section table tr p {
|
||||
font-weight: normal;
|
||||
margin:10px auto;
|
||||
color:#282828;
|
||||
border-left:3px solid rgba(255,255,255,.3);
|
||||
font-size: 16px;
|
||||
padding:20px;
|
||||
line-height:1.5em;
|
||||
}
|
||||
a {
|
||||
text-decoration:none !important;
|
||||
color:inherit;
|
||||
}
|
||||
section table h1 a:hover {
|
||||
color:#900;
|
||||
}
|
||||
table tr td span {
|
||||
text-transform: uppercase;
|
||||
font-family: Impact;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
border: 3px solid;
|
||||
padding: 5px;
|
||||
margin:15px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
table tr td span.yes {
|
||||
color: rgba(41,145,0,.8);
|
||||
border-color: rgba(41,145,0,.8);
|
||||
transform: rotate(10deg);
|
||||
-webkit-transform: rotate(10deg);
|
||||
-moz-transform: rotate(10deg);
|
||||
-o-transform: rotate(10deg);
|
||||
-ms-transform: rotate(10deg);
|
||||
}
|
||||
table tr td span.no {
|
||||
color: rgba(145,0,0,.8);
|
||||
border-color: rgba(145,0,0,.8);
|
||||
transform: rotate(-7deg);
|
||||
-webkit-transform: rotate(-7deg);
|
||||
-moz-transform: rotate(-7deg);
|
||||
-o-transform: rotate(-7deg);
|
||||
-ms-transform: rotate(-7deg);
|
||||
}
|
||||
.responsive {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: 10px 30px;
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
.responsive.yes .desktop ,
|
||||
.responsive .desktop.yes {
|
||||
background: url(../images/desktop-yes.png) right bottom no-repeat;
|
||||
}
|
||||
.responsive.yes .tablet ,
|
||||
.responsive .tablet.yes {
|
||||
background: url(../images/tablet-yes.png) right bottom no-repeat;
|
||||
}
|
||||
.responsive.yes .phone ,
|
||||
.responsive .phone.yes {
|
||||
background: url(../images/phone-yes.png) right bottom no-repeat;
|
||||
}
|
||||
|
||||
.responsive .desktop {
|
||||
margin: auto;
|
||||
float: right;
|
||||
width: 73px;
|
||||
height: 52px;
|
||||
background: url(../images/desktop.png) center center no-repeat;
|
||||
display: inline-block;
|
||||
}
|
||||
.responsive .tablet {
|
||||
margin: auto;
|
||||
float: right;
|
||||
width: 34px;
|
||||
height: 52px;
|
||||
background: url(../images/tablet.png) right bottom no-repeat;
|
||||
display: inline-block;
|
||||
margin-right: -17px;
|
||||
}
|
||||
.responsive .phone {
|
||||
margin: auto;
|
||||
float: right;
|
||||
width: 15px;
|
||||
height: 52px;
|
||||
background: url(../images/phone.png) bottom right no-repeat;
|
||||
display: inline-block;
|
||||
margin-right: -9px;
|
||||
}
|
||||
.info {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
float: right;
|
||||
height: 74px;
|
||||
width: 345px;
|
||||
background: rgba(162,162,162,.3);
|
||||
position: relative;
|
||||
opacity:0;
|
||||
visibility: hidden;
|
||||
left: -10px;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
}
|
||||
td:hover .info {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.info:after {
|
||||
right: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info:after {
|
||||
border-color: rgba(136, 183, 213, 0);
|
||||
border-right-color: rgba(162,162,162,.3);
|
||||
border-width: 15px;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.info p {
|
||||
font-size: 14px;
|
||||
color: #282828;
|
||||
line-height: 1.3em;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 10px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.info a {
|
||||
color: #006099;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.info a:hover {
|
||||
color: #900;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #828282;
|
||||
font-size: 14px;
|
||||
}
|
||||
footer a {
|
||||
color: #006099;
|
||||
}
|
||||
footer a:hover {
|
||||
color: #900;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
360
test.html
360
test.html
|
|
@ -1,360 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="width=640" />
|
||||
|
||||
<link rel="stylesheet" href="stylesheets/core.css" media="screen"/>
|
||||
<link rel="stylesheet" href="stylesheets/mobile.css" media="handheld, only screen and (max-device-width:640px)"/>
|
||||
<link rel="stylesheet" href="stylesheets/pygment_trac.css"/>
|
||||
|
||||
<script type="text/javascript" src="javascripts/modernizr.js"></script>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="javascripts/headsmart.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('#main_content').headsmart()
|
||||
})
|
||||
</script>
|
||||
<title>Front-end Frameworks by usablica</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a id="forkme_banner" href="https://github.com/usablica/front-end-frameworks">View on GitHub</a>
|
||||
<div class="shell">
|
||||
|
||||
<header>
|
||||
<span class="ribbon-outer">
|
||||
<span class="ribbon-inner">
|
||||
<h1>Front-end Frameworks</h1>
|
||||
<h2>A collection of best front-end frameworks for faster and easier web development.</h2>
|
||||
</span>
|
||||
<span class="left-tail"></span>
|
||||
<span class="right-tail"></span>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<section id="downloads">
|
||||
<span class="inner">
|
||||
<a href="https://github.com/usablica/front-end-frameworks/zipball/master" class="zip"><em>download</em> .ZIP</a><a href="https://github.com/usablica/front-end-frameworks/tarball/master" class="tgz"><em>download</em> .TGZ</a>
|
||||
</span>
|
||||
</section>
|
||||
|
||||
|
||||
<span class="banner-fix"></span>
|
||||
|
||||
|
||||
<section id="main_content">
|
||||
<h1>Front-end Frameworks v2.5</h1>
|
||||
|
||||
<p>A collection of best front-end frameworks for faster and easier web development.</p>
|
||||
|
||||
<h2>Twitter Bootstrap</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development. </p>
|
||||
</blockquote>
|
||||
|
||||
<p><strong>Responsive:</strong> Yes </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://twitter.github.com/bootstrap/">http://twitter.github.com/bootstrap/</a></p>
|
||||
|
||||
<h2>Foundation</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>The most advanced responsive front-end framework in the world.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> Yes </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://foundation.zurb.com/">http://foundation.zurb.com/</a></p>
|
||||
|
||||
<h2>960 Grid System</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Simple grid system</p>
|
||||
</blockquote>
|
||||
|
||||
<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.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> Yes </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://960.gs/">http://960.gs/</a></p>
|
||||
|
||||
<h2>Skeleton</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>A Beautiful Boilerplate for Responsive, Mobile-Friendly Development. </p>
|
||||
</blockquote>
|
||||
|
||||
<p>Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> Yes </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.getskeleton.com/">http://www.getskeleton.com/</a></p>
|
||||
|
||||
<h2>99lime HTML KickStart</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Ultra–Lean HTML Building Blocks for Rapid Website Production. </p>
|
||||
</blockquote>
|
||||
|
||||
<p>HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.99lime.com/">http://www.99lime.com/</a></p>
|
||||
|
||||
<h2>Kube</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>CSS-framework for professional developers. </p>
|
||||
</blockquote>
|
||||
|
||||
<p>Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> Yes </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://imperavi.com/kube/">http://imperavi.com/kube/</a></p>
|
||||
|
||||
<h2>Less Framework</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>An adaptive CSS grid system. </p>
|
||||
</blockquote>
|
||||
|
||||
<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. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> Yes </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://lessframework.com/">http://lessframework.com/</a></p>
|
||||
|
||||
<h2>Flaminwork</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>The tiny front-end framework for lazy developers.</p>
|
||||
</blockquote>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://flaminwork.com/">http://flaminwork.com/</a></p>
|
||||
|
||||
<h2>G5 Framework</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>(X)HTML5, CSS3, PHP & jQuery Front End Framework. </p>
|
||||
</blockquote>
|
||||
|
||||
<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.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://framework.gregbabula.info/">http://framework.gregbabula.info/</a></p>
|
||||
|
||||
<h2>Easy Framework</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Your new starting point for every front-end projects! </p>
|
||||
</blockquote>
|
||||
|
||||
<p>Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://easyframework.com/">http://easyframework.com/</a></p>
|
||||
|
||||
<h2>Blueprint</h2>
|
||||
|
||||
<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.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.blueprintcss.org/">http://www.blueprintcss.org/</a></p>
|
||||
|
||||
<h2>YAML</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>“Yet Another Multicolumn Layout” (YAML) </p>
|
||||
</blockquote>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> Yes </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.yaml.de/">http://www.yaml.de/</a></p>
|
||||
|
||||
<h2>BlueTrip</h2>
|
||||
|
||||
<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.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://bluetrip.org/">http://bluetrip.org/</a></p>
|
||||
|
||||
<h2>YUI 2: Grids CSS</h2>
|
||||
|
||||
<p>The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="https://developer.yahoo.com/yui/grids/">https://developer.yahoo.com/yui/grids/</a></p>
|
||||
|
||||
<h2>Elements</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Elements is a down to earth CSS framework.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://elements.projectdesigns.org/">http://elements.projectdesigns.org/</a></p>
|
||||
|
||||
<h2>52framework</h2>
|
||||
|
||||
<p>With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually al browsers. Using HTML5 makes for much cleaner mark up. This framework fully uses all the great advantages of HTML5.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://52framework.com/">http://52framework.com/</a></p>
|
||||
|
||||
<h2>elastiCSS</h2>
|
||||
|
||||
<p>A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily </p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://elasticss.com/">http://elasticss.com/</a></p>
|
||||
|
||||
<h2>Boilerplate</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>noun standardized pieces of text for use as clauses in contracts or as part of a computer program.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://code.google.com/p/css-boilerplate/">http://code.google.com/p/css-boilerplate/</a></p>
|
||||
|
||||
<h2>Emastic</h2>
|
||||
|
||||
<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.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://code.google.com/p/emastic/">http://code.google.com/p/emastic/</a></p>
|
||||
|
||||
<h2>Malo</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Malo is ultra small css library for building web sites.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it’s bigger brother Emastic CSS Framework.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://code.google.com/p/malo/">http://code.google.com/p/malo/</a></p>
|
||||
|
||||
<h2>The Golden Grid</h2>
|
||||
|
||||
<p>The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://code.google.com/p/the-golden-grid/">http://code.google.com/p/the-golden-grid/</a></p>
|
||||
|
||||
<h2>1kb grid</h2>
|
||||
|
||||
<p>Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn't require a PhD? Meet The 1KB CSS Grid. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.1kbgrid.com/">http://www.1kbgrid.com/</a></p>
|
||||
|
||||
<h2>Fluid 960 Grid System</h2>
|
||||
|
||||
<p>The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.designinfluences.com/fluid960gs/">http://www.designinfluences.com/fluid960gs/</a></p>
|
||||
|
||||
<h2>Baseline</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Baseline is a framework built around the idea of a “real” baseline grid.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.baselinecss.com/">http://www.baselinecss.com/</a></p>
|
||||
|
||||
<h2>Lovely CSS Framework</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>The Lovely CSS Framework is a simple and straight forward way to easily deploy an XHTML/CSS site. </p>
|
||||
</blockquote>
|
||||
|
||||
<p>Based on a simple 960px wide grid system, featuring multiple column layouts, and various pluggable add-ons.</p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://code.google.com/p/lovely-css/">http://code.google.com/p/lovely-css/</a></p>
|
||||
|
||||
<h2>xCSS</h2>
|
||||
|
||||
<blockquote>
|
||||
<p>Object-Oriented CSS Framework</p>
|
||||
</blockquote>
|
||||
|
||||
<p>xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://xcss.antpaw.org/">http://xcss.antpaw.org/</a></p>
|
||||
|
||||
<h2>FEM CSS Framework</h2>
|
||||
|
||||
<p>FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts. It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes. </p>
|
||||
|
||||
<p><strong>Responsive:</strong> No </p>
|
||||
|
||||
<p><strong>Website:</strong> <a href="http://www.frontendmatters.com/projects/fem-css-framework/">http://www.frontendmatters.com/projects/fem-css-framework/</a></p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<span class="ribbon-outer">
|
||||
<span class="ribbon-inner">
|
||||
<p>this project by <a href="https://github.com/usablica">usablica</a> can be found on <a href="https://github.com/usablica/front-end-frameworks">GitHub</a></p>
|
||||
</span>
|
||||
<span class="left-tail"></span>
|
||||
<span class="right-tail"></span>
|
||||
</span>
|
||||
<p>Generated with <a href="http://pages.github.com">GitHub Pages</a> using Merlot</p>
|
||||
<span class="octocat"></span>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-37780388-1");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue