2013-03-14 18:10:22 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "author" content = "usabli.ca team" / >
< meta name = "keywords" content = "front-end-frameworks,afshin mehrabani,ali ehsanfar, hosein emrani,css,usablica,front end frameworks,frameworks,front end,@afshinmeh,@ehsaniaa,@hoseiin" / >
2013-03-14 18:18:18 +00:00
< title > CSS Front-end Frameworks with comparison - By usabli.ca< / title >
2013-03-14 18:16:31 +00:00
< link rel = "stylesheet" href = "css/style.css?v=2" type = "text/css" / >
2013-03-14 18:10:22 +00:00
< link rel = "icon" href = "images/fav.png" / >
< 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 >
<!-- Header Typography -->
< header >
< hgroup >
< h1 > < span > CSS< / span > < / h1 >
< h2 > < span > FRONTEND< / span > < / h2 >
< h3 > < span > FRAMEWORKS< / span > < / h3 >
< / hgroup >
< / header >
<!-- Middle Tyopography and sharing buttons -->
< section >
< article >
< p > A Collection of best front End frameworks for< / p >
< p > Faster< small > & < / small > Easier< / p >
< p > Web Development< / p >
< / article >
< div class = "share" >
< ul >
< li > < span > Let others know< / span > < / li >
< li > < span > < a href = "https://twitter.com/usablica" class = "twitter-follow-button" data-show-count = "true" > Follow @usablica< / a > < / span > < / li >
2013-03-14 20:29:01 +00:00
< li > < span > < a href = "https://twitter.com/share" class = "twitter-share-button" data-url = "http://usablica.github.com/front-end-frameworks/compare.html" data-text = "A collection of best front-end frameworks with comparison v2.0, by @usablica." > Tweet< / a > < / span > < / li >
2013-03-14 18:10:22 +00:00
< li > < span > < 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 > < / span > < / li >
< li > < span > < 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 > < / span > < / li >
< li > < span > < 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 > < / span > < / li >
< / ul >
< / div >
< / section >
<!-- That's it ! compartion table :) -->
< section >
< nav >
< blockquote class = "guide" > Browser version " + " means latest version .< / blockquote >
2013-11-25 17:33:13 +00:00
< div class = "parent" >
< ul >
< li > < h1 > Semantic UI< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "9" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
2013-07-23 15:23:31 +00:00
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" data-responsive = "yes" > < / span >
< span class = "tablet" data-responsive = "yes" > < / span >
< / span >
< / div >
2013-11-25 17:33:13 +00:00
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > UI is the vocabulary of the web. < / blockquote >
< p style = "font-size:13px;line-height:1.4em;" >
Semantic empowers designers and developers by creating a language for sharing UI. < br / > Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. < br / > Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://semantic-ui.com" > Site< / a >
< a target = "_blank" href = "https://github.com/jlukic/Semantic-UI" > Github< / a >
< / aside >
< / div >
2013-07-23 15:23:31 +00:00
< / div >
2013-03-14 18:10:22 +00:00
< div class = "parent" >
< ul >
< li > < h1 > Twitter Bootstrap< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
2013-09-08 11:38:51 +00:00
< span class = "ie" data-version = "8" > < / span >
2013-03-14 18:10:22 +00:00
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Apache v2.0< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Sleek, intuitive, and powerful front-end framework for faster and easier web development.< / blockquote >
< p >
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://blog.getbootstrap.com/" > Blog< / a >
< a target = "_blank" href = "http://twitter.github.com/bootstrap/" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Foundation< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "9" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > The most advanced responsive front-end framework in the world.< / 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://foundation.zurb.com/" > Site< / a >
< a target = "_blank" href = "https://github.com/zurb/foundation/" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
2013-07-23 13:44:56 +00:00
< div class = "parent" >
< ul >
< li > < h1 > UIkit< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "9" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > A lightweight and modular front-end framework for developing fast and powerful web interfaces.< / blockquote >
< p >
UIkit gives you a comprehensive collection of HTML, CSS, and JS components. It can be extended with themes and is easy to customize to create your own look.
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://www.getuikit.com" > Site< / a >
< a target = "_blank" href = "https://github.com/uikit/uikit" > Github< / a >
< / aside >
< / div >
< / div >
2013-03-14 18:10:22 +00:00
< div class = "parent" >
< ul >
< li > < h1 > 960 Grid System< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< div class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / div >
< / div >
< / li >
< li > < h3 > GPL & MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Simple grid system.< / 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://960.gs/" > Site< / a >
< a target = "_blank" href = "http://github.com/nathansmith/960-grid-system/" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Skeleton< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "3" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.< / 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://www.getskeleton.com/" > Link< / a >
< a target = "_blank" href = "https://github.com/dhgamache/Skeleton" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > 99lime HTML KickStart< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "8" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Ultra– < / blockquote >
< p >
HTML KickStart is an ultra–
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://www.99lime.com/" > Site< / a >
< a target = "_blank" href = "http://github.com/joshuagatcke/HTML-KickStart/" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Kube< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "8" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > CSS-framework for professional developers.< / blockquote >
< p >
Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://imperavi.com/kube/" > Site< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Less Framework< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Apache v2.0< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > An adaptive CSS grid system.< / blockquote >
< p >
Less Framework is a CSS grid system for designing adaptive web
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://lessframework.com/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Flaminwork< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Apache v2.0< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > The tiny front-end framework for lazy developers.< / blockquote >
< p >
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://flaminwork.com/" > Blog< / a >
< a target = "_blank" href = "https://github.com/juanghurtado/flaminwork/" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > G5 Framework< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > (X)HTML5, CSS3, PHP & jQuery Front End Framework.< / 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://framework.gregbabula.info/" > Blog< / a >
< a target = "_blank" href = "https://github.com/gbabula/G5Framework" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Easy Framework< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > CC< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Your new starting point for every front-end projects!< / 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://easyframework.com/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Blueprint< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://www.blueprintcss.org/" > Blog< / a >
< a target = "_blank" href = "https://github.com/joshuaclayton/blueprint-css" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > YAML< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "6" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "4" > < / span >
< span class = "ff" data-version = "3.6" > < / span >
< span class = "op" data-version = "10" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
2013-07-10 14:49:54 +00:00
< span class = "sass" data-active = "yes" > SASS< / span >
2013-03-14 18:10:22 +00:00
< / div >
2013-07-10 14:49:54 +00:00
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
2013-03-14 18:10:22 +00:00
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > CC-BY< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > “Yet Another Multicolumn Layout” (YAML)< / blockquote >
< p >
2013-07-10 14:49:54 +00:00
YAML is a modular CSS framework for truly flexible, accessible and responsive websites. The framework is focussed on device independent screen design and provides bullet-proof modules for flexible layouts.
2013-03-14 18:10:22 +00:00
< / p >
< / article >
< aside >
2013-07-10 14:49:54 +00:00
< a target = "_blank" href = "http://www.yaml.de/" > Site< / a >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "https://github.com/djesse/yaml4-sass" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > BlueTrip< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://bluetrip.org/" > Blog< / a >
< a target = "_blank" href = "http://github.com/mikecrittenden/bluetrip/" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > YUI CSS< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "8" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > BSD license< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Simple CSS for the web< / blockquote >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://yuilibrary.com/" > Blog< / a >
2013-03-14 18:45:38 +00:00
< a target = "_blank" href = "https://github.com/yui/yui3" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Elements< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Elements is a down to earth CSS framework.< / blockquote >
< p >
It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://elements.projectdesigns.org/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > 52framework< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "6" > < / span >
< span class = "cr" data-version = "4" > < / span >
< span class = "sa" data-version = "4" > < / span >
< span class = "ff" data-version = "3" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > CC< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://52framework.com/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > elastiCSS< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://elasticss.com/" > Blog< / a >
< a target = "_blank" href = "http://github.com/azendal/elastic" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Boilerplate< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > New BSD< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > noun standardized pieces of text for use as clauses in contracts or as part of a computer program.< / blockquote >
< p >
As one of the original authors of Blueprint CSS I’ ’
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://code.google.com/p/css-boilerplate/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Emastic< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "5" > < / span >
< span class = "cr" data-version = "2" > < / span >
< span class = "sa" data-version = "3.1" > < / span >
< span class = "ff" data-version = "3" > < / span >
< span class = "op" data-version = "9" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< p >
Emastic is a CSS Framework, it’
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://code.google.com/p/emastic/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Malo< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "5" > < / span >
< span class = "cr" data-version = "3" > < / span >
< span class = "sa" data-version = "2" > < / span >
< span class = "ff" data-version = "1.5" > < / span >
< span class = "op" data-version = "8" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Malo is ultra small css library for building web sites.< / 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’
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://code.google.com/p/malo/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > The Golden Grid< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "6" > < / span >
< span class = "cr" data-version = "1" > < / span >
< span class = "sa" data-version = "3" > < / span >
< span class = "ff" data-version = "3" > < / span >
< span class = "op" data-version = "9.6" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://code.google.com/p/the-golden-grid/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > 1kb grid< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/" > Blog< / a >
< a target = "_blank" href = "https://github.com/heygrady/compass-grid-plugin" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Fluid 960 Grid System< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > GPL / MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://www.designinfluences.com/fluid960gs/" > Blog< / a >
< a target = "_blank" href = "http://github.com/bauhouse/fluid960gs/tree/" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Baseline< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "8" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "3" > < / span >
< span class = "ff" data-version = "3" > < / span >
< span class = "op" data-version = "9" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > CC< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Baseline is a framework built around the idea of a “real” baseline grid.< / 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’
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://www.baselinecss.com/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Lovely CSS Framework< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > The Lovely CSS Framework is a simple and straight forward way to easily deploy an XHTML/CSS site.< / blockquote >
< p >
Based on a simple 960px wide grid system, featuring multiple column layouts, and various pluggable add-ons.
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://code.google.com/p/lovely-css/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > xCSS< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Object-Oriented CSS Framework< / 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://xcss.antpaw.org/" > Blog< / a >
2013-03-14 18:45:38 +00:00
< a target = "_blank" href = "http://github.com/antpaw/xCSS" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > FEM CSS Framework< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "6" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT/GPL< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< 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 >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://www.frontendmatters.com/projects/fem-css-framework/" > Blog< / a >
2013-03-14 18:45:38 +00:00
< a target = "_blank" href = "https://github.com/jesucarr/FEM-CSS-Framework" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Helium< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Apache v2.0< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > A responsive frontend framework that won't weigh you down< / blockquote >
< p >
Helium is a frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3. In many ways it is similar to both Twitter Bootstrap and ZURB Foundation - in fact, it uses bits of their code. Unlike either of these two frameworks, however, Helium is designed to be much more lightweight and easier to tinker with.
< / p >
< / article >
< aside >
2013-03-14 18:45:38 +00:00
< a href = "#none" > Blog< / a >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "https://github.com/cbrauckmuller/helium" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Knacss< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "6" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > CC-BY< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Lightweight CSS framework< / blockquote >
< p >
KNACSS is a minimalist, responsive and extensible stylesheet to kick start your HTML / CSS projects. It relies on common best practices and my experience on the topic.
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://knacss.com/en/" > Blog< / a >
2013-03-14 18:10:22 +00:00
< a href = "#none" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Groundwork CSS< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "9" > < / span >
< span class = "cr" data-version = "14" > < / span >
< span class = "sa" data-version = "4" > < / span >
< span class = "ff" data-version = "3.6" > < / span >
< span class = "op" data-version = "11" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > The Last Grid You'll Ever Need< / blockquote >
< p >
GroundworkCSS's flexible grid system enables you to do rapid development and scales to fit any screen size, from handheld devices to large format televisions.
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://groundwork.sidereel.com/home" > Blog< / a >
< a target = "_blank" href = "https://github.com/groundworkcss/groundwork" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Gumby< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "9" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Open Source< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Now more flexible than ever.< / blockquote >
< p >
Gumby Framework was built to be the most maleable grid framework you’ ’
< / p >
< / article >
< aside >
2013-03-14 18:30:46 +00:00
< a target = "_blank" href = "http://gumbyframework.com/" > Blog< / a >
< a target = "_blank" href = "https://github.com/GumbyFramework/Gumby" > Github< / a >
2013-03-14 18:10:22 +00:00
< / aside >
< / div >
2013-03-15 17:33:01 +00:00
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Unsemantic< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT/GPL< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< p >
Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages.
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://unsemantic.com/" > Site< / a >
< a target = "_blank" href = "http://github.com/nathansmith/unsemantic" > Github< / a >
< / aside >
< / div >
2013-03-14 18:10:22 +00:00
< / div >
2013-04-15 20:17:36 +00:00
< div class = "parent" >
2013-07-10 19:00:08 +00:00
< ul >
< li > < h1 > Seelva< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "13" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "3.6" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > Apache 2.0< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< p >
Seelva is a CSS and HTML Framework built with SASS and Compass. It features a fixed 960px 24 columns grid that can be modified through SASS.
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://seelva.com/" > Site< / a >
< a target = "_blank" href = "http://github.com/seelva/seelva" > Github< / a >
< / aside >
< / div >
2013-08-03 15:27:54 +00:00
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Tuktuk< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
2013-09-20 15:42:22 +00:00
< li > < h3 > MIT< / h3 > < / li >
2013-08-03 15:27:54 +00:00
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Simple (but powerful) RWD Framework.< / blockquote >
< p >
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://tuktuk.tapquo.com/" > Site< / a >
< a target = "_blank" href = "https://github.com/soyjavi/tuktuk" > Github< / a >
< / aside >
< / div >
2013-09-07 07:38:01 +00:00
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Maple< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "8" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" > < / span >
< span class = "mobile" data-responsive = "yes" > < / span >
< span class = "tablet" data-responsive = "yes" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Realistic Sass-based CSS framework for mobile. < / blockquote >
< p >
Mape is built with Sass, which allows us to writing better CSS and high performance CSS.
< / p >
< / article >
< aside >
< a href = "#none" > Blog< / a >
< a target = "_blank" href = "http://github.com/t32k/maple" > Github< / a >
< / aside >
< / div >
2013-09-08 11:38:51 +00:00
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Fluidable< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "8" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" data-responsive = "yes" > < / span >
< span class = "tablet" data-responsive = "yes" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > CCO< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Mobile first, responsive grid system < / blockquote >
< p >
Fluidable is a mobile first, responsive grid system that has fixed gutters and supports variable columns. It is standalone, lightweight & built using LESS.
< / p >
< / article >
< aside >
< a href = "http://fluidable.com/" > Site< / a >
< a target = "_blank" href = "https://github.com/andri/fluidable" > Github< / a >
< / aside >
< / div >
2013-07-10 19:00:08 +00:00
< / div >
2013-11-13 09:16:51 +00:00
< div class = "parent" >
< ul >
< li > < h1 > Ink< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "7" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" data-active = "yes" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Ink is a set of tools for quick development of web interfaces.< / blockquote >
< p >
It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what's important.
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://ink.sapo.pt" > Site< / a >
< a target = "_blank" href = "https://github.com/sapo/ink/" > Github< / a >
< / aside >
< / div >
< / div >
2013-11-25 17:33:13 +00:00
< div class = "parent" >
< ul >
< li > < h1 > Kickoff< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "8" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span > < span class = "ff" data-version = "+" > < / span > < span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" data-active = "yes" > SASS< / span >
< / div >
< span class = "responsive" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" data-responsive = "yes" > < / span >
< span class = "tablet" data-responsive = "yes" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > A lightweight front-end framework for creating scalable, responsive sites < / blockquote >
< p >
Kickoff is an actively maintained front-end framework, created by Zander Martineau and Ashley Nolan.
< br > < br >
The framework is not meant to be too prescriptive - we don't want to force developers into a certain coding style - and so can be used as a starting point for any type of project.
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://tmwagency.github.io/kickoff/" > Site< / a >
< a target = "_blank" href = "https://github.com/tmwagency/kickoff" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Cascade Framework< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "6" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" data-responsive = "yes" > < / span >
< span class = "tablet" data-responsive = "yes" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > Powerful OOCSS front-end framework optimised for performance and flexibility.< / blockquote >
< p >
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://cascade-framework.com/" > Site< / a >
< a target = "_blank" href = "https://github.com/jslegers/cascadeframework" > Github< / a >
< / aside >
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Cascade Framework < small > Light< / small > < / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "6" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" data-responsive = "yes" > < / span >
< span class = "tablet" data-responsive = "yes" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< blockquote > < i > < / i > An even more lightweight version of Cascade Framework, containing just the bare essentials.< / blockquote >
< p >
< / p >
< / article >
< aside >
< a target = "_blank" href = "https://github.com/jslegers/cascadeframeworklight" > Github< / a >
< / aside >
2013-12-03 03:29:26 +00:00
< / div >
< / div >
< div class = "parent" >
< ul >
< li > < h1 > Metro UI CSS 2.0< / h1 > < / li >
< li >
< div class = "details" >
< div class = "browsers" >
< span class = "ie" data-version = "+" > < / span >
< span class = "cr" data-version = "+" > < / span >
< span class = "sa" data-version = "+" > < / span >
< span class = "ff" data-version = "+" > < / span >
< span class = "op" data-version = "+" > < / span >
< / div >
< div class = "ui" >
< span data-active = "yes" class = "less" > LESS< / span >
< span class = "sass" > SASS< / span >
< / div >
< span class = "responsive" data-responsive = "yes" >
< span class = "desktop" data-responsive = "yes" > < / span >
< span class = "mobile" > < / span >
< span class = "tablet" > < / span >
< / span >
< / div >
< / li >
< li > < h3 > MIT< / h3 > < / li >
< / ul >
< div class = "info" >
< article >
< p >
Metro UI CSS a set of styles to create a site with an interface similar to Windows 8. This set of styles was developed as a self-contained solution.
< / p >
< / article >
< aside >
< a target = "_blank" href = "http://metroui.org.ua/" > Site< / a >
< a target = "_blank" href = "https://github.com/olton/Metro-UI-CSS/" > Github< / a >
< / aside >
2013-11-25 17:33:13 +00:00
< / div >
< / div >
2013-11-13 09:16:51 +00:00
2013-03-14 18:10:22 +00:00
< / nav >
< / section >
<!-- Footer -->
< footer >
< ul >
< li >
< span > usabli.ca< / span >
< i > < / i >
< a href = "http://usabli.ca" > < / a > < / li >
< / li >
2013-03-18 16:48:47 +00:00
< li > < a href = "http://twitter.com/usablica" > < / a > < / li >
2013-03-14 18:10:22 +00:00
< li > < a href = "https://www.facebook.com/usablica" > < / a > < / li >
< li > < a href = "http://www.linkedin.com/company/2686034" > < / a > < / li >
< li > < a href = "https://github.com/usablica" > < / a > < / li >
< / ul >
< / footer >
<!-- Proudly brougt to you by usabli.ca team ! -->
<!-- Sharing Needed Scripts -->
< 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 >
<!-- Scripts -->
< script type = "text/javascript" src = "js/jquery.min.js" > < / script >
< script >
$('nav .parent ul').on('click', function (e) {
$(this).next('.info').toggleClass('active')
$(this).children('li:first-child').toggleClass('active');
});
< / script >
< / body >
< / html >
