commit 26b12f12d3b7448b73ca2542756bd835165fad27 Author: Matthias Kretschmann Date: Sat Sep 12 23:11:22 2015 +0200 init, port codepen over diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f797593 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Matthias Kretschmann + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..38d1320 --- /dev/null +++ b/README.md @@ -0,0 +1,71 @@ +# App Store Badges + +> Pure CSS/SVG based App Store badges + +Demo | Blog post | [Codepen](http://codepen.io/kremalicious/details/EVVraP/) + +## Usage + +Install with npm: + +```bash +npm i appstorebadges --save +``` + +Or install with Bower: + +```bash +bower install appstorebadges --save +``` + +Or just link to the css file: + +```html + +``` + +## Development + +First you need: + +- node & npm + +And install dependencies: + +```bash +npm install +``` + +Then spin up livereloading dev server under http://localhost:1337 + +```bash +gulp +``` + +Or only compile new dist files: + +```bash +gulp build +``` + +# The MIT License (MIT) + +Copyright (c) 2015 Matthias Kretschmann + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/dist/appstorebadges.min.css b/dist/appstorebadges.min.css new file mode 100644 index 0000000..8a7df35 --- /dev/null +++ b/dist/appstorebadges.min.css @@ -0,0 +1,9 @@ +/** +** ------------------------------------------ +** +** appstorebadges v1.0.0 +** https://kremalicious.com +** MIT +** +** ------------------------------------------ +**//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}.badge,body{box-sizing:border-box}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}body,html{background:#f4b350;width:100%;height:100%}body{margin:0;padding:0 10%;max-width:100%;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;background-image:radial-gradient(ellipse at center,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 80%);font-family:Avenir,Trebuchet,'Trebuchet MS',sans-serif}body,body a{color:#c67d0c}.stage>h1{margin-top:-5%;margin-bottom:5%;font-size:7vw;font-weight:400;color:inherit}@media (min-width:50em){.stage>h1{font-size:5vw}}.stage>p:last-child{margin-top:5%}.badge{display:inline-block;text-align:left;white-space:nowrap;text-decoration:none;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #ddd;padding:4px 8px;margin:5px auto;border-radius:4px;color:#fff;fill:#fff;background:#000;line-height:1em;min-width:190px;height:45px;transition:.2s ease-out;box-shadow:0 1px 2px rgba(0,0,0,.2);-webkit-tap-highlight-color:transparent;font-family:system,-apple-system,'.SFNSDisplay-Regular','Helvetica Neue','Lucida Grande',Arial,sans-serif;font-weight:500;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga','kern'}.badge:focus,.badge:hover{background:#111;color:#fff;fill:#fff;border-color:#fff;-webkit-transform:scale(1.01) translate3d(0,-1px,0);transform:scale(1.01) translate3d(0,-1px,0);box-shadow:0 4px 8px rgba(0,0,0,.2)}.badge:active{outline:0;background:#353535;transition:none}.badge__icon,.badge__storename,.badge__text{display:inline-block;vertical-align:top}.badge__icon{width:30px;height:30px;margin-right:5px;margin-top:2px}.badge__icon--amazon{-webkit-transform:scale(.85);-ms-transform:scale(.85);transform:scale(.85)}.badge__text{letter-spacing:.08em;margin-top:-.1em;font-size:10px}.badge__storename{display:block;margin-left:38px;margin-top:-17px;font-size:22px;letter-spacing:-.05em}.badge--small{padding:2px 8px;min-width:118.75px;height:24px;border-radius:3px}.badge--small .badge__icon{width:1pc;height:1pc;margin:1px 2px 0 0}.badge--small .badge__text{display:none}.badge--small .badge__storename{font-size:9pt;display:inline-block;margin:0 0 2px;vertical-align:middle}.badge--tiny{padding:3px;width:22px;height:22px;min-width:0;border-radius:3px}.badge--tiny .badge__icon{width:14px;height:14px;margin:0}.badge--tiny .badge__storename,.badge--tiny .badge__text{display:none} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..8e8b0e0 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,217 @@ + + + + CSS App Store Badges + + + + + +

CSS App Store Badges

+ +

+ + + Download on the + App Store + + + + Download on the + Mac App Store + + + + Get it on + Google Play + + + + Download from + Windows Store + + + + Available at + Amazon +

+ +

+ + + Download on the + App Store + + + + Download on the + Mac App Store + + + + Get it on + Google Play + + + + Download from + Windows Store + + + + Available at + Amazon +

+ +

+ + + Download on the + App Store + + + + Download on the + Mac App Store + + + + Get it on + Google Play + + + + Download from + Windows Store + + + + Available at + Amazon +

+ +

+ Just some tinkering by @kremalicious +

+ + + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..0f0e8f9 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,114 @@ +'use strict'; + +// load plugins +var $ = require('gulp-load-plugins')(); + +// manually require modules that won"t get picked up by gulp-load-plugins +var gulp = require('gulp'), + del = require('del'), + pkg = require('./package.json'), + assemble = require('assemble'); + +// handle errors +var onError = function(error) { + $.util.log($.util.colors.red('You fucked up:', error.message, 'on line' , error.lineNumber)); + this.emit('end'); +} + + +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +// Config +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +var src = 'src/', + dist = 'dist/'; + + +// code banner +var banner = [ + '/**', + '**', + '** ------------------------------------------', + '**', + '** <%= pkg.name %> v<%= pkg.version %>', + '** <%= pkg.homepage %>', + '** <%= pkg.license %> ', + '**', + '** ------------------------------------------', + '**', + '**/' +].join('\n'); + + +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +// Tasks +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +// +// Delete build artifacts +// +gulp.task('clean', function() { + return del(dist + '**/*'); +}); + + +// +// HTML +// +gulp.task('html', function() { + assemble.partials(src + 'partials/*.*'); + + return gulp.src(src + '*.hbs') + .pipe($.assemble(assemble)) + .pipe($.extname()) + .pipe(gulp.dest(dist)) + .pipe($.connect.reload()); +}); + + +// +// Styles +// +gulp.task('css', function() { + return gulp.src(src + 'styl/appstorebadges.styl') + .pipe($.stylus({ 'include css': true })).on('error', onError) + .pipe($.autoprefixer({ browsers: 'last 2 versions, ie 9' })) + .pipe($.cssmin()) + .pipe($.header(banner, { pkg: pkg })) + .pipe($.rename({ suffix: '.min' })) + .pipe(gulp.dest(dist)) + .pipe($.connect.reload()); +}); + + +// +// Dev Server +// +gulp.task('connect', function() { + return $.connect.server({ + root: [dist], + livereload: true, + port: 1337 + }); +}); + + +// +// Watch task +// +gulp.task('watch', function() { + gulp.watch([src + '**/*.styl'], ['css']); + gulp.watch([src + '**/*.{hbs,html}'], ['html']); +}); + + +// +// Dev Server +// +gulp.task('default', ['css', 'html', 'watch', 'connect']); + + +// +// Full build +// +gulp.task('build', ['css', 'html']); diff --git a/package.json b/package.json new file mode 100644 index 0000000..2a055bb --- /dev/null +++ b/package.json @@ -0,0 +1,38 @@ +{ + "name": "appstorebadges", + "version": "1.0.0", + "author": { + "name": "Matthias Kretschmann", + "email": "m@kretschmann.io" + }, + "description": "Pure CSS/SVG based App Store badges", + "homepage": "https://kremalicious.com", + "license": "MIT", + "main": "gulpfile.js", + "dependencies": { + "assemble": "assemble/assemble#v0.6.0" + }, + "devDependencies": { + "del": ">=1.2.0", + "gulp": ">=3.8.0", + "gulp-assemble": ">=0.3.2", + "gulp-autoprefixer": ">=2.3.0", + "gulp-connect": ">=2.0.5", + "gulp-cssmin": ">=0.1.7", + "gulp-extname": ">=0.2.0", + "gulp-header": "^1.7.1", + "gulp-htmlmin": ">=1.1.4", + "gulp-load-plugins": ">=0.10.0", + "gulp-rename": "^1.2.2", + "gulp-stylus": ">=2.0.6", + "gulp-util": ">=3.0.6", + "normalize.css": "^3.0.3" + }, + "engines": { + "node": ">=0.10.29" + }, + "repository": { + "type": "git", + "url": "https://github.com/kremalicious/appstorebadges" + } +} diff --git a/src/index.hbs b/src/index.hbs new file mode 100644 index 0000000..1085c1a --- /dev/null +++ b/src/index.hbs @@ -0,0 +1,60 @@ + + + + + + CSS App Store Badges + + + + + + + + + + +

CSS App Store Badges

+ +

+ {{> badge-ios}} + + {{> badge-mac}} + + {{> badge-android}} + + {{> badge-windows}} + + {{> badge-amazon}} +

+ +

+ {{> badge-ios class="badge--small"}} + + {{> badge-mac class="badge--small"}} + + {{> badge-android class="badge--small"}} + + {{> badge-windows class="badge--small"}} + + {{> badge-amazon class="badge--small"}} +

+ +

+ {{> badge-ios class="badge--tiny"}} + + {{> badge-android class="badge--tiny"}} + + {{> badge-windows class="badge--tiny"}} + + {{> badge-amazon class="badge--tiny"}} +

+ +

+ Just some tinkering by @kremalicious +

