├── src ├── favicons │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon-96x96.png ├── styles │ ├── layouts │ │ ├── _styleguide.scss │ │ ├── _global.scss │ │ └── _learn.scss │ ├── global │ │ ├── _color.scss │ │ ├── _grid.scss │ │ └── _type.scss │ ├── main.scss │ ├── components │ │ ├── _buttons.scss │ │ └── _forms.scss │ └── vendor │ │ ├── _includemedia.scss │ │ └── _normalize.scss ├── scripts │ └── index.js └── templates │ ├── layouts │ └── default.jade │ └── views │ ├── index.jade │ └── styles.jade ├── .gitignore ├── tasks ├── default.js ├── build.js ├── watch.js ├── favicon.js ├── images.js ├── serve.js ├── js-lint.js ├── templates.js ├── styles.js ├── scss-lint.js └── bundle.js ├── readme.md ├── gulpfile.js ├── package.json └── .scss-lint.yml /src/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetary/thisismarkdown/HEAD/src/favicons/favicon.ico -------------------------------------------------------------------------------- /src/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetary/thisismarkdown/HEAD/src/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /src/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetary/thisismarkdown/HEAD/src/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /src/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetary/thisismarkdown/HEAD/src/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # built project folder 2 | build 3 | 4 | # node libraries 5 | node_modules 6 | 7 | # osx noise 8 | .DS_Store 9 | profile -------------------------------------------------------------------------------- /tasks/default.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | gulp.task( 'default', [ 3 | 'build', 4 | 'watch', 5 | 'serve' 6 | ] ); 7 | }; 8 | -------------------------------------------------------------------------------- /src/styles/layouts/_styleguide.scss: -------------------------------------------------------------------------------- 1 | .sg--component { 2 | margin: 1rem 0; 3 | } 4 | 5 | .sg--component-label { 6 | font-family: $sans; 7 | font-size: $scale-small; 8 | color: $gray; 9 | display: block; 10 | } 11 | -------------------------------------------------------------------------------- /tasks/build.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | gulp.task( 'build', [ 3 | 'bundle:dev', 4 | 'templates', 5 | 'styles', 6 | 'images', 7 | 'favicon' 8 | ] ); 9 | }; 10 | -------------------------------------------------------------------------------- /src/styles/layouts/_global.scss: -------------------------------------------------------------------------------- 1 | /* apply a natural box layout model to all elements, but allowing components to change */ 2 | html { 3 | box-sizing: border-box; 4 | } 5 | 6 | *, 7 | *:before, 8 | *:after { 9 | box-sizing: inherit; 10 | } 11 | -------------------------------------------------------------------------------- /tasks/watch.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | gulp.task( 'watch', [ 3 | 'watch:templates', 4 | 'watch:styles', 5 | 'watch:js-lint', 6 | 'watch:bundle', 7 | 'watch:images' 8 | ] ); 9 | }; 10 | -------------------------------------------------------------------------------- /tasks/favicon.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | gulp.task( 'favicon', function() { 3 | return gulp.src( [ 'src/favicons/**' ] ) 4 | .pipe( plugins.newer( 'build' ) ) 5 | .pipe( gulp.dest( 'build' ) ); 6 | } ); 7 | }; 8 | -------------------------------------------------------------------------------- /tasks/images.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | // optimize images 3 | gulp.task( 'images', function() { 4 | return gulp.src( [ 'src/img/**' ] ) 5 | .pipe( plugins.newer( 'build/img' ) ) 6 | .pipe( plugins.image() ) 7 | .pipe( gulp.dest( 'build/img' ) ); 8 | } ); 9 | 10 | gulp.task( 'watch:images', function() { 11 | gulp.watch( 'src/img/**/*', [ 'images' ] ); 12 | } ); 13 | }; 14 | -------------------------------------------------------------------------------- /tasks/serve.js: -------------------------------------------------------------------------------- 1 | var extend = require( 'util' )._extend, 2 | http = require( 'http' ), 3 | ecstatic = require( 'ecstatic' ); 4 | 5 | module.exports = function( gulp, plugins, path ) { 6 | gulp.task( 'serve', function() { 7 | var port = 4900; 8 | http.createServer( ecstatic( { 9 | root: 'build', 10 | cache: 0 11 | } ) ).listen( port ); 12 | 13 | plugins.util.log( plugins.util.colors.blue( 'Server started, listening on ' + port ) ); 14 | } ); 15 | }; 16 | -------------------------------------------------------------------------------- /tasks/js-lint.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | gulp.task( 'js-lint', function() { 3 | gulp.src( [ 4 | 'controllers/**/*.js', 5 | 'public/**/*.js', 6 | 'lib/**/*.js', 7 | 'models/**/*.js' 8 | ] ).pipe( plugins.jshint() ); 9 | } ); 10 | 11 | gulp.task( 'watch:js-lint', function() { 12 | gulp.watch( [ 13 | 'controllers/**/*.js', 14 | 'public/**/*.js', 15 | 'lib/**/*.js', 16 | 'models/**/*.js' 17 | ], [ 'js-lint' ] ); 18 | } ); 19 | }; 20 | -------------------------------------------------------------------------------- /src/styles/global/_color.scss: -------------------------------------------------------------------------------- 1 | // grays 2 | $black: #111; 3 | $white: #fff; 4 | 5 | $gray-darker: #464646; 6 | $gray-dark: #707070; 7 | $gray: #959595; 8 | $gray-light: #c2c2c2; 9 | $gray-lighter: #e1e1e1; 10 | 11 | // colors 12 | $navy: #001f3f; 13 | $blue: #0074d9; 14 | $aqua: #7fdbff; 15 | $teal: #39cccc; 16 | $olive: #3d9970; 17 | $green: #2ecc40; 18 | $lime: #01ff70; 19 | $yellow: #ffdc00; 20 | $orange: #ff851b; 21 | $red: #ff4136; 22 | $fuchsia: #f012be; 23 | $purple: #b10dc9; 24 | -------------------------------------------------------------------------------- /tasks/templates.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | var errorHandler = function( err ) { 3 | plugins.notify.onError( { 4 | message: "<" + "%= error.message %" + ">" 5 | } ).apply( this, arguments ); 6 | 7 | this.emit( 'end' ); 8 | }; 9 | 10 | // compile jade files 11 | gulp.task( 'templates', function() { 12 | gulp.src( [ 'src/templates/views/**/*.jade', '!src/templates/views/**/_*.jade' ] ) 13 | .pipe( plugins.jade( { 14 | basedir: 'src/templates' 15 | } ) ) 16 | .on( 'error', errorHandler ) 17 | .pipe( gulp.dest( 'build' ) ); 18 | } ); 19 | 20 | gulp.task( 'watch:templates', function() { 21 | gulp.watch( 'src/templates/**/*.jade', [ 'templates' ] ); 22 | } ); 23 | }; 24 | -------------------------------------------------------------------------------- /src/styles/main.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ___ _ ____ 4 | / | (_)____/ __/________ _____ ___ ___ 5 | / /| | / / ___/ /_/ ___/ __ `/ __ `__ \/ _ \ 6 | / ___ |/ / / / __/ / / /_/ / / / / / / __/ 7 | /_/ |_/_/_/ /_/ /_/ \__,_/_/ /_/ /_/\___/ 8 | 9 | 10 | Bootstrap kit v0.2 - January 26 2015 11 | 12 | */ 13 | 14 | // import any vendor files 15 | @import "vendor/normalize"; 16 | @import "vendor/includemedia"; 17 | 18 | // project-wide styles - styles single elements 19 | @import "global/color"; 20 | @import "global/type"; 21 | @import "global/grid"; 22 | 23 | // component styles - styles groups of elements 24 | @import "components/forms"; 25 | @import "components/buttons"; 26 | 27 | // page layouts - styles groups of components 28 | @import "layouts/global"; 29 | @import "layouts/styleguide"; 30 | @import "layouts/learn"; 31 | -------------------------------------------------------------------------------- /tasks/styles.js: -------------------------------------------------------------------------------- 1 | 2 | //this will handle errors for us 3 | var handleError = function( err ) { 4 | console.log( err.toString() ); 5 | this.emit( 'end' ); 6 | }; 7 | 8 | module.exports = function( gulp, plugins ) { 9 | // concat, minify css 10 | gulp.task( 'styles', function() { 11 | gulp.src(['./src/styles/**/*.scss']) 12 | .pipe( plugins.sass( { 13 | sourcemap: true, 14 | sourcemapPath: 'src/styles' 15 | } ) ) 16 | .on( 'error', handleError ) 17 | .pipe( plugins.csso() ) 18 | .pipe( plugins.autoprefixer() ) 19 | .pipe( gulp.dest( './build/css' ) ) 20 | .pipe( plugins.notify( { message: 'scss compilation complete', onLast: true } ) ); 21 | } ); 22 | 23 | gulp.task( 'watch:styles', function() { 24 | gulp.watch( 'src/styles/**/*.scss', [ 'scss-lint', 'styles' ] ); 25 | } ); 26 | }; -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # This is Markdown. 2 | ## A reference made with love by [Planetary](http://planetary.io) using [Airframe](http://github.com/planetarycorp/airframe). 3 | 4 | **Dependencies:** 5 | - [NodeJS](http://nodejs.org/) 6 | - [Gulp](http://gulpjs.com/) 7 | 8 | ### Getting Started 9 | 1. Run `npm install` to install all NodeJS packages 10 | 2. Run `gulp build` to build the project. 11 | 12 | ### Developing 13 | 1. Run `gulp` to continuously watch and re-build the project 14 | 15 | ### Installing Sublime Text Helpers 16 | 17 | #### SCSS Linting 18 | 19 | 1. Open Sublime Text 3, type `Cmd+Shift+P` to open the prompt and type to select "Package Control: Install Package" 20 | 2. Type to select "SublimeLinter", wait until that finishes installing. 21 | 3. Open the "Install Package" prompt from step 1 again and type to select "SublimeLinter-contrib-scss-lint", wait until that finishes installing. 22 | 4. From the command line, run `sudo gem install scss-lint` 23 | 4. Restart Sublime Text 3 and you should now see linting issues in the gutter of the editor. 24 | -------------------------------------------------------------------------------- /tasks/scss-lint.js: -------------------------------------------------------------------------------- 1 | module.exports = function( gulp, plugins ) { 2 | var colors = plugins.util.colors; 3 | 4 | var linterErrors = function( file ) { 5 | if( !file.scsslint.success ) { 6 | plugins.util.log(colors.red(file.scsslint.issues.length + ' issues found in ' + file.path)); 7 | 8 | file.scsslint.issues.forEach(function (issue) { 9 | var severity = issue.severity === 'warning' ? 'W' : 'E'; 10 | var logMsg = colors.cyan(file.path) + ':' + colors.magenta(issue.line) + ' [' + severity + '] ' + issue.reason; 11 | 12 | plugins.util.log(logMsg); 13 | }); 14 | } else { 15 | plugins.util.log(colors.green('Linting passed for ' + file.path)); 16 | } 17 | }; 18 | 19 | gulp.task( 'scss-lint', function() { 20 | gulp.src( [ 'src/styles/**/*.scss', '!src/styles/vendor/**/*' ] ) 21 | .pipe( plugins.scssLint( { 22 | 'config': '.scss-lint.yml', 23 | 'customReport': linterErrors 24 | } ) ); 25 | } ); 26 | }; -------------------------------------------------------------------------------- /src/styles/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | font-family: $sans; 3 | padding: 0.3em 1em 0.2em; 4 | background: $gray-lighter; 5 | color: $black; 6 | border: 1px solid; 7 | border-color: darken($gray-lighter, 5%); 8 | border-radius: $corner-radius; 9 | text-decoration: none; 10 | display: inline-block; 11 | 12 | &:hover { 13 | cursor: pointer; 14 | background: lighten($gray-lighter, 2.5%); 15 | } 16 | 17 | + .btn { 18 | margin-left: 1em; 19 | } 20 | } 21 | 22 | .btn--primary { 23 | background: $blue; 24 | border-color: darken($blue, 5%); 25 | color: $white; 26 | 27 | &:hover { 28 | background: lighten($blue, 2.5%); 29 | } 30 | } 31 | 32 | .btn--warning { 33 | background: $red; 34 | border-color: darken($red, 5%); 35 | color: $white; 36 | 37 | &:hover { 38 | background: lighten($red, 2.5%); 39 | } 40 | } 41 | 42 | .btn--action { 43 | background: $green; 44 | border-color: darken($green, 5%); 45 | color: $white; 46 | 47 | &:hover { 48 | background: lighten($green, 2.5%); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var path = require( 'path' ), 2 | gulp = require( 'gulp' ), 3 | loadPlugins = require( 'gulp-load-plugins' ), 4 | includeAll = require( 'include-all' ); 5 | 6 | var plugins = loadPlugins( { 7 | pattern: [ 'gulp-*', 'merge-*', 'run-*', 'main-*' ], // the glob to search for 8 | replaceString: /\bgulp[\-.]|run[\-.]|merge[\-.]|main[\-.]/, // remove from the name of the module when adding it to the context 9 | camelizePluginName: true, 10 | lazy: true // lazy-load plugins on demand 11 | } ); 12 | 13 | /** 14 | * Loads Gulp configuration modules from the specified 15 | * relative path. These modules should export a function 16 | * that, when run, should either load/configure or register 17 | * a Gulp task. 18 | */ 19 | var loadTasks = function( relPath ) { 20 | return includeAll( { 21 | dirname: path.resolve( __dirname, relPath ), 22 | filter: /(.+)\.js$/ 23 | } ) || {}; 24 | }; 25 | 26 | var setupTasks = function( tasks ) { 27 | for( var taskName in tasks ) { 28 | if( tasks.hasOwnProperty( taskName ) ) { 29 | tasks[ taskName ]( gulp, plugins, path ); 30 | } 31 | } 32 | }; 33 | 34 | var tasks = loadTasks( './tasks' ); 35 | setupTasks( tasks ); 36 | -------------------------------------------------------------------------------- /src/styles/components/_forms.scss: -------------------------------------------------------------------------------- 1 | /* Global styles 2 | ------------- */ 3 | 4 | // Normalize font size, set block defaults 5 | input, 6 | textarea, 7 | select, 8 | button, 9 | label { 10 | display: block; 11 | font-family: $sans; 12 | font-size: $scale-normal; 13 | line-height: $base-line-height; 14 | margin-bottom: 1em; 15 | } 16 | 17 | 18 | /* Individual element styles 19 | ------------------------- */ 20 | 21 | label { 22 | margin-bottom: 0.5em; 23 | } 24 | 25 | [type="text"], 26 | [type="email"], 27 | [type="password"], 28 | textarea { 29 | padding: 0.25em 0.5em; 30 | background: $white; 31 | border: 1px solid $gray-light; 32 | min-width: 16em; 33 | border-radius: $corner-radius; 34 | } 35 | 36 | [type="checkbox"], 37 | [type="radio"] { 38 | display: inline-block; 39 | } 40 | 41 | .form--radio + .form--radio, 42 | .form--checkbox + .form--checkbox { 43 | // group similar elements 44 | margin-top: -0.5em; 45 | } 46 | 47 | select { 48 | //ed. note: select boxes are weird. 49 | outline: none; 50 | background: $white; 51 | color: $black; 52 | border: 1px solid $gray-light; 53 | padding: 0.25em 0.5em; 54 | height: 2em; 55 | border-radius: $corner-radius; 56 | min-width: 16em; 57 | } 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "thisismarkdown", 3 | "description": "", 4 | "version": "0.1.0", 5 | "homepage": "https://github.com/endtwist/thisismarkdown", 6 | "author": { 7 | "name": "Planetary", 8 | "email": "josh@planetary.io" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/endtwist/thisismarkdown.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/endtwist/thisismarkdown/issues" 16 | }, 17 | "engines": { 18 | "node": ">= 0.10.26", 19 | "npm": ">=2.1.18" 20 | }, 21 | "scripts": { 22 | "test": "echo \"No tests\"" 23 | }, 24 | "dependencies": { 25 | "brfs": "^1.4.0", 26 | "browserify": "^9.0.3", 27 | "bulkify": "^1.1.1", 28 | "ecstatic": "^0.7.0", 29 | "gulp": "~3.8.11", 30 | "gulp-autoprefixer": "~2.1.0", 31 | "gulp-csso": "~1.0.0", 32 | "gulp-image": "~0.5.7", 33 | "gulp-jade": "^1.0.0", 34 | "gulp-load-plugins": "^0.9.0", 35 | "gulp-newer": "^0.5.0", 36 | "gulp-notify": "^2.2.0", 37 | "gulp-sass": "~1.3.3", 38 | "gulp-scss-lint": "~0.1.10", 39 | "gulp-sourcemaps": "^1.5.1", 40 | "gulp-util": "~3.0.4", 41 | "include-all": "^0.1.6", 42 | "marked": "^0.3.3", 43 | "vinyl-buffer": "^1.0.0", 44 | "vinyl-source-stream": "^1.1.0", 45 | "watchify": "^2.5.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/scripts/index.js: -------------------------------------------------------------------------------- 1 | var marked = require( 'marked' ); 2 | 3 | var Parser = function( input ) { 4 | var name = input.dataset.name, 5 | output = document.querySelector( '[data-type="output"][data-name="' + name + '"]' ), 6 | style = window.getComputedStyle( input, null ), 7 | heightOffset = parseFloat( style.paddingTop ) + parseFloat( style.paddingBottom ); 8 | 9 | var markdownify = function() { 10 | output.innerHTML = marked( input.value ); 11 | }; 12 | 13 | var resize = function() { 14 | input.style.height = 'auto'; 15 | 16 | var toHeight = input.scrollHeight - heightOffset; 17 | input.style.height = toHeight + 'px'; 18 | }; 19 | 20 | if( !( this instanceof Parser ) ) { 21 | markdownify(); 22 | return new Parser( input ); 23 | } 24 | 25 | this.init = function() { 26 | input.addEventListener( 'keydown', markdownify ); 27 | input.addEventListener( 'keyup', markdownify ); 28 | input.addEventListener( 'input', resize ); 29 | input.addEventListener( 'keyup', resize ); 30 | 31 | resize(); 32 | }; 33 | 34 | this.init(); 35 | }; 36 | 37 | document.addEventListener( 'DOMContentLoaded', function( event ) { 38 | Array.prototype.forEach.call( document.querySelectorAll( 'textarea' ), Parser ); 39 | } ); 40 | 41 | module.exports = {}; 42 | -------------------------------------------------------------------------------- /src/styles/global/_grid.scss: -------------------------------------------------------------------------------- 1 | /* AGS - Airframe grid system 2 | * v0.1 */ 3 | 4 | // Grid configuration 5 | $grid-width: 70rem; 6 | $columns: 12; 7 | $gutter: 2%; 8 | 9 | $row-spacing: 1rem; 10 | $corner-radius: 4px; 11 | 12 | // The magic happens here 13 | @function cw($span-num, $total-num) { 14 | $ratio: ($total-num / $span-num); 15 | @return ((100% / ($ratio)) - (($ratio) - 1) * ($gutter / ($ratio))); 16 | } 17 | 18 | @mixin row { 19 | margin-bottom: $row-spacing; 20 | 21 | &:after { 22 | content: ""; 23 | display: table; 24 | clear: both; 25 | } 26 | } 27 | 28 | @mixin span($span) { 29 | float: left; 30 | width: cw($span, $columns); 31 | margin-right: $gutter; 32 | } 33 | 34 | @mixin last { 35 | float: right; 36 | margin-right: 0; 37 | } 38 | 39 | @mixin visible-grid { 40 | background: transparentize($blue, 0.9); 41 | } 42 | 43 | // Helper classes 44 | 45 | .g--container { 46 | margin: 0 auto; 47 | width: $grid-width; 48 | } 49 | 50 | .g--row { 51 | @include row; 52 | } 53 | 54 | .g--visible-grid { 55 | @include visible-grid; 56 | } 57 | 58 | .g--full { 59 | @include span(12); 60 | } 61 | 62 | .g--two-third { 63 | @include span(8); 64 | } 65 | 66 | .g--half { 67 | @include span(6); 68 | } 69 | 70 | .g--third { 71 | @include span(4); 72 | } 73 | 74 | .g--quarter { 75 | @include span(3); 76 | } 77 | 78 | .g--last { 79 | @include last; 80 | } 81 | 82 | -------------------------------------------------------------------------------- /src/templates/layouts/default.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | meta(charset="utf-8") 5 | meta(name="description", content="") 6 | meta(name="HandheldFriendly", content="True") 7 | meta(name="MobileOptimized", content="320") 8 | meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1") 9 | meta(http-equiv="cleartype", content="on") 10 | title 11 | block title 12 | | This is Markdown. 13 | link(rel="stylesheet", href="/css/main.css") 14 | link(rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96") 15 | link(rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32") 16 | link(rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16") 17 | block head 18 | //- Additional head content (scripts, styles). 19 | 20 | body 21 | block content 22 | 23 | script. 24 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 25 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 26 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 27 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 28 | 29 | ga('create', 'UA-44627894-4', 'auto'); 30 | ga('send', 'pageview'); 31 | script(src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js") 32 | script(src="/js/bundle.js") 33 | block scripts 34 | //- Additional scripts. -------------------------------------------------------------------------------- /tasks/bundle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Compile JavaScript with Browserify. 3 | * 4 | * --------------------------------------------------------------- 5 | * 6 | * Compiles the js bundle from `src/js` into a single file and places 7 | * them into `build/js` directory. 8 | * 9 | */ 10 | var source = require( 'vinyl-source-stream' ); 11 | var buffer = require( 'vinyl-buffer' ); 12 | var watchify = require( 'watchify' ); 13 | var browserify = require( 'browserify' ); 14 | 15 | module.exports = function( gulp, plugins, path ) { 16 | var errorHandler = function( err ) { 17 | plugins.notify.onError( { 18 | message: "<" + "%= error.message %" + ">" 19 | } ).apply( this, arguments ); 20 | 21 | this.emit( 'end' ); 22 | }; 23 | 24 | var entryPoints = [ './src/scripts/index.js' ]; 25 | 26 | var args = watchify.args; 27 | args.extensions = [ '.jsx' ]; 28 | args.debug = true; 29 | args.fullPaths = false; 30 | args.insertGlobals = true; 31 | 32 | var bundler = browserify( entryPoints, args ); 33 | 34 | // add any other browserify options or transforms here 35 | bundler.transform( 'brfs' ); 36 | bundler.transform( 'bulkify' ); 37 | 38 | gulp.task( 'bundle:dev', bundle ); // so you can run `gulp bundle:dev` to build the file 39 | 40 | gulp.task( 'watch:bundle', function() { 41 | var watcher = watchify( bundler ); 42 | watcher.on( 'update', bundle ); // on any dep update, runs the bundler 43 | bundle(); 44 | } ); 45 | 46 | function bundle() { 47 | return bundler.bundle() 48 | // log errors if they happen 49 | .on( 'error', errorHandler ) 50 | .pipe( source( 'bundle.js' ) ) 51 | // optional, remove if you dont want sourcemaps 52 | .pipe( buffer() ) 53 | .pipe( plugins.sourcemaps.init( { loadMaps: true } ) ) // loads map from browserify file 54 | .pipe( plugins.sourcemaps.write( './' ) ) // writes .map file 55 | // 56 | .pipe( gulp.dest( './build/js' ) ) 57 | .pipe( plugins.notify( { message: 'browserify bundler task complete', onLast: true } ) ); 58 | } 59 | }; 60 | -------------------------------------------------------------------------------- /src/styles/global/_type.scss: -------------------------------------------------------------------------------- 1 | // base font size 2 | $base-font-size: 16px; 3 | // base line height 4 | $base-line-height: 1.6; 5 | 6 | // typefaces 7 | $sans: "canada-type-gibson", Helvetica, sans-serif; 8 | $serif: Georgia, serif; 9 | $mono: "anonymous-pro", Menlo, Courier, monospace; 10 | 11 | .type--sans { 12 | font-family: $sans; 13 | } 14 | 15 | .type--serif { 16 | font-family: $serif; 17 | } 18 | 19 | .type--mono { 20 | font-family: $mono; 21 | } 22 | 23 | // modular scale for font sizes 24 | $ms-base: 1.2; 25 | 26 | @function ms($i) { 27 | @if ($i > 0) { 28 | @return (1rem * $i * $ms-base); 29 | } @else if ($i < 0) { 30 | @return (1rem / (abs($i) * $ms-base)); 31 | } @else { 32 | @return 1rem; 33 | } 34 | 35 | } 36 | 37 | $scale-huge: ms(3); 38 | $scale-xlarge: ms(2); 39 | $scale-large: ms(1); 40 | $scale-normal: ms(0); 41 | $scale-small: ms(-1); 42 | $scale-xsmall: ms(-2); 43 | $scale-tiny: ms(-3); 44 | 45 | 46 | 47 | // global type baselines 48 | body, 49 | html { 50 | font-size: $base-font-size; 51 | line-height: $base-line-height; 52 | font-family: $serif; 53 | color: $black; 54 | -webkit-font-smoothing: antialiased; 55 | text-rendering: optimizeLegibility; 56 | font-feature-settings: "kern"; 57 | font-kerning: normal; 58 | } 59 | 60 | // bold 61 | strong { 62 | font-weight: bold; 63 | } 64 | 65 | // italics 66 | em { 67 | font-style: italic; 68 | } 69 | 70 | // headers 71 | h1, 72 | h2, 73 | h3, 74 | h4 { 75 | font-family: $sans; 76 | font-weight: 700; 77 | margin-bottom: 1rem; 78 | } 79 | 80 | h1 { 81 | font-size: $scale-huge; 82 | line-height: 1em; 83 | } 84 | 85 | h2 { 86 | font-size: $scale-xlarge; 87 | line-height: 1.5em; 88 | } 89 | 90 | h3 { 91 | font-size: $scale-large; 92 | line-height: 1.5em; 93 | } 94 | 95 | h4 { 96 | font-size: $scale-normal; 97 | } 98 | 99 | // paragraphs 100 | p { 101 | margin-bottom: 1em; 102 | } 103 | 104 | // links 105 | a { 106 | color: $blue; 107 | } 108 | 109 | // quotes 110 | blockquote { 111 | color: $gray-dark; 112 | font-style: italic; 113 | margin: 1em 0; 114 | border-left: 3px solid $gray-light; 115 | padding-left: 1em; 116 | } 117 | 118 | // lists 119 | ul { 120 | list-style: disc inside; 121 | } 122 | 123 | ol { 124 | list-style: decimal inside; 125 | } 126 | 127 | // code 128 | code { 129 | font-family: $mono; 130 | } 131 | -------------------------------------------------------------------------------- /.scss-lint.yml: -------------------------------------------------------------------------------- 1 | # SCSS linting rules. Taken from the default configuration and modified a bit to suit the Planetary Manifest. 2 | exclude: 'src/sass/vendor/**' 3 | 4 | linters: 5 | BorderZero: 6 | enabled: true 7 | 8 | ColorKeyword: 9 | enabled: false 10 | 11 | Comment: 12 | enabled: false 13 | 14 | DebugStatement: 15 | enabled: true 16 | 17 | DeclarationOrder: 18 | enabled: true 19 | 20 | DuplicateProperty: 21 | enabled: true 22 | 23 | ElsePlacement: 24 | enabled: true 25 | style: same_line # or 'new_line' 26 | 27 | EmptyLineBetweenBlocks: 28 | enabled: true 29 | ignore_single_line_blocks: true 30 | 31 | EmptyRule: 32 | enabled: true 33 | 34 | FinalNewline: 35 | enabled: true 36 | present: true 37 | 38 | HexLength: 39 | enabled: true 40 | style: short # or 'long' 41 | 42 | HexNotation: 43 | enabled: true 44 | style: lowercase # or 'uppercase' 45 | 46 | HexValidation: 47 | enabled: true 48 | 49 | IdWithExtraneousSelector: 50 | enabled: true 51 | 52 | Indentation: 53 | enabled: true 54 | character: space # or 'tab' 55 | width: 4 56 | 57 | LeadingZero: 58 | enabled: true 59 | style: include_zero # or 'exclude_zero' 60 | 61 | MergeableSelector: 62 | enabled: true 63 | force_nesting: true 64 | 65 | NameFormat: 66 | enabled: true 67 | convention: hyphenated_lowercase # or 'BEM', or a regex pattern 68 | 69 | PlaceholderInExtend: 70 | enabled: true 71 | 72 | PropertySortOrder: 73 | enabled: false 74 | ignore_unspecified: false 75 | 76 | PropertySpelling: 77 | enabled: true 78 | extra_properties: [] 79 | 80 | SelectorDepth: 81 | enabled: true 82 | max_depth: 3 83 | 84 | SelectorFormat: 85 | enabled: true 86 | convention: hyphenated_lowercase # or 'snake_case', or 'camel_case', or a regex pattern 87 | 88 | Shorthand: 89 | enabled: true 90 | 91 | SingleLinePerProperty: 92 | enabled: true 93 | allow_single_line_rule_sets: true 94 | 95 | SingleLinePerSelector: 96 | enabled: true 97 | 98 | SpaceAfterComma: 99 | enabled: true 100 | 101 | SpaceAfterPropertyColon: 102 | enabled: true 103 | style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned' 104 | 105 | SpaceAfterPropertyName: 106 | enabled: true 107 | 108 | SpaceBeforeBrace: 109 | enabled: true 110 | allow_single_line_padding: false 111 | 112 | SpaceBetweenParens: 113 | enabled: true 114 | spaces: 0 115 | 116 | StringQuotes: 117 | enabled: true 118 | style: double_quotes # or double_quotes 119 | 120 | TrailingSemicolon: 121 | enabled: true 122 | 123 | TrailingZero: 124 | enabled: false 125 | 126 | UnnecessaryMantissa: 127 | enabled: true 128 | 129 | UnnecessaryParentReference: 130 | enabled: true 131 | 132 | UrlFormat: 133 | enabled: true 134 | 135 | UrlQuotes: 136 | enabled: true 137 | 138 | ZeroUnit: 139 | enabled: true 140 | 141 | Compass::*: 142 | enabled: false -------------------------------------------------------------------------------- /src/templates/views/index.jade: -------------------------------------------------------------------------------- 1 | extends /layouts/default 2 | 3 | block head 4 | script(src="//use.typekit.net/xdy2tyi.js") 5 | script. 6 | try{Typekit.load();}catch(e){} 7 | 8 | block content 9 | .learn.g--container 10 | header.learn--header.learn--guide 11 | .g--row 12 | h1 This is Markdown. 13 | p.g--two-third Markdown is a way of formatting text that can be easily read and understood by both humans and software. 14 | .g--row 15 | h2 How to use markdown 16 | p.g--two-third. 17 | By typing different characters and punctuation, you can #[strong bold], 18 | #[em italicize], and #[a(href="http://planetary.io") link] your text. 19 | p.g--two-third. 20 | #[strong All examples below are interactive]; edit the text on the left and see how it changes on the right! 21 | .learn--example.g--row 22 | .g--two-third 23 | textarea(data-name="bold"). 24 | **I am bold.** 25 | .g--third.g--last 26 | .learn--output(data-type="output", data-name="bold") 27 | hr.learn--divider 28 | .learn--example.g--row 29 | .g--two-third 30 | textarea(data-name="italic"). 31 | _I am emphatic._ 32 | .g--third.g--last 33 | .learn--output(data-type="output", data-name="italic") 34 | hr.learn--divider 35 | .learn--example.g--row 36 | .g--two-third 37 | textarea(data-name="link"). 38 | [I am a link.](http://thisismarkdown.com) 39 | .g--third.g--last 40 | .learn--output(data-type="output", data-name="link") 41 | hr.learn--divider 42 | .learn--example.g--row 43 | .g--two-third 44 | textarea(data-name="code"). 45 | Code blocks have at least 1 tab or 4 spaces in each line: 46 | 47 | (function() { 48 | return 'so cool.'; 49 | })() 50 | .g--third.g--last 51 | .learn--output(data-type="output", data-name="code") 52 | hr.learn--divider 53 | .learn--example.g--row 54 | .g--two-third 55 | textarea(data-name="bulleted-list"). 56 | * Bread 57 | * Milk 58 | * Eggs 59 | * Bulleted lists 60 | .g--third.g--last 61 | .learn--output(data-type="output", data-name="bulleted-list") 62 | hr.learn--divider 63 | .learn--example.g--row 64 | .g--two-third 65 | textarea(data-name="ordered-list"). 66 | 1. Dance 67 | 2. ??? 68 | 3. Profit! 69 | 4. Ordered lists 70 | .g--third.g--last 71 | .learn--output(data-type="output", data-name="ordered-list") 72 | hr.learn--divider 73 | .learn--example.g--row 74 | .g--two-third 75 | textarea(data-name="blockquote"). 76 | And she said: 77 | > Like, oh my god. 78 | .g--third.g--last 79 | .learn--output(data-type="output", data-name="blockquote") 80 | hr.learn--divider 81 | .learn--example.g--row 82 | .g--two-third 83 | textarea(data-name="image"). 84 | ![Cat? Cat.](https://placekitten.com/g/300/200) 85 | .g--third.g--last 86 | .learn--output(data-type="output", data-name="image") 87 | footer.learn--footer.learn--guide 88 | | #[span.heart ♥] A reference made with love by #[a(href="http://planetary.io") Planetary] using #[a(href="http://github.com/planetarycorp/airframe") Airframe]. 89 | span.fork 90 | | Fork me on  91 | a(href="http://github.com/planetarycorp/thisismarkdown") 92 | span GitHub 93 | |   94 | svg(xmlns='http://www.w3.org/2000/svg', width='16', version='1.1', x='0', y='0', viewbox='0 0 10.3 10', enable-background='new 0 0 10.3 10', xml:space='preserve') 95 | path(fill-rule='evenodd', clip-rule='evenodd', fill='#191717', d='M5.1 0C2.3 0 0 2.3 0 5.1 0 7.4 1.5 9.3 3.5 10c0.3 0 0.3-0.1 0.3-0.2 0-0.1 0-0.4 0-0.9C2.4 9.2 2.1 8.2 2.1 8.2 1.9 7.6 1.6 7.4 1.6 7.4c-0.5-0.3 0-0.3 0-0.3 0.5 0 0.8 0.5 0.8 0.5 0.5 0.8 1.2 0.6 1.5 0.4 0-0.3 0.2-0.6 0.3-0.7C3.1 7.3 1.9 6.8 1.9 4.9c0-0.6 0.2-1 0.5-1.4C2.3 3.4 2.2 2.8 2.4 2.1c0 0 0.4-0.1 1.4 0.5 0.4-0.1 0.8-0.2 1.3-0.2 0.4 0 0.9 0.1 1.3 0.2 1-0.7 1.4-0.5 1.4-0.5 0.3 0.7 0.1 1.2 0.1 1.4 0.3 0.4 0.5 0.8 0.5 1.4 0 2-1.2 2.4-2.3 2.5 0.2 0.2 0.3 0.5 0.3 0.9 0 0.7 0 1.2 0 1.4 0 0.1 0.1 0.3 0.4 0.2 2-0.7 3.5-2.6 3.5-4.9C10.2 2.3 8 0 5.1 0z') 96 | -------------------------------------------------------------------------------- /src/styles/layouts/_learn.scss: -------------------------------------------------------------------------------- 1 | @function repeat($str, $n) { 2 | $out: ""; 3 | @for $i from 1 through $n { 4 | $out: $out + $str; 5 | } 6 | @return $out; 7 | } 8 | 9 | .learn--guide { 10 | @for $i from 1 through 6 { 11 | h#{$i}:hover { font-family: $mono; } 12 | h#{$i}:hover:before { 13 | margin-left: -0.55em - (0.5em * $i); 14 | content: repeat("#", $i) + " "; 15 | 16 | @include media("<1200px") { 17 | margin-left: 0; 18 | } 19 | } 20 | } 21 | 22 | strong:hover, 23 | em:hover, 24 | del:hover { 25 | font-family: $mono; 26 | font-style: normal; 27 | text-decoration: none; 28 | } 29 | 30 | strong:hover { 31 | &:before, 32 | &:after { 33 | content: "**"; 34 | } 35 | } 36 | 37 | em:hover { 38 | &:before, 39 | &:after { 40 | content: "_"; 41 | } 42 | } 43 | 44 | del:hover { 45 | &:before, 46 | &:after { 47 | content: "~~"; 48 | } 49 | } 50 | 51 | // This, unfortunately, doesn't work as well on small devices :( 52 | @include media(">=tablet") { 53 | a:hover { 54 | font-family: $mono; 55 | font-style: normal; 56 | text-decoration: none; 57 | 58 | &:before { 59 | content: "["; 60 | } 61 | 62 | &:after { 63 | content: "](" attr(href) ")"; 64 | } 65 | } 66 | } 67 | } 68 | 69 | .learn--header { 70 | padding: 0 0 3rem; 71 | cursor: default; 72 | 73 | p { 74 | font-size: 1.5rem; 75 | } 76 | } 77 | 78 | .learn--example { 79 | overflow: hidden; 80 | 81 | textarea, 82 | .learn--output { 83 | font-size: 1.5rem; 84 | min-height: 3rem; 85 | word-wrap: break-word; 86 | } 87 | 88 | textarea { 89 | padding: 0.25rem 0.5rem; 90 | appearance: none; 91 | border: 0; 92 | min-width: 100%; 93 | resize: none; 94 | font-family: $mono; 95 | overflow: hidden; 96 | overflow-y: hidden; 97 | 98 | &:focus { 99 | outline: none; 100 | } 101 | } 102 | } 103 | 104 | .learn--output { 105 | padding: 0.25rem 0.5rem; 106 | 107 | p:first-child { 108 | margin-top: 0; 109 | } 110 | 111 | > ul, 112 | > ol { 113 | padding-left: 0; 114 | 115 | &:first-child { 116 | margin-top: 0; 117 | } 118 | } 119 | 120 | img { 121 | max-width: 100%; 122 | } 123 | } 124 | 125 | .learn--divider { 126 | border-width: 1px 0 0; 127 | border-style: solid; 128 | border-color: $gray-lighter; 129 | margin: 0; 130 | padding: 0 0 2rem; 131 | width: 100%; 132 | overflow: hidden; 133 | 134 | &:hover { 135 | border-color: transparent; 136 | line-height: 2.5; 137 | margin-top: -1.4rem; 138 | padding: 0 0 3.4rem; 139 | 140 | &:before { 141 | display: block; 142 | content: repeat("*", 150); 143 | overflow: hidden; 144 | word-wrap: break-word; 145 | font-family: $mono; 146 | width: 100%; 147 | height: 2rem; 148 | } 149 | } 150 | } 151 | 152 | .learn--footer { 153 | padding: 0 0.5rem; 154 | margin: 5rem 0; 155 | 156 | .heart { 157 | color: desaturate(lighten($red, 7%), 5%); 158 | } 159 | 160 | .fork { 161 | float: right; 162 | 163 | a { 164 | text-decoration: none; 165 | } 166 | 167 | span { 168 | text-decoration: underline; 169 | } 170 | 171 | svg { 172 | position: relative; 173 | top: 2px; 174 | } 175 | } 176 | } 177 | 178 | @include media("<=70em") { 179 | .g--container { 180 | width: 95%; 181 | margin: 0 auto; 182 | } 183 | 184 | .learn--footer { 185 | .fork { 186 | margin-top: 1rem; 187 | display: block; 188 | float: none; 189 | } 190 | } 191 | } 192 | 193 | @include media(" 15 | * 16 | **/ 17 | $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px) !default; 18 | $media-expressions: (screen: "screen", 19 | print: "print", 20 | handheld: "handheld", 21 | retina2x: ("(-webkit-min-device-pixel-ratio: 2)", "(min-resolution: 192dpi)"), 22 | retina3x: ("(-webkit-min-device-pixel-ratio: 3)", "(min-resolution: 350dpi)") 23 | ) !default; 24 | 25 | @mixin media($conditions...) { 26 | $i: 1; 27 | 28 | @each $condition in $conditions { 29 | $conditions: set-nth($conditions, $i, parse-expression(nth($conditions, $i))); 30 | $i: $i + 1; 31 | } 32 | 33 | $branches: get-query-branches($conditions); 34 | $query: ""; 35 | 36 | @each $branch in $branches { 37 | @if ($query != "") { 38 | $query: $query + ", "; 39 | } 40 | 41 | $query: $query + $branch; 42 | } 43 | 44 | @media #{$query} { @content; } 45 | } 46 | 47 | @function get-query-branches($expressions) { 48 | $result: ""; 49 | $has-groups: false; 50 | 51 | // Getting initial snapshot and looking for groups 52 | @each $expression in $expressions { 53 | @if ($result != "") { 54 | $result: $result + " and "; 55 | } 56 | 57 | @if (type-of($expression) == "string") { 58 | $result: $result + $expression; 59 | } @else if (type-of($expression) == "list") { 60 | $result: $result + nth($expression, 1); 61 | $has-groups: true; 62 | } 63 | } 64 | 65 | // If we have groups, we have to create all possible combinations 66 | @if $has-groups { 67 | @each $expression in $expressions { 68 | @if (type-of($expression) == "list") { 69 | $first: nth($expression, 1); 70 | 71 | @each $member in $expression { 72 | @if ($member != $first) { 73 | @each $partial in $result { 74 | $result: join($result, str-replace-first($first, $member, $partial)); 75 | } 76 | } 77 | } 78 | } 79 | } 80 | } 81 | 82 | @return $result; 83 | } 84 | 85 | @function parse-expression($expression) { 86 | $operator: ""; 87 | $value: ""; 88 | $element: ""; 89 | $result: ""; 90 | $is-width: true; 91 | 92 | // Separating the operator from the rest of the expression 93 | @if (str-slice($expression, 2, 2) == "=") { 94 | $operator: str-slice($expression, 1, 2); 95 | $value: str-slice($expression, 3); 96 | } @else { 97 | $operator: str-slice($expression, 1, 1); 98 | $value: str-slice($expression, 2); 99 | } 100 | 101 | // Checking what type of expression we're dealing with 102 | @if map-has-key($breakpoints, $value) { 103 | $result: map-get($breakpoints, $value); 104 | } @else if map-has-key($media-expressions, $expression) { 105 | $result: map-get($media-expressions, $expression); 106 | $is-width: false; 107 | } @else { 108 | $result: to-number($value); 109 | } 110 | 111 | @if ($is-width) { 112 | @if ($operator == ">") { 113 | $element: "(min-width: #{$result + 1})"; 114 | } @else if ($operator == "<") { 115 | $element: "(max-width: #{$result - 1})"; 116 | } @else if ($operator == ">=") { 117 | $element: "(min-width: #{$result})"; 118 | } @else if ($operator == "<=") { 119 | $element: "(max-width: #{$result})"; 120 | } 121 | } @else { 122 | $element: $result; 123 | } 124 | 125 | @return $element; 126 | } 127 | 128 | @function str-replace-first($search, $replace, $subject) { 129 | $search-start: str-index($subject, $search); 130 | 131 | @if not $search-start { 132 | @return $subject; 133 | } 134 | 135 | $result: str-slice($subject, 0, $search-start - 1); 136 | $result: $result + $replace; 137 | $result: $result + str-slice($subject, $search-start + str-length($search)); 138 | 139 | @return $result; 140 | } 141 | 142 | /** 143 | * 144 | * Function to cast strings into numbers in SASS 145 | * 146 | * Author: Hugo Giraudel (@hugogiraudel) 147 | * https://github.com/HugoGiraudel/SassyCast 148 | * 149 | **/ 150 | @function _length($number, $unit) { 151 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax'; 152 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax; 153 | $index: index($strings, $unit); 154 | 155 | @if not $index { 156 | @warn "Unknown unit `#{$unit}`."; 157 | @return false; 158 | } 159 | 160 | @return $number * nth($units, $index); 161 | } 162 | 163 | @function to-number($string) { 164 | // Matrices 165 | $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 166 | $numbers: 0 1 2 3 4 5 6 7 8 9; 167 | 168 | // Result 169 | $result: 0; 170 | $divider: 0; 171 | $minus: false; 172 | 173 | // Looping through all characters 174 | @for $i from 1 through str-length($string) { 175 | $character: str-slice($string, $i, $i); 176 | $index: index($strings, $character); 177 | 178 | 179 | @if $character == '-' { 180 | $minus: true; 181 | } 182 | 183 | @else if $character == '.' { 184 | $divider: 1; 185 | } 186 | 187 | @else { 188 | @if not $index { 189 | $result: if($minus, $result * -1, $result); 190 | @return _length($result, str-slice($string, $i)); 191 | } 192 | 193 | $number: nth($numbers, $index); 194 | 195 | @if $divider == 0 { 196 | $result: $result * 10; 197 | } 198 | 199 | @else { 200 | // Move the decimal dot to the left 201 | $divider: $divider * 10; 202 | $number: $number / $divider; 203 | } 204 | 205 | $result: $result + $number; 206 | } 207 | } 208 | 209 | @return if($minus, $result * -1, $result); 210 | } 211 | -------------------------------------------------------------------------------- /src/styles/vendor/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /src/templates/views/styles.jade: -------------------------------------------------------------------------------- 1 | extends /layouts/default 2 | 3 | block title 4 | | Airframe Style Guide 5 | 6 | block content 7 | .g--container 8 | span.sg--component-label Kitchen Sink 9 | h1#headings Headings 10 | h1 Heading 1 11 | h2 Heading 2 12 | h3 Heading 3 13 | h4 Heading 4 14 | h5 Heading 5 15 | h6 Heading 6 16 | hr 17 | h1#headings-with-text Headings with Text 18 | h1 Heading 1 19 | p. 20 | Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 21 | h2 Heading 2 22 | p. 23 | Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 24 | h3 Heading 3 25 | p. 26 | Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 27 | h4 Heading 4 28 | p. 29 | Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 30 | h5 Heading 5 31 | p. 32 | Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 33 | h6 Heading 6 34 | p. 35 | Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 36 | hr 37 | h1#paragraph Paragraph 38 | p. 39 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. 40 | p. 41 | Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. 42 | p 43 | img(alt='Placeholder Image and Some Alt Text', src='http://placehold.it/350x150', title='A title element for this placeholder image.') 44 | p. 45 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. 46 | blockquote. 47 | "This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl." 48 | hr 49 | h1#text-elements Text Elements 50 | p 51 | | The 52 | a(href='#') a element 53 | | example 54 | p 55 | | The 56 | abbr abbr element 57 | | and an 58 | abbr(title='Abbreviation') abbr 59 | | element with title examples 60 | p 61 | | The 62 | acronym(title='A Cowboy Ran One New York Marathon') ACRONYM 63 | | element example 64 | p 65 | | The 66 | b b element 67 | | example 68 | p 69 | | The 70 | cite cite element 71 | | example 72 | p 73 | | The 74 | code code element 75 | | example 76 | p 77 | | The 78 | em em element 79 | | example 80 | p 81 | | The 82 | del del element 83 | | example 84 | p 85 | | The 86 | dfn dfn element 87 | | and 88 | dfn(title='Title text') dfn element with title 89 | | examples 90 | p 91 | | The 92 | i i element 93 | | example 94 | p 95 | | The 96 | ins ins element 97 | | example 98 | p 99 | | The 100 | kbd kbd element 101 | | example 102 | p 103 | | The 104 | mark mark element 105 | | example 106 | p 107 | | The 108 | q q element 109 | | example 110 | p 111 | | The 112 | q 113 | | q element 114 | q inside 115 | | a q element 116 | | example 117 | p 118 | | The 119 | s s element 120 | | example 121 | p 122 | | The 123 | samp samp element 124 | | example 125 | p 126 | | The 127 | small small element 128 | | example 129 | p 130 | | The 131 | strong strong element 132 | | example 133 | p 134 | | The 135 | sub sub element 136 | | example 137 | p 138 | | The 139 | sup sup element 140 | | example 141 | p 142 | | The 143 | u u element 144 | | example 145 | p 146 | | The 147 | var var element 148 | | example 149 | hr 150 | h1#monospace Monospace / Preformatted 151 | p Code block wrapped in "pre" and "code" tags 152 | pre 153 | code. 154 | // Loop through Divs using Javascript. 155 | var divs = document.querySelectorAll('div'), i; 156 | 157 | for (i = 0; i < divs.length; ++i) { 158 | divs[i].style.color = "green"; 159 | } 160 | 161 | p Monospace Text wrapped in "pre" tags 162 | pre. 163 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 164 | hr 165 | h1#list_types List Types 166 | h3 Ordered List 167 | ol 168 | li List Item 1 169 | li List Item 2 170 | li List Item 3 171 | h3 Unordered List 172 | ul 173 | li List Item 1 174 | li List Item 2 175 | li List Item 3 176 | h3 Definition List 177 | dl 178 | dt Definition List Term 1 179 | dd This is a definition list description. 180 | dt Definition List Term 2 181 | dd This is a definition list description. 182 | dt Definition List Term 3 183 | dd This is a definition list description. 184 | hr 185 | h1#tables Tables 186 | table(cellspacing='0', cellpadding='0') 187 | thead 188 | tr 189 | th Table Header 1 190 | th Table Header 2 191 | th Table Header 3 192 | tbody 193 | tr 194 | td Division 1 195 | td Division 2 196 | td Division 3 197 | tr 198 | td Division 1 199 | td Division 2 200 | td Division 3 201 | tr 202 | td Division 1 203 | td Division 2 204 | td Division 3 205 | hr 206 | h1#form_elements Media and Form Elements 207 | h2 Media 208 | p The Audio Element: 209 | audio(controls='') 210 | source(src='http://www.w3schools.com/tags/horse.ogg', type='audio/ogg') 211 | source(src='http://www.w3schools.com/tags/horse.mp3', type='audio/mpeg') 212 | | Your browser does not support the audio element. 213 | p The Video Element: 214 | video(width='320', height='240', controls='') 215 | source(src='http://www.w3schools.com/tags/movie.mp4', type='video/mp4') 216 | source(src='http://www.w3schools.com/tags/movie.ogg', type='video/ogg') 217 | | Your browser does not support the video tag. 218 | h2 Form Elements 219 | p The Fieldset: 220 | fieldset 221 | legend Legend 222 | form 223 | p 224 | label(for='text_field') Text Field: 225 | input#text_field(type='text') 226 | p 227 | label(for='text_field_disabled') Disabled Text Field: 228 | input#text_field_disabled(type='text', disabled='', value="I'm disabled") 229 | p 230 | label(for='text_field_readonly') Readonly Text Field: 231 | input#text_field_readonly(type='text', readonly='', value="I'm readonly") 232 | p 233 | label(for='text_area') Text Area: 234 | textarea#text_area 235 | p 236 | label(for='text_area_disabled') Disabled Text Area: 237 | textarea#text_area_disabled(disabled='') I'm disabled 238 | p 239 | label(for='text_area') Readonly Text Area: 240 | textarea#text_area(readonly='') I'm readonly 241 | p 242 | label(for='select_element') Select Element: 243 | select#select_element 244 | optgroup(label='Option Group 1') 245 | option(value='1') Option 1 246 | option(value='2') Option 2 247 | optgroup(label='Option Group 2') 248 | option(value='1') Option 1 249 | option(value='2') Option 2 250 | option(value='3', disabled='') Disabled Option 251 | p 252 | label(for='select_element_disabled') Disabled Select Element: 253 | select#select_element_disabled(disabled='') 254 | option(value='1') Unselectable Option 255 | option(value='2') This option should not even be seen 256 | p 257 | | Radio Buttons: 258 | label 259 | input.radio(type='radio', name='radio_button', value='radio_1') 260 | | Radio 1 261 | label 262 | input.radio(type='radio', name='radio_button', value='radio_2') 263 | | Radio 2 264 | label 265 | input.radio(type='radio', name='radio_button', value='radio_3') 266 | | Radio 3 267 | label 268 | input.radio(type='radio', name='radio_button', value='radio_4', disabled='') 269 | | Radio Disabled 270 | p 271 | | Checkboxes: 272 | label 273 | input.checkbox(type='checkbox', name='checkboxes', value='check_1') 274 | | Checkbox 1 275 | label 276 | input.checkbox(type='checkbox', name='checkboxes', value='check_2') 277 | | Checkbox 2 278 | label 279 | input.checkbox(type='checkbox', name='checkboxes', value='check_3') 280 | | Checkbox 3 281 | label 282 | input.checkbox(type='checkbox', name='checkboxes', value='check_4', disabled='') 283 | | Checkbox Disabled 284 | p 285 | label(for='password') Password: 286 | input#password.password(type='password') 287 | p 288 | label(for='file') File Input: 289 | input#file.file(type='file') 290 | h3 HTML5-specific Form Elements 291 | p 292 | label(for='email') Email: 293 | input#email(type='email') 294 | p 295 | label(for='url') URL: 296 | input#url(type='url') 297 | p 298 | label(for='tel') Telephone: 299 | input#tel(type='tel') 300 | p 301 | label(for='number') Number: 302 | input#number(type='number', min='0', max='10', step='1', value='5') 303 | p 304 | label(for='search') Search: 305 | input#search(type='search') 306 | p 307 | label(for='date') Date: 308 | input#date(type='date') 309 | p 310 | label(for='time') Time: 311 | input#time(type='time') 312 | p 313 | label(for='color') Color: 314 | input#color(type='color') 315 | p 316 | label(for='datalist') Datalist: 317 | input#datalist(list='browsers', name='browser', type='datalist') 318 | datalist#browsers 319 | option(value='Internet Explorer') 320 | option(value='Firefox') 321 | option(value='Chrome') 322 | option(value='Opera') 323 | option(value='Safari') 324 | p 325 | label(for='range') Range: 326 | input#range(type='range', name='points', min='1', max='10') 327 | p 328 | button.button Button Element 329 | input.button(type='reset', value='Clear') 330 | input.button(type='submit', value='Submit') 331 | --------------------------------------------------------------------------------