diff --git a/compare/compare.html b/compare/compare.html new file mode 100644 index 0000000..cc16f89 --- /dev/null +++ b/compare/compare.html @@ -0,0 +1,594 @@ + + + + + +A collection of best front-end frameworks with comparison | By usabli.ca + + + + + + + +Fork me on GitHub
+ + + +
+
+

Front-end

+

CSS

+

Frameworks

+ +

+

+ + + + + + + + +

+

+ A collection of best front-end frameworks for faster and easier web development. +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Twitter Bootstrap

+
+

Sleek, intuitive, and powerful front-end framework for faster and easier web development. +
+ View on Github +

+
+
+
+
+
+
+
+

Apache v2.0

+

Foundation

+
+

The most advanced responsive front-end framework in the world. +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

960gs

+
+

Simple grid system +
+
+ Visit Site +

+
+
+
+
+
+
+
+

GPL & MIT

+

Skeleton

+
+

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development. +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

99lime HTML KickStart

+
+

Ultra–Lean HTML Building Blocks for Rapid Website Production. +
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

Kube

+
+

CSS-framework for professional developers. +
+
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

Less Framework

+
+

An adaptive CSS grid system. +
+
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

Flaminwork

+
+

The tiny front-end framework for lazy developers. +
+
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

G5 Framework

+
+

(X)HTML5, CSS3, PHP & jQuery Front End Framework. +
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

Easy Framework

+
+

Your new starting point for every front-end projects! +
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

Blueprint

+
+

Blueprint is a CSS framework, which aims to cut down on your development time. +
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

YAML

+
+

YAML is an (X)HTML/CSS framework for creating modern and flexible floated layouts. +
+ Visit Site +

+
+
+
+
+
+
+
+

Creative Commons

+

BlueTrip

+
+

A full featured and beautiful CSS framework which originally combined the best of Blueprint,... +
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

YUI 2: Grids CSS

+
+

The foundational YUI Grids CSS offers four preset page widths, six preset templates, ... +
+ Visit Site +

+
+
+
+
+
+
+
+

BSD license

+

Elements

+
+

Elements is a down to earth CSS framework. +
+
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

52framework

+
+

With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today . +
+ Visit Site +

+
+
+
+
+
+
+
+

Creative Commons

+

elastiCSS

+
+

A simple css framework to layout web-based interfaces, based on the printed layout . +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

Boilerplate

+
+

noun standardized pieces of text for use as clauses in contracts or as part of a computer program. +
+ Visit Site +

+
+
+
+
+
+
+
+

New BSD License

+

Emastic

+
+

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world ... +
+ Visit Site +

+
+
+
+
+
+
+
+

Free

+

Malo

+
+

Malo is ultra small css library for building web sites. +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

The Golden Grid

+
+

It 's a product of the search for the perfect modern grid system. +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

1kb grid

+
+

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. +
+ Visit Site - View on Github +

+
+
+
+
+
+
+
+

Free

+

Fluid 960 Grid System

+
+

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith ... +
+ Visit Site +

+
+
+
+
+
+
+
+

GPL / MIT

+

Easy Framework

+
+

Baseline is a framework built around the idea of a “real” baseline grid. +
+ Visit Site +

+
+
+
+
+
+
+
+

Creative Commons

+

Lovely CSS Framework

+
+

A simple and straight forward way to easily deploy an XHTML/CSS site. +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

xCSS

+
+

xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing . +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT

+

FEM CSS Framework

+
+

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles. +
+ Visit Site +

+
+
+
+
+
+
+
+

MIT/GPL

+

Helium

+
+

Helium is a framework for rapid prototyping and production-ready development +
+ View on Github +

+
+
+
+
+
+
+
+

Free

+
+ + + diff --git a/compare/css/fonts.css b/compare/css/fonts.css new file mode 100755 index 0000000..994251c --- /dev/null +++ b/compare/css/fonts.css @@ -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; + +} \ No newline at end of file diff --git a/compare/css/hint.css b/compare/css/hint.css new file mode 100755 index 0000000..b47cb2e --- /dev/null +++ b/compare/css/hint.css @@ -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); } \ No newline at end of file diff --git a/compare/css/style.css b/compare/css/style.css new file mode 100755 index 0000000..7098866 --- /dev/null +++ b/compare/css/style.css @@ -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:120px; + 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: 19.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; +} \ No newline at end of file diff --git a/compare/fonts/Algerian/alger-webfont.eot b/compare/fonts/Algerian/alger-webfont.eot new file mode 100755 index 0000000..3931fa0 Binary files /dev/null and b/compare/fonts/Algerian/alger-webfont.eot differ diff --git a/compare/fonts/Algerian/alger-webfont.svg b/compare/fonts/Algerian/alger-webfont.svg new file mode 100755 index 0000000..9553495 --- /dev/null +++ b/compare/fonts/Algerian/alger-webfont.svg @@ -0,0 +1,180 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/compare/fonts/Algerian/alger-webfont.ttf b/compare/fonts/Algerian/alger-webfont.ttf new file mode 100755 index 0000000..04ce004 Binary files /dev/null and b/compare/fonts/Algerian/alger-webfont.ttf differ diff --git a/compare/fonts/Algerian/alger-webfont.woff b/compare/fonts/Algerian/alger-webfont.woff new file mode 100755 index 0000000..2fb1aeb Binary files /dev/null and b/compare/fonts/Algerian/alger-webfont.woff differ diff --git a/compare/fonts/DroidSans/DroidSans-Bold-webfont.eot b/compare/fonts/DroidSans/DroidSans-Bold-webfont.eot new file mode 100755 index 0000000..995a072 Binary files /dev/null and b/compare/fonts/DroidSans/DroidSans-Bold-webfont.eot differ diff --git a/compare/fonts/DroidSans/DroidSans-Bold-webfont.svg b/compare/fonts/DroidSans/DroidSans-Bold-webfont.svg new file mode 100755 index 0000000..bde3ea2 --- /dev/null +++ b/compare/fonts/DroidSans/DroidSans-Bold-webfont.svg @@ -0,0 +1,146 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Digitized data copyright 2007 Google Corporation +Foundry : Ascender Corporation +Foundry URL : httpwwwascendercorpcom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/compare/fonts/DroidSans/DroidSans-Bold-webfont.ttf b/compare/fonts/DroidSans/DroidSans-Bold-webfont.ttf new file mode 100755 index 0000000..7e5b284 Binary files /dev/null and b/compare/fonts/DroidSans/DroidSans-Bold-webfont.ttf differ diff --git a/compare/fonts/DroidSans/DroidSans-Bold-webfont.woff b/compare/fonts/DroidSans/DroidSans-Bold-webfont.woff new file mode 100755 index 0000000..1c418b3 Binary files /dev/null and b/compare/fonts/DroidSans/DroidSans-Bold-webfont.woff differ diff --git a/compare/fonts/DroidSans/DroidSans-webfont.eot b/compare/fonts/DroidSans/DroidSans-webfont.eot new file mode 100755 index 0000000..b94ec87 Binary files /dev/null and b/compare/fonts/DroidSans/DroidSans-webfont.eot differ diff --git a/compare/fonts/DroidSans/DroidSans-webfont.svg b/compare/fonts/DroidSans/DroidSans-webfont.svg new file mode 100755 index 0000000..8e0136c --- /dev/null +++ b/compare/fonts/DroidSans/DroidSans-webfont.svg @@ -0,0 +1,146 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Digitized data copyright 2007 Google Corporation +Foundry : Ascender Corporation +Foundry URL : httpwwwascendercorpcom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/compare/fonts/DroidSans/DroidSans-webfont.ttf b/compare/fonts/DroidSans/DroidSans-webfont.ttf new file mode 100755 index 0000000..584e9ba Binary files /dev/null and b/compare/fonts/DroidSans/DroidSans-webfont.ttf differ diff --git a/compare/images/content-border.png b/compare/images/content-border.png new file mode 100755 index 0000000..48fc87d Binary files /dev/null and b/compare/images/content-border.png differ diff --git a/compare/images/desktop-yes.png b/compare/images/desktop-yes.png new file mode 100755 index 0000000..3e0c232 Binary files /dev/null and b/compare/images/desktop-yes.png differ diff --git a/compare/images/desktop.png b/compare/images/desktop.png new file mode 100755 index 0000000..47e881d Binary files /dev/null and b/compare/images/desktop.png differ diff --git a/compare/images/grid.png b/compare/images/grid.png new file mode 100755 index 0000000..9c9f744 Binary files /dev/null and b/compare/images/grid.png differ diff --git a/compare/images/noise.png b/compare/images/noise.png new file mode 100755 index 0000000..2f4febc Binary files /dev/null and b/compare/images/noise.png differ diff --git a/compare/images/phone-yes.png b/compare/images/phone-yes.png new file mode 100755 index 0000000..923af0a Binary files /dev/null and b/compare/images/phone-yes.png differ diff --git a/compare/images/phone.png b/compare/images/phone.png new file mode 100755 index 0000000..41fd4ac Binary files /dev/null and b/compare/images/phone.png differ diff --git a/compare/images/tablet-yes.png b/compare/images/tablet-yes.png new file mode 100755 index 0000000..f249097 Binary files /dev/null and b/compare/images/tablet-yes.png differ diff --git a/compare/images/tablet.png b/compare/images/tablet.png new file mode 100755 index 0000000..2025584 Binary files /dev/null and b/compare/images/tablet.png differ