+ + + diff --git a/src/partials/badge-amazon.html b/src/partials/badge-amazon.html new file mode 100644 index 0000000..650f8b3 --- /dev/null +++ b/src/partials/badge-amazon.html @@ -0,0 +1,9 @@ + + + Available at + Amazon + diff --git a/src/partials/badge-android.html b/src/partials/badge-android.html new file mode 100644 index 0000000..b619d8c --- /dev/null +++ b/src/partials/badge-android.html @@ -0,0 +1,13 @@ + + + Get it on + Google Play + diff --git a/src/partials/badge-ios.html b/src/partials/badge-ios.html new file mode 100644 index 0000000..a6158ac --- /dev/null +++ b/src/partials/badge-ios.html @@ -0,0 +1,16 @@ + + + Download on the + App Store + diff --git a/src/partials/badge-mac.html b/src/partials/badge-mac.html new file mode 100644 index 0000000..66a3337 --- /dev/null +++ b/src/partials/badge-mac.html @@ -0,0 +1,16 @@ + + + Download on the + Mac App Store + diff --git a/src/partials/badge-windows.html b/src/partials/badge-windows.html new file mode 100644 index 0000000..faf36c0 --- /dev/null +++ b/src/partials/badge-windows.html @@ -0,0 +1,10 @@ + + + Download from + Windows Store + diff --git a/src/styl/_badges.styl b/src/styl/_badges.styl new file mode 100644 index 0000000..946ba8a --- /dev/null +++ b/src/styl/_badges.styl @@ -0,0 +1,128 @@ + +// +// Badge Base +// +.badge + box-sizing: border-box + display: inline-block + text-align: left + white-space: nowrap + text-decoration: none + vertical-align: middle + touch-action: manipulation + cursor: pointer + user-select: none + border: 1px solid $badge-border + padding: 4px 8px + margin: 5px auto + border-radius: 4px + color: $badge-color + fill: $badge-color + background: $badge-background + line-height: 1em + // + // no specific width so badge can grow + // for localization + // + min-width: $badge-width + height: 45px + transition: .2s ease-out + box-shadow: 0 1px 2px rgba($badge-background, 20%) + -webkit-tap-highlight-color: rgba(0,0,0,0) + font-family: $badge-font + font-weight: 500 + text-rendering: optimizeLegibility + // + // Controversial! But prevents text flickering in + // Safari/Firefox when animations are running + // + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + -moz-font-feature-settings: 'liga', 'kern' + + &:hover + &:focus + background: $badge-background-hover + color: $badge-color-hover + fill: $badge-color-hover + border-color: $badge-border-hover + transform: scale(1.01) translate3d(0,-1px,0) + box-shadow: 0 4px 8px rgba($badge-background, 20%) + + &:active + outline: 0 + background: lighten($badge-background-hover, 15%) + transition: none + + +// +// badge Items +// +.badge__icon +.badge__text +.badge__storename + display: inline-block + vertical-align: top + +.badge__icon + width: 30px + height: 30px + margin-right: 5px + margin-top: 2px + +.badge__icon--amazon + // tweak visual weight in all badge variants + // without affecting layout + transform: scale(.85) + +.badge__text + letter-spacing: .08em + margin-top: -.1em + font-size: 10px + +.badge__storename + display: block + margin-left: 38px + margin-top: -17px + font-size: 22px + letter-spacing: -.05em + + +// +// Size modifiers +// +.badge--small + padding: 2px 8px + min-width: ($badge-width / 1.6) + height: 24px + border-radius: 3px + + .badge__icon + width: 16px + height: 16px + margin: 1px 2px 0 0 + + .badge__text + display: none + + .badge__storename + font-size: 12px + display: inline-block + margin: 0 0 2px 0 + vertical-align: middle + +.badge--tiny + padding: 3px + width: 22px + height: 22px + min-width: 0 + border-radius: 3px + + .badge__icon + width: 14px + height: 14px + margin: 0 + + .badge__text + .badge__storename + display: none diff --git a/src/styl/_stage.styl b/src/styl/_stage.styl new file mode 100644 index 0000000..b795eb8 --- /dev/null +++ b/src/styl/_stage.styl @@ -0,0 +1,38 @@ +// +// Just the stage setup +// stormtrooper-move-along.gif +// +html +body + background: #F4B350 + width: 100% + height: 100% + +body + box-sizing: border-box + padding: 0 10% + max-width: 100% + display: flex + align-items: center + justify-content: center + text-align: center + background-image: radial-gradient(ellipse at center, rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 80%) + font-family: Avenir, Trebuchet, 'Trebuchet MS', sans-serif + + & + a + color: darken(#F4B350, 35%) + +.stage + > h1 + margin-top: -5% + margin-bottom: 5% + font-size: 7vw + font-weight: 400 + color: inherit + + @media (min-width: 50em) + font-size: 5vw + + > p:last-child + margin-top: 5% diff --git a/src/styl/_variables.styl b/src/styl/_variables.styl new file mode 100644 index 0000000..3553978 --- /dev/null +++ b/src/styl/_variables.styl @@ -0,0 +1,16 @@ +// +// Button Variables +// +$badge-background = #000 +$badge-color = #fff +$badge-border = #ddd + +$badge-background-hover = #111 +$badge-color-hover = #fff +$badge-border-hover = #fff + +$badge-width = 190px // defined as min-width + +// San Francisco all the things +// http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/ +$badge-font = system, -apple-system, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', 'Arial', sans-serif diff --git a/src/styl/appstorebadges.styl b/src/styl/appstorebadges.styl new file mode 100644 index 0000000..e8d8de4 --- /dev/null +++ b/src/styl/appstorebadges.styl @@ -0,0 +1,7 @@ + +// Normalize all the things +@import '../../node_modules/normalize.css/normalize.css' + +@import '_variables' +@import '_stage' +@import '_badges'