diff --git a/README.md b/README.md index 441cd84..b8838d0 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,28 @@ Submit a pull request when you are finished and satisfied with your work. Use this area to communicate any thought processes, ideas, or challenges you encountered. -* -* -* +* I am using SASS and Grunt. + +* The meta viewport tag was incorrect and causing the desktop site to render on my iOS simulator. I changed it and now the webpage renders as intended. + +* I changed the normalize.css file to normalize.scss and I'm importing it into the main.scss file so it can be minified via Grunt. + +* I changed the fonts as specified in the PSD, although I don't have the exact ones. + +* I changed the elements with IDs to classes. No need to use IDs when classes will suffice. + +* I chose to overwrite styles at the bottom of the stylesheet so you could see the changes more easily. + +* I am writing CSS for mobile screens then when the screen size is 800 or greater, that renders the desktop styles. + +* I set the breakpoint at 800px (50em) rather than 768px to support the new Samsung Galaxy Tabs. + +* I'm writing inline media queries. I've found that this method makes it easier to find where your styles are coming from for later editing. + +* On the PSD in the invitation section, the paragraph copy is 12px, and I made it 12px in the CSS. I feel it's too small on the screen and I'd talk with the designer about this. + +* HTML improvements: changed ' to ’. Changed class names to ones with more meaning, changed the second div to a section because it's a specific grouping of content. + +* Added JS-specific IDs to the buttons. IDs prefixed with JS- are to be used for javascript purposes, not styled. This helps with the separation of concerns. + +* Modal design: keep it simple, offer what's necessary for the usage: essentially, a confirmation that we've received your response. I added the orange accent color which is the hover state of the buttons for continuity. \ No newline at end of file diff --git a/www/.gitignore b/www/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/www/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/www/Gruntfile.js b/www/Gruntfile.js new file mode 100644 index 0000000..483aa8f --- /dev/null +++ b/www/Gruntfile.js @@ -0,0 +1,81 @@ +module.exports = function(grunt) { + + // 1. All configuration goes here + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + // concatenate JS + concat: { + dist: { + + // files to concatenate + src: [ + 'js/vendor/*.js', + 'js/main.js', + 'js/plugins.js' + ], + + // location of output file + dest: 'js/build/production.js', + } + }, + + // minify JS + uglify: { + build: { + src: 'js/build/production.js', + dest: 'js/build/production.min.js' + } + }, + + + // SASS is great. minifying here too + sass: { + dist: { + options: { + style: 'compressed' + }, + files: { + 'css/build/main.css': 'css/main.scss' + } + } + }, + + // if anything changes, re-generate files + watch: { + scripts: { + files: ['js/*.js'], + tasks: ['concat', 'uglify'], + options: { + spawn: false, + }, + }, + css: { + files: '**/*.scss', + tasks: ['sass'] + } + }, + + // make a local server + connect: { + server: { + options: { + port: 9999, + base: '.' + } + } + } + + }); + + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-connect'); + + + grunt.registerTask('server', "Serve your app", [ + 'connect:server', 'watch' ]); + +}; \ No newline at end of file diff --git a/www/css/!main.css b/www/css/!main.css new file mode 100755 index 0000000..523bbf8 --- /dev/null +++ b/www/css/!main.css @@ -0,0 +1,422 @@ +/* + * HTML5 Boilerplate + * + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ +html, +button, +input, +select, +textarea { + color: #222; } + +body { + font-size: 1em; + line-height: 1.4; } + +/* + * Remove text-shadow in selection highlight: h5bp.com/i + * These selection declarations have to be separate. + * Customize the background color to match your design. + */ +::-moz-selection { + background: #b3d4fc; + text-shadow: none; } + +::selection { + background: #b3d4fc; + text-shadow: none; } + +/* + * A better looking default horizontal rule + */ +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } + +/* + * Remove the gap between images and the bottom of theimage-replace containers: h5bp.com/i/440 + */ +img { + vertical-align: middle; } + +/* + * Remove default fieldset styles. + */ +fieldset { + border: 0; + margin: 0; + padding: 0; } + +/* + * Allow only vertical resizing of textareas. + */ +textarea { + resize: vertical; } + +/* ========================================================================== + Chrome Frame prompt + ========================================================================== */ +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; } + +/* ========================================================================== + Helper classes + ========================================================================== */ +/* + * Image replacement + */ +.image-replace { + background-color: transparent; + border: 0; + overflow: hidden; + /* IE 6/7 fallback */ + *text-indent: -9999px; } + +.image-replace:before { + content: ""; + display: block; + width: 0; + height: 100%; } + +/* + * Hide from both screenreaders and browsers: h5bp.com/u + */ +.removed { + display: none !important; + visibility: hidden; } + +/* + * Hide only visually, but have it available for screenreaders: h5bp.com/v + */ +.hidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + +/* + * Extends the .hidden class to allow the element to be focusable + * when navigated to via the keyboard: h5bp.com/p + */ +.hidden.focusable:active, +.hidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; } + +/* + * Hide visually and from screenreaders, but maintain layout + */ +.invisible { + visibility: hidden; } + +/* + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ +.clearfix:before, +.clearfix:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ } + +.clearfix:after { + clear: both; } + +/* + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ +.clearfix { + *zoom: 1; } + +/* ========================================================================== + Default Screen styles. + ========================================================================== */ +body { + background: url(../img/woodgrain.jpg) repeat; + font-family: "Arial", "Helvetica" sans-serif; + height: 600px; + width: 888px; } + +img { + position: absolute; } + +.title { + left: 17px; + top: 25px; } + +.description { + left: 259px; + top: 67px; } + +.date { + left: 525px; + top: 9px; } + +.event-invitation { + background-color: #fff; + bottom: 0; + left: 0; + padding: 27px 129px 29px 29px; + position: absolute; + width: 579px; } + +.event-invitation h1 { + font-size: 30px; + margin-bottom: 15px; + font-family: "Helvetica Neue", "Helvetica", "Arial"; + font-weight: 400; } + +.event-invitation a { + background-color: #393939; + color: #fff; + border-radius: 3px; + display: inline-block; + margin-right: 20px; + padding: 15px; + text-align: center; + text-decoration: none; } + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + Theses examples override the primary ('mobile fimage-replacest') styles. + Modify as content requimage-replacees. + ========================================================================== */ +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ } +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { + /* Style adjustments for high resolution devices */ } +/* ========================================================================== + Print styles. + Inlined to avoid requimage-replaceed HTTP connection: h5bp.com/r + ========================================================================== */ +@media print { + * { + background: transparent !important; + color: #000 !important; + /* Black prints faster: h5bp.com/s */ + box-shadow: none !important; + text-shadow: none !important; } + + a, + a:visited { + text-decoration: underline; } + + a[href]:after { + content: " (" attr(href) ")"; } + + abbr[title]:after { + content: " (" attr(title) ")"; } + + /* + * Don't show links for images, or javascript/internal links + */ + .image-replace a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + + thead { + display: table-header-group; + /* h5bp.com/t */ } + + tr, + img { + page-break-inside: avoid; } + + img { + max-width: 100% !important; } + + @page { + margin: 0.5cm; } + p, + h2, + h3 { + orphans: 3; + widows: 3; } + + h2, + h3 { + page-break-after: avoid; } } +.event-invitation { + -webkit-box-shadow: inset -8px 8px 35px -16px rgba(144, 144, 144, 0.75); + -moz-box-shadow: inset -8px 8px 35px -16px rgba(144, 144, 144, 0.75); + -ms-box-shadow: inset -8px 8px 35px -16px rgba(144, 144, 144, 0.75); + -o-box-shadow: inset -8px 8px 35px -16px rgba(144, 144, 144, 0.75); + box-shadow: inset -8px 8px 35px -16px rgba(144, 144, 144, 0.75); + background-image: url(../img/invitation-bg.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 424px; } + .event-invitation:before, .event-invitation:after { + z-index: -1; + position: absolute; + content: ""; + bottom: 15px; + left: -16px; + width: 30%; + top: 6px; + max-width: 300px; + background: rgba(0, 0, 0, 0.6); + -webkit-box-shadow: 3px -7px 15px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 3px -7px 15px rgba(0, 0, 0, 0.6); + -ms-box-shadow: 3px -7px 15px rgba(0, 0, 0, 0.6); + -o-box-shadow: 3px -7px 15px rgba(0, 0, 0, 0.6); + box-shadow: 3px -7px 15px rgba(0, 0, 0, 0.6); + -webkit-transform: rotate(4deg); + -moz-transform: rotate(4deg); + -ms-transform: rotate(4deg); + -o-transform: rotate(4deg); + transform: rotate(4deg); } + .event-invitation:after { + right: 3px; + left: auto; + top: 1%; + height: 96%; + width: 50%; + -webkit-transform: rotate(1.5deg); + -moz-transform: rotate(1.5deg); + -ms-transform: rotate(1.5deg); + -o-transform: rotate(1.5deg); + transform: rotate(1.5deg); + -webkit-box-shadow: 9px 0px 5px rgba(0, 0, 0, 0.4); + -moz-box-shadow: 9px 0px 5px rgba(0, 0, 0, 0.4); + -ms-box-shadow: 9px 0px 5px rgba(0, 0, 0, 0.4); + -o-box-shadow: 9px 0px 5px rgba(0, 0, 0, 0.4); + box-shadow: 9px 0px 5px rgba(0, 0, 0, 0.4); } + .event-invitation h1 { + margin: 0; + color: #3a3a3a; } + .event-invitation p { + line-height: 20px; + font-size: 12px; + margin: 6px 0 18px; + color: #383838; } + .event-invitation a { + font-family: "Helvetica Neue", "Helvetica", "Arial"; + background: #3b3b3b; + background: -moz-linear-gradient(top, #3b3b3b 0%, #313131 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, #3b3b3b), color-stop(100%, #313131)); + background: -webkit-linear-gradient(top, #3b3b3b 0%, #313131 100%); + background: -o-linear-gradient(top, #3b3b3b 0%, #313131 100%); + background: -ms-linear-gradient(top, #3b3b3b 0%, #313131 100%); + background: linear-gradient(to bottom, #3b3b3b 0%, #313131 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#313131', GradientType=0 ); } + .event-invitation a:hover { + background: #f7973d; + background: -moz-linear-gradient(top, #f7973d 0%, #f68533 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, #f7973d), color-stop(100%, #f68533)); + background: -webkit-linear-gradient(top, #f7973d 0%, #f68533 100%); + background: -o-linear-gradient(top, #f7973d 0%, #f68533 100%); + background: -ms-linear-gradient(top, #f7973d 0%, #f68533 100%); + background: linear-gradient(to bottom, #f7973d 0%, #f68533 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7973d', endColorstr='#f68533', GradientType=0 ); } + +.event-details { + list-style: none; } + .event-details img { + z-index: -1; } + +.bg-img-right { + right: 0; + bottom: 7%; + z-index: -2; } + +.bg-img-bottom { + bottom: 0; + right: 13%; + z-index: -2; } + +.modal { + position: fixed; + top: 50%; + left: 50%; + width: 40%; + max-width: 500px; + min-width: 320px; + height: auto; + z-index: 999; + visibility: hidden; + transform: translateX(-50%) translateY(-50%); } + +.overlay { + position: fixed; + width: 100%; + height: 100%; + visibility: hidden; + top: 0; + left: 0; + z-index: 998; + opacity: 0; + background: rgba(0, 0, 0, 0.8); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -ms-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; } + +.modal-show { + visibility: visible; + opacity: 1; } + +.modal-content { + background-color: #f4f3f3; + padding: 20px; + border-left: 6px solid #f7933a; + position: relative; + color: #383838; } + +.modal-close { + background-color: #f7933a; + color: #fff; + text-align: center; + font-weight: bold; + height: 25px; + width: 29px; + padding-top: 4px; + border-radius: 15px; + position: absolute; + top: -14px; + right: -14px; + cursor: pointer; } + .modal-close:hover { + background-color: #3b3b3b; } + +.rsvp-no-copy { + display: none; } + +/*# sourceMappingURL=main.css.map */ diff --git a/www/css/build/main.css b/www/css/build/main.css new file mode 100644 index 0000000..d69bed3 --- /dev/null +++ b/www/css/build/main.css @@ -0,0 +1,2 @@ +/*! normalize.css v1.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html,button,input,select,textarea{color:#222}body{font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0}.image-replace{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.image-replace:before{content:"";display:block;width:0;height:100%}.removed{display:none !important;visibility:hidden}.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hidden.focusable:active,.hidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}body{background:url(../../img/woodgrain.jpg) repeat;font-family:"Arial", "Helvetica" sans-serif;width:100%;height:100%}@media only screen and (min-width: 50em){body{height:600px;width:888px}}.title{left:17px;top:25px}.description{left:259px;top:67px}.date{left:525px;top:9px}.event-invitation h1{font-size:30px;margin-bottom:15px;font-family:"Helvetica Neue", "Helvetica", "Arial";font-weight:400}.event-invitation a{background-color:#393939;color:#fff;border-radius:3px;text-decoration:none;display:inline-block;margin-right:20px;padding:15px;text-align:center}@media print{*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.image-replace a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}@page{margin:0.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.event-invitation{background-color:#fff;display:block;width:90%;margin:0 auto;padding:27px 0;-webkit-box-shadow:inset -8px 8px 35px -16px rgba(144,144,144,0.75);-moz-box-shadow:inset -8px 8px 35px -16px rgba(144,144,144,0.75);-ms-box-shadow:inset -8px 8px 35px -16px rgba(144,144,144,0.75);-o-box-shadow:inset -8px 8px 35px -16px rgba(144,144,144,0.75);box-shadow:inset -8px 8px 35px -16px rgba(144,144,144,0.75);background-image:url(../../img/invitation-bg.jpg);background-repeat:no-repeat;background-size:100% 100%}@media only screen and (min-width: 50em){.event-invitation{bottom:0;left:0;padding:27px 129px 29px 29px;position:absolute;width:579px}}@media only screen and (min-width: 50em){.event-invitation:before,.event-invitation:after{z-index:-1;position:absolute;content:"";bottom:15px;left:-16px;width:30%;top:6px;max-width:300px;background:rgba(0,0,0,0.6);-webkit-box-shadow:3px -7px 15px rgba(0,0,0,0.6);-moz-box-shadow:3px -7px 15px rgba(0,0,0,0.6);-ms-box-shadow:3px -7px 15px rgba(0,0,0,0.6);-o-box-shadow:3px -7px 15px rgba(0,0,0,0.6);box-shadow:3px -7px 15px rgba(0,0,0,0.6);-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);-ms-transform:rotate(4deg);-o-transform:rotate(4deg);transform:rotate(4deg)}}@media only screen and (min-width: 50em){.event-invitation:after{right:3px;left:auto;top:1%;height:96%;width:50%;-webkit-transform:rotate(1.5deg);-moz-transform:rotate(1.5deg);-ms-transform:rotate(1.5deg);-o-transform:rotate(1.5deg);transform:rotate(1.5deg);-webkit-box-shadow:9px 0px 5px rgba(0,0,0,0.4);-moz-box-shadow:9px 0px 5px rgba(0,0,0,0.4);-ms-box-shadow:9px 0px 5px rgba(0,0,0,0.4);-o-box-shadow:9px 0px 5px rgba(0,0,0,0.4);box-shadow:9px 0px 5px rgba(0,0,0,0.4)}}.event-invitation .inner-content{width:90%;margin:0 auto;max-width:600px}@media only screen and (min-width: 50em){.event-invitation .inner-content{max-width:none;margin:0;width:auto}}.event-invitation h1{margin:0;color:#3a3a3a}.event-invitation p{line-height:20px;font-size:12px;margin:6px 0 18px;color:#383838}.event-invitation a{display:block;margin:20px auto;font-family:"Helvetica Neue", "Helvetica", "Arial";background:#3b3b3b;background:-moz-linear-gradient(top, #3b3b3b 0%, #313131 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, #3b3b3b), color-stop(100%, #313131));background:-webkit-linear-gradient(top, #3b3b3b 0%, #313131 100%);background:-o-linear-gradient(top, #3b3b3b 0%, #313131 100%);background:-ms-linear-gradient(top, #3b3b3b 0%, #313131 100%);background:linear-gradient(to bottom, #3b3b3b 0%, #313131 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#313131', GradientType=0 )}.event-invitation a:hover{background:#f7973d;background:-moz-linear-gradient(top, #f7973d 0%, #f68533 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, #f7973d), color-stop(100%, #f68533));background:-webkit-linear-gradient(top, #f7973d 0%, #f68533 100%);background:-o-linear-gradient(top, #f7973d 0%, #f68533 100%);background:-ms-linear-gradient(top, #f7973d 0%, #f68533 100%);background:linear-gradient(to bottom, #f7973d 0%, #f68533 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7973d', endColorstr='#f68533', GradientType=0 )}@media only screen and (min-width: 50em){.event-invitation a{display:inline-block;margin-right:20px;padding:15px;text-align:center}}.event-details img{z-index:-1;max-width:292px;margin:3em auto;display:block}@media only screen and (min-width: 50em){.event-details img{position:absolute}}.event-details .bg-img-right{display:none}@media only screen and (min-width: 50em){.event-details .bg-img-right{right:0;bottom:7%;z-index:-2;display:block}}.event-details .bg-img-bottom{display:none}@media only screen and (min-width: 50em){.event-details .bg-img-bottom{bottom:0;right:13%;z-index:-2;display:block;margin:0}}.modal{position:fixed;top:50%;left:50%;width:40%;max-width:500px;min-width:320px;height:auto;z-index:999;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:998;opacity:0;background:rgba(0,0,0,0.8);-webkit-transition:0.3s;-moz-transition:0.3s;-ms-transition:0.3s;-o-transition:0.3s;transition:0.3s}.modal-show{visibility:visible;opacity:1}.modal-content{background-color:#f4f3f3;padding:20px;border-left:6px solid #f7933a;position:relative;color:#383838}.modal-close{background-color:#f7933a;color:#fff;text-align:center;font-weight:bold;height:25px;width:29px;padding-top:4px;border-radius:15px;position:absolute;top:-14px;right:-14px;cursor:pointer}.modal-close:hover{background-color:#3b3b3b}.rsvp-no-copy{display:none} +/*# sourceMappingURL=main.css.map */ diff --git a/www/css/build/main.css.map b/www/css/build/main.css.map new file mode 100644 index 0000000..6ec398d --- /dev/null +++ b/www/css/build/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../normalize.scss","../main.scss","../mixins.scss"], +"names": [], +"file": "main.css" +} diff --git a/www/css/main.css.map b/www/css/main.css.map new file mode 100644 index 0000000..07995b9 --- /dev/null +++ b/www/css/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": ";;;;;;;;;;AAYA;;;;QAIS;EACL,KAAK,EAAE,IAAI;;AAGf,IAAK;EACD,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;;;;;;;AASpB,gBAAiB;EACb,UAAU,EAAE,OAAO;EACnB,WAAW,EAAE,IAAI;;AAGrB,WAAY;EACR,UAAU,EAAE,OAAO;EACnB,WAAW,EAAE,IAAI;;;;;AAOrB,EAAG;EACC,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,cAAc;EAC1B,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,CAAC;;;;;AAOd,GAAI;EACA,cAAc,EAAE,MAAM;;;;;AAO1B,QAAS;EACL,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;;AAOd,QAAS;EACL,MAAM,EAAE,QAAQ;;;;;AAOpB,YAAa;EACT,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,OAAO;;;;;;;;AAWpB,cAAe;EACX,gBAAgB,EAAE,WAAW;EAC7B,MAAM,EAAE,CAAC;EACT,QAAQ,EAAE,MAAM;;EAEhB,YAAY,EAAE,OAAO;;AAGzB,qBAAsB;EAClB,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,IAAI;;;;;AAOhB,QAAS;EACL,OAAO,EAAE,eAAe;EACxB,UAAU,EAAE,MAAM;;;;;AAOtB,OAAQ;EACJ,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,aAAa;EACnB,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;;;;;;AAQd;uBACwB;EACpB,IAAI,EAAE,IAAI;EACV,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,QAAQ,EAAE,OAAO;EACjB,QAAQ,EAAE,MAAM;EAChB,KAAK,EAAE,IAAI;;;;;AAOf,UAAW;EACP,UAAU,EAAE,MAAM;;;;;;;;;;;;;AAetB;eACgB;EACZ,OAAO,EAAE,GAAG;;EACZ,OAAO,EAAE,KAAK;;;AAGlB,eAAgB;EACZ,KAAK,EAAE,IAAI;;;;;;AAQf,SAAU;EACN,KAAK,EAAE,CAAC;;;;;AAOZ,IAAK;EACD,UAAU,EAAE,gCAAgC;EAC5C,WAAW,EAAE,+BAA+B;EAC5C,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;;AAGhB,GAAI;EACA,QAAQ,EAAE,QAAQ;;AAEtB,MAAO;EACH,IAAI,EAAE,IAAI;EACV,GAAG,EAAE,IAAI;;AAGb,YAAa;EACT,IAAI,EAAE,KAAK;EACX,GAAG,EAAE,IAAI;;AAGb,KAAM;EACF,IAAI,EAAE,KAAK;EACX,GAAG,EAAE,GAAG;;AAGZ,iBAAkB;EACd,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,oBAAoB;EAC7B,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;;AAGhB,oBAAqB;EACjB,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,IAAI;EACnB,WAAW,EAAE,sCAAsC;EACnD,WAAW,EAAE,GAAG;;AAEpB,mBAAoB;EAChB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,YAAY;EACrB,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAClB,eAAe,EAAE,IAAI;;;;;;;AAazB,wCAAyC;;AAIzC,sGACgD;;;;;;AAShD,YAAa;EACT,CAAE;IACE,UAAU,EAAE,sBAAsB;IAClC,KAAK,EAAE,eAAe;;IACtB,UAAU,EAAE,eAAe;IAC3B,WAAW,EAAE,eAAe;;EAGhC;WACU;IACN,eAAe,EAAE,SAAS;;EAG9B,aAAc;IACV,OAAO,EAAE,mBAAmB;;EAGhC,iBAAkB;IACd,OAAO,EAAE,oBAAoB;;;;;EAOjC;;oBAEmB;IACf,OAAO,EAAE,EAAE;;EAGf;YACW;IACP,MAAM,EAAE,cAAc;IACtB,iBAAiB,EAAE,KAAK;;EAG5B,KAAM;IACF,OAAO,EAAE,kBAAkB;;;EAG/B;KACI;IACA,iBAAiB,EAAE,KAAK;;EAG5B,GAAI;IACA,SAAS,EAAE,eAAe;;EAG9B,KAEC;IADG,MAAM,EAAE,KAAK;EAGjB;;IAEG;IACC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;;EAGb;IACG;IACC,gBAAgB,EAAE,KAAK;AAkC/B,iBAAkB;EA1Bd,kBAAkB,EAAE,mDAAI;EACxB,eAAe,EAAE,mDAAI;EACrB,cAAc,EAAE,mDAAI;EACpB,aAAa,EAAE,mDAAI;EACnB,UAAU,EAAE,mDAAI;EAwBhB,gBAAgB,EAAE,6BAA6B;EAC/C,iBAAiB,EAAE,SAAS;EAC5B,eAAe,EAAE,SAAS;EAC1B,KAAK,EAAE,KAAK;EACZ,iDAAkB;IACd,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,GAAG;IACV,GAAG,EAAE,GAAG;IACR,SAAS,EAAC,KAAK;IACf,UAAU,EAAE,kBAAkB;IAzClC,kBAAkB,EAAE,gCAAI;IACxB,eAAe,EAAE,gCAAI;IACrB,cAAc,EAAE,gCAAI;IACpB,aAAa,EAAE,gCAAI;IACnB,UAAU,EAAE,gCAAI;IAKhB,iBAAiB,EAAE,YAAI;IACvB,cAAc,EAAE,YAAI;IACpB,aAAa,EAAE,YAAI;IACnB,YAAY,EAAE,YAAI;IAClB,SAAS,EAAE,YAAI;EAiCf,uBAAQ;IACJ,KAAK,EAAE,GAAG;IACV,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,EAAE;IACP,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IA1Cd,iBAAiB,EAAE,cAAI;IACvB,cAAc,EAAE,cAAI;IACpB,aAAa,EAAE,cAAI;IACnB,YAAY,EAAE,cAAI;IAClB,SAAS,EAAE,cAAI;IAbf,kBAAkB,EAAE,8BAAI;IACxB,eAAe,EAAE,8BAAI;IACrB,cAAc,EAAE,8BAAI;IACpB,aAAa,EAAE,8BAAI;IACnB,UAAU,EAAE,8BAAI;EAqDhB,oBAAG;IACC,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,OAAO;EAGlB,mBAAE;IACE,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,OAAO;EAGlB,mBAAE;IACE,WAAW,EAAE,sCAAsC;IACnD,UAAU,EAAE,OAAgB;IAC5B,UAAU,EAAE,mDAAqE;IACjF,UAAU,EAAE,2FAA6G;IACzH,UAAU,EAAE,sDAAwE;IACpF,UAAU,EAAE,iDAAmE;IAC/E,UAAU,EAAE,kDAAoE;IAChF,UAAU,EAAE,oDAAsE;IAClF,MAAM,EAAE,4GAA4G;IACpH,yBAAQ;MACJ,UAAU,EAAE,OAAkB;MAC9B,UAAU,EAAE,mDAAyE;MACrF,UAAU,EAAE,2FAAiH;MAC7H,UAAU,EAAE,sDAA4E;MACxF,UAAU,EAAE,iDAAuE;MACnF,UAAU,EAAE,kDAAwE;MACpF,UAAU,EAAE,oDAA0E;MACtF,MAAM,EAAE,4GAA4G;;AAKhI,cAAe;EACX,UAAU,EAAE,IAAI;EAChB,kBAAI;IACA,OAAO,EAAE,EAAE;;AAInB,aAAc;EACV,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,EAAE;;AAGf,cAAe;EACX,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,EAAE;;AAIf,MAAO;EACH,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,GAAG;EACV,SAAS,EAAE,KAAK;EAChB,SAAS,EAAE,KAAK;EAChB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,GAAG;EACZ,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,iCAAiC;;AAGhD,QAAS;EACL,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,MAAM;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,GAAG;EACZ,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,kBAAkB;EApH9B,kBAAkB,EAAE,IAAI;EACxB,eAAe,EAAE,IAAI;EACrB,cAAc,EAAE,IAAI;EACpB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;;AAoHpB,WAAY;EACR,UAAU,EAAE,OAAO;EACnB,OAAO,EAAE,CAAC;;AAGd,cAAe;EACX,gBAAgB,EAAE,OAAO;EACzB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,iBAAiB;EAC9B,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,OAAO;;AAGlB,YAAa;EACT,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,IAAI;EACjB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,OAAO;EAEf,kBAAQ;IACL,gBAAgB,EAAE,OAAO;;AAIhC,aAAc;EACV,OAAO,EAAE,IAAI", +"sources": ["main.scss"], +"names": [], +"file": "main.css" +} \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.scss old mode 100755 new mode 100644 similarity index 51% rename from www/css/main.css rename to www/css/main.scss index 7691818..bf223a9 --- a/www/css/main.css +++ b/www/css/main.scss @@ -1,3 +1,7 @@ +@import 'css/normalize.scss'; +@import 'css/variables.scss'; +@import 'css/mixins.scss'; + /* * HTML5 Boilerplate * @@ -195,55 +199,45 @@ textarea { ========================================================================== */ body { - background: url(../img/woodgrain.jpg) repeat; - font-family: "Helvetica", "Arial", sans-serif; - height: 600px; - width: 888px; + background: url(../../img/woodgrain.jpg) repeat; + font-family: "Arial", "Helvetica" sans-serif; + width: 100%; + height: 100%; + @include tablet-portrait-and-up { + height: 600px; + width: 888px; + } } -img { - position: absolute; -} -#title { +.title { left: 17px; top: 25px; - z-index: 2; } -#description { +.description { left: 259px; top: 67px; - z-index: 1; } -#date { +.date { left: 525px; top: 9px; } -#invitation { - background-color: #fff; - bottom: 0; - left: 0; - padding: 27px 129px 29px 29px; - position: absolute; - width: 579px; - z-index: 3; -} -#invitation h1 { + +.event-invitation h1 { font-size: 30px; margin-bottom: 15px; + font-family: "Helvetica Neue", "Helvetica", "Arial"; + font-weight: 400; } -#invitation a { +.event-invitation a { background-color: #393939; color: #fff; border-radius: 3px; + text-decoration: none; display: inline-block; margin-right: 20px; padding: 15px; text-align: center; - text-decoration: none; -} -#invitation a:hover { - background-color: #f78b36; } @@ -333,3 +327,200 @@ img { page-break-after: avoid; } } + +// START OF MY CSS + +// the box shadows on the invitation using pseudo elements. +.event-invitation { + background-color: #fff; + display: block; + width: 90%; + margin: 0 auto; + padding: 27px 0; + @include box-shadow(inset -8px 8px 35px -16px rgba(144, 144, 144, 0.75)); + background-image: url(../../img/invitation-bg.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; + @include tablet-portrait-and-up { + bottom: 0; + left: 0; + padding: 27px 129px 29px 29px; + position: absolute; + width: 579px; + } + &:before, &:after { + @include tablet-portrait-and-up { + z-index: -1; + position: absolute; + content: ""; + bottom: 15px; + left: -16px; + width: 30%; + top: 6px; + max-width:300px; + background: rgba(0, 0, 0, 0.6); + @include box-shadow(3px -7px 15px rgba(0, 0, 0, 0.6)); + @include transform(rotate(4deg)); + } + } + + &:after { + @include tablet-portrait-and-up { + right: 3px; + left: auto; + top: 1%; + height: 96%; + width: 50%; + @include transform(rotate(1.5deg)); + @include box-shadow(9px 0px 5px rgba(0, 0, 0, 0.4)); + } + } + + .inner-content { + width: 90%; + margin: 0 auto; + max-width: 600px; + @include tablet-portrait-and-up { + max-width: none; + margin: 0; + width: auto; + } + } + + h1 { + margin: 0; + color: #3a3a3a; + } + + p { + line-height: 20px; + font-size: 12px; + margin: 6px 0 18px; + color: #383838; + } + + a { + display: block; + margin: 20px auto; + font-family: "Helvetica Neue", "Helvetica", "Arial"; + background: rgba(59,59,59,1); + background: -moz-linear-gradient(top, rgba(59,59,59,1) 0%, rgba(49,49,49,1) 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(59,59,59,1)), color-stop(100%, rgba(49,49,49,1))); + background: -webkit-linear-gradient(top, rgba(59,59,59,1) 0%, rgba(49,49,49,1) 100%); + background: -o-linear-gradient(top, rgba(59,59,59,1) 0%, rgba(49,49,49,1) 100%); + background: -ms-linear-gradient(top, rgba(59,59,59,1) 0%, rgba(49,49,49,1) 100%); + background: linear-gradient(to bottom, rgba(59,59,59,1) 0%, rgba(49,49,49,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#313131', GradientType=0 ); + &:hover { + background: rgba(247,151,61,1); + background: -moz-linear-gradient(top, rgba(247,151,61,1) 0%, rgba(246,133,51,1) 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247,151,61,1)), color-stop(100%, rgba(246,133,51,1))); + background: -webkit-linear-gradient(top, rgba(247,151,61,1) 0%, rgba(246,133,51,1) 100%); + background: -o-linear-gradient(top, rgba(247,151,61,1) 0%, rgba(246,133,51,1) 100%); + background: -ms-linear-gradient(top, rgba(247,151,61,1) 0%, rgba(246,133,51,1) 100%); + background: linear-gradient(to bottom, rgba(247,151,61,1) 0%, rgba(246,133,51,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7973d', endColorstr='#f68533', GradientType=0 ); + } + @include tablet-portrait-and-up { + display: inline-block; + margin-right: 20px; + padding: 15px; + text-align: center; + } + } +} + +.event-details { + img { + z-index: -1; + max-width: 292px; + margin: 3em auto; + display: block; + @include tablet-portrait-and-up { + position: absolute; + } + } + .bg-img-right { + display: none; + @include tablet-portrait-and-up { + right: 0; + bottom: 7%; + z-index: -2; + display: block; + } + } + + .bg-img-bottom { + display: none; + @include tablet-portrait-and-up { + bottom: 0; + right: 13%; + z-index: -2; + display: block; + margin: 0; + } + } +} + +// modal +.modal { + position: fixed; + top: 50%; + left: 50%; + width: 40%; + max-width: 500px; + min-width: 320px; + height: auto; + z-index: 999; + visibility: hidden; + @include transform(translateX(-50%) translateY(-50%)); +} + +.overlay { + position: fixed; + width: 100%; + height: 100%; + visibility: hidden; + top: 0; + left: 0; + z-index: 998; + opacity: 0; + background: rgba(0, 0, 0, 0.8); + @include transition(0.3s); +} + +.modal-show { + visibility: visible; + opacity: 1; +} + +.modal-content { + background-color: #f4f3f3; + padding: 20px; + border-left: 6px solid #f7933a; + position: relative; + color: #383838; +} + +.modal-close { + background-color: #f7933a; + color: #fff; + text-align: center; + font-weight: bold; + height: 25px; + width: 29px; + padding-top: 4px; + border-radius: 15px; + position: absolute; + top: -14px; + right: -14px; + cursor: pointer; + + &:hover { + background-color: #3b3b3b; + } +} + +.rsvp-no-copy { + display: none; +} \ No newline at end of file diff --git a/www/css/mixins.scss b/www/css/mixins.scss new file mode 100644 index 0000000..37214c3 --- /dev/null +++ b/www/css/mixins.scss @@ -0,0 +1,33 @@ +// box shadow mixin +@mixin box-shadow($var...){ + -webkit-box-shadow: $var; + -moz-box-shadow: $var; + -ms-box-shadow: $var; + -o-box-shadow: $var; + box-shadow: $var; +} + +// transform mixin +@mixin transform($var...){ + -webkit-transform: $var; + -moz-transform: $var; + -ms-transform: $var; + -o-transform: $var; + transform: $var; +} + +// transition mixin +@mixin transition($var...){ + -webkit-transition: $var; + -moz-transition: $var; + -ms-transition: $var; + -o-transition: $var; + transition: $var; +} + +// Everything above and including the portrait width of the tablet +@mixin tablet-portrait-and-up { + @media only screen and (min-width : $tablet-portrait-width) { + @content; + } +} \ No newline at end of file diff --git a/www/css/normalize.css b/www/css/normalize.scss similarity index 100% rename from www/css/normalize.css rename to www/css/normalize.scss diff --git a/www/css/variables.scss b/www/css/variables.scss new file mode 100644 index 0000000..3e02115 --- /dev/null +++ b/www/css/variables.scss @@ -0,0 +1 @@ +$tablet-portrait-width: 50em; // 800px \ No newline at end of file diff --git a/www/doc/TOC.md b/www/doc/TOC.md deleted file mode 100755 index da08ad0..0000000 --- a/www/doc/TOC.md +++ /dev/null @@ -1,36 +0,0 @@ -[HTML5 Boilerplate homepage](http://html5boilerplate.com) - -# HTML5 Boilerplate documentation: - -## Getting started - -* [Usage](usage.md) — Overview of the project contents. -* [FAQ](faq.md) — Frequently asked questions, along with their answers. - -## The core of HTML5 Boilerplate - -* [HTML](html.md) — A guide to the default HTML. -* [CSS](css.md) — A guide to the default CSS. -* [JavaScript](js.md) — A guide to the default JavaScript. -* [.htaccess](htaccess.md) — All about the Apache web server config (also see - our [alternative server configs](https://github.com/h5bp/server-configs)). -* [crossdomain.xml](crossdomain.md) — An introduction to making use of - crossdomain requests. -* [Everything else](misc.md). - -## Development - -* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further with - the boilerplate. - -## Related projects - -HTML5 Boilerplate has several related projects to help improve the performance -of your site/app in various production environments. - -* [Server configs](https://github.com/h5bp/server-configs) — Configs for - non-Apache servers. -* [Node build script](https://github.com/h5bp/node-build-script) — A - feature-rich [grunt](https://github.com/cowboy/grunt) plugin. -* [Ant build script](https://github.com/h5bp/ant-build-script) — The original - HTML5 Boilerplate build script. diff --git a/www/doc/crossdomain.md b/www/doc/crossdomain.md deleted file mode 100755 index b5a79de..0000000 --- a/www/doc/crossdomain.md +++ /dev/null @@ -1,21 +0,0 @@ -[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation -table of contents](TOC.md) - -# crossdomain.xml - -A cross-domain policy file is an XML document that grants a web client—such as -Adobe Flash Player, Adobe Reader, etc., permission to handle data across -multiple domains. When a client hosts content from a particular source domain -and that content makes requests directed towards a domain other than its own, -the remote domain would need to host a cross-domain policy file that grants -access to the source domain, allowing the client to continue with the -transaction. Policy files grant read access to data, permit a client to include -custom headers in cross-domain requests, and are also used with sockets to -grant permissions for socket-based connections. - -For full details, check out Adobe's article about the [cross-domain policy file -specification](http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html) - -Read the [Cross-domain policy file -specification](http://learn.adobe.com/wiki/download/attachments/64389123/CrossDomain_PolicyFile_Specification.pdf?version=1) -- (PDF, 129 KB) diff --git a/www/doc/css.md b/www/doc/css.md deleted file mode 100755 index 2d04f91..0000000 --- a/www/doc/css.md +++ /dev/null @@ -1,135 +0,0 @@ -[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation -table of contents](TOC.md) - -# The CSS - -The HTML5 Boilerplate starting CSS includes: - -* [Normalize.css](https://github.com/necolas/normalize.css). -* Useful HTML5 Boilerplate defaults. -* Common helpers. -* Placeholder media queries. -* Print styles. - -This starting CSS does not rely on the presence of conditional classnames, -conditional style sheets, or Modernizr. It is ready to use whatever your -development preferences happen to be. - - -## Normalize.css - -Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains -extensive inline documentation. Please refer to the [Normalize.css -project](http://necolas.github.com/normalize.css/) for more information. - - -## HTML5 Boilerplate defaults - -This project includes a handful of base styles that build upon Normalize.css. -These include: - -* Basic typography settings to provide improved text readability by default. -* Protection against unwanted `text-shadow` during text highlighting. -* Tweaks to default image alignment, fieldsets, and textareas. -* A pretty Chrome Frame prompt. - -You are free to modify or add to these base styles as your project requires. - - -## Common helpers - -#### `.ir` - -Add the `.ir` class to any element you are applying image-replacement to. When -replacing an element's content with an image, make sure to also set a specific -`background-image: url(pathtoimage.png);`, `width`, and `height` so that your -replacement image appears. - -#### `.hidden` - -Add the `.hidden` class to any elements that you want to hide from all -presentations, including screen readers. It could be an element that will be -populated later with JavaScript or an element you will hide with JavaScript. Do -not use this for SEO keyword stuffing. That is just not cool. - -#### `.visuallyhidden` - -Add the `.visuallyhidden` class to hide text from browsers but make it -available for screen readers. You can use this to hide text that is specific to -screen readers but that other users should not see. [About invisible -content](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding -content for -accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility), -[HTML5 Boilerplate -issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/). - -#### `.invisible` - -Add the `.invisible` class to any element you want to hide without affecting -layout. When you use `display: none` an element is effectively removed from the -layout. But in some cases you want the element to simply be invisible while -remaining in the flow and not affecting the positioning of surrounding -content. - -#### `.clearfix` - -Adding `.clearfix` to an element will ensure that it always fully contains its -floated children. There have been many variants of the clearfix hack over the -years, and there are other hacks that can also help you to contain floated -children, but the HTML5 Boilerplate currently uses the [micro -clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). - - -## Media Queries - -The boilerplate makes it easy to get started with a "Mobile First" and -[Responsive Web -Design](http://www.alistapart.com/articles/responsive-web-design/) approach to -development. But it's worth remembering that there are [no silver -bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). - -We include a placeholder Media Queries to build up your mobile styles for wider -viewports and high-resolution displays. It's recommended that you adapt these -Media Queries based on the content of your site rather than mirroring the fixed -dimensions of specific devices. - -If you do not want to take a "Mobile First" approach, you can simply edit or -remove these placeholder Media Queries. One possibility would be to work from -wide viewports down and use `max-width` MQs instead, e.g., `@media only screen -and (max-width: 480px)`. - -Take a look into the [Mobile -Boilerplate](https://github.com/h5bp/mobile-boilerplate) for features that are -useful when developing mobile wep apps. - - -## Print styles - -* Print styles are inlined to [reduce the number of page - requests](http://www.phpied.com/delay-loading-your-print-css/). -* We strip all background colors and change the font color to dark gray and - remove text-shadow. This is meant to help save printer ink. -* Anchors do not need colors to indicate they are linked. They are underlined - to indicate so. -* Anchors and Abbreviations are expanded to indicate where users reading the - printed page can refer to. -* But we do not want to show link text for image replaced elements (given that - they are primarily images). - -### Paged media styles - -* Paged media is supported only in a [few - browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules). -* Paged media support means browsers would know how to interpret instructions - on breaking content into pages and on orphans/widows. -* We use `page-break-inside: avoid;` to prevent an image and table row from - being split into two different pages, so use the same `page-break-inside: - avoid;` for that as well. -* Headings should always appear with the text they are titles for. So, we - ensure headings never appear in a different page than the text they describe - by using `page-break-after: avoid;`. -* We also apply a default margin for the page specified in `cm`. -* We do not want [orphans and - widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages - you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal - number of words that every line should contain. diff --git a/www/doc/extend.md b/www/doc/extend.md deleted file mode 100755 index 447459c..0000000 --- a/www/doc/extend.md +++ /dev/null @@ -1,507 +0,0 @@ -[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation -table of contents](TOC.md) - -# Extend and customise HTML5 Boilerplate - -Here is some useful advice for how you can make your project with HTML5 -Boilerplate even better. We don't want to include it all by default, as not -everything fits with everyone's needs. - - -## DNS prefetching - -In short, DNS Prefetching is a method of informing the browser of domain names -referenced on a site so that the client can resolve the DNS for those hosts, -cache them, and when it comes time to use them, have a faster turn around on -the request. - -### Implicit prefetches - -There is a lot of prefetching done for you automatically by the browser. When -the browser encounters an anchor in your html that does not share the same -domain name as the current location the browser requests, from the client OS, -the IP address for this new domain. The client first checks its cache and -then, lacking a cached copy, makes a request from a DNS server. These requests -happen in the background and are not meant to block the rendering of the -page. - -The goal of this is that when the foreign IP address is finally needed it will -already be in the client cache and will not block the loading of the foreign -content. Less requests result in faster page load times. The perception of this -is increased on a mobile platform where DNS latency can be greater. - -#### Disable implicit prefetching - -```html - -``` - -Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still -prefetch any explicit dns-prefetch links. - -**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM -FOREIGN DOMAINS. - -### Explicit prefetches - -Typically the browser only scans the HTML for foreign domains. If you have -resources that are outside of your HTML (a javascript request to a remote -server or a CDN that hosts content that may not be present on every page of -your site, for example) then you can queue up a domain name to be prefetched. - -```html - - -``` - -You can use as many of these as you need, but it's best if they are all -immediately after the [Meta -Charset](https://developer.mozilla.org/en/HTML/Element/meta#attr-charset) -element (which should go right at the top of the `head`), so the browser can -act on them ASAP. - -#### Common Prefetch Links - -Amazon S3: - -```html - -``` - -Google APIs: - -```html - -``` - -Microsoft Ajax Content Delivery Network: - -```html - - -``` - -### Browser support for DNS prefetching - -Chrome, Firefox 3.5+, Safari 5+, Opera (Unknown), IE 9 (called "Pre-resolution" -on blogs.msdn.com) - -### Further reading about DNS prefetching - -* https://developer.mozilla.org/En/Controlling_DNS_prefetching -* http://dev.chromium.org/developers/design-documents/dns-prefetching -* http://www.apple.com/safari/whats-new.html -* http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx -* http://dayofjs.com/videos/22158462/web-browsers_alex-russel - - -## Search - -### Direct search spiders to your sitemap - -[Learn how to make a sitemap](http://www.sitemaps.org/protocol.php) - -```html - -``` - -### Hide pages from search engines - -According to Heather Champ, former community manager at Flickr, you should not -allow search engines to index your "Contact Us" or "Complaints" page if you -value your sanity. This is an HTML-centric way of achieving that. - -```html - -``` - -**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES. - -### Firefox and IE Search Plugins - -Sites with in-site search functionality should be strongly considered for a -browser search plugin. A "search plugin" is an XML file which defines how your -plugin behaves in the browser. [How to make a browser search -plugin](http://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin). - -```html - -``` - - -## Internet Explorer - -### Prompt users to switch to "Desktop Mode" in IE10 Metro - -IE10 does not support plugins, such as Flash, in Metro mode. If your site -requires plugins, you can let users know that via the X-UA-Compatible meta -element, which will prompt them to switch to Desktop Mode. - -```html - -``` - -Here's what it looks like alongside H5BP's default X-UA-Compatible values: - -```html - -``` - -You can find more information in [Microsoft's IEBlog post about prompting for -plugin use in IE10 Metro -Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx). - -### IE Pinned Sites (IE9+) - -Enabling your application for pinning will allow IE9 users to add it to their -Windows Taskbar and Start Menu. This comes with a range of new tools that you -can easily configure with the elements below. See more [documentation on IE9 -Pinned Sites](http://msdn.microsoft.com/en-us/library/gg131029.aspx). - -### Name the Pinned Site for Windows - -Without this rule, Windows will use the page title as the name for your -application. - -```html - -``` - -### Give your Pinned Site a tooltip - -You know — a tooltip. A little textbox that appears when the user holds their -mouse over your Pinned Site's icon. - -```html - -``` - -### Set a default page for your Pinned Site - -If the site should go to a specific URL when it is pinned (such as the -homepage), enter it here. One idea is to send it to a special URL so you can -track the number of pinned users, like so: -`http://www.example.com/index.html?pinned=true` - -```html - -``` - -### Recolor IE's controls manually for a Pinned Site - -IE9+ will automatically use the overall color of your Pinned Site's favicon to -shade its browser buttons. UNLESS you give it another color here. Only use -named colors (`red`) or hex colors (`#ff0000`). - -```html - -``` - -### Manually set the window size of a Pinned Site - -If the site should open at a certain window size once pinned, you can specify -the dimensions here. It only supports static pixel dimensions. 800x600 -minimum. - -```html - -``` - -### Jump List "Tasks" for Pinned Sites - -Add Jump List Tasks that will appear when the Pinned Site's icon gets a -right-click. Each Task goes to the specified URL, and gets its own mini icon -(essentially a favicon, a 16x16 .ICO). You can add as many of these as you -need. - -```html - - -``` - -### (Windows 8) High quality visuals for Pinned Sites - -Windows 8 adds the ability for you to provide a PNG tile image and specify the -tile's background color. [Full details on the IE -blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). - -* Create a 144x144 image of your site icon, filling all of the canvas, and - using a transparent background. -* Save this image as a 32-bit PNG and optimize it without reducing - colour-depth. It can be named whatever you want (e.g. `metro-tile.png`). -* To reference the tile and its color, add the HTML `meta` elements described - in the IE Blog post. - -### (Windows 8) Badges for Pinned Sites - -IE10 will poll an XML document for badge information to display on your app's -tile in the Start screen. The user will be able to receive these badge updates -even when your app isn't actively running. The badge's value can be a number, -or one of a predefined list of glyphs. - -* [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx) -* [Available badge values](http://msdn.microsoft.com/en-us/library/ie/br212849.aspx) - -```html - -``` - -### Suppress IE6 image toolbar - -Kill IE6's pop-up-on-mouseover toolbar for images that can interfere with -certain designs and be pretty distracting in general. - -```html - -``` - - -## Social Networks - -### Facebook Open Graph data - -You can control the information that Facebook and others display when users -share your site. Below are just the most basic data points you might need. For -specific content types (including "website"), see [Facebook's built-in Open -Graph content -templates](https://developers.facebook.com/docs/opengraph/objects/builtin/). -Take full advantage of Facebook's support for complex data and activity by -following the [Open Graph -tutorial](https://developers.facebook.com/docs/opengraph/tutorial/). - -```html - - - -``` - -### Twitter Cards - -Twitter provides a snippet specification that serves a similar purpose to Open -Graph. In fact, Twitter will use Open Graph when Cards is not available. Note -that, as of this writing, Twitter requires that app developers activate Cards -on a per-domain basis. You can read more about the various snippet formats -and application process in the [official Twitter Cards -documentation](https://dev.twitter.com/docs/cards). - -```html - - - - - - - -``` - - -## URLs - -### Canonical URL - -Signal to search engines and others "Use this URL for this page!" Useful when -parameters after a `#` or `?` is used to control the display state of a page. -`http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as -the cleaner, more accurate `http://www.example.com/cart.html`. - -```html - -``` - -### Official shortlink - -Signal to the world "This is the shortened URL to use this page!" Poorly -supported at this time. Learn more by reading the [article about shortlinks on -the Microformats wiki](http://microformats.org/wiki/rel-shortlink). - -```html - -``` - - -## News Feeds - -### RSS - -Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from -scratch](http://www.rssboard.org/rss-specification)? - -```html - -``` - -### Atom - -Atom is similar to RSS, and you might prefer to use it instead of or in -addition to it. [See what Atom's all -about](http://www.atomenabled.org/developers/syndication/). - -```html - -``` - -### Pingbacks - -Your server may be notified when another site links to yours. The href -attribute should contain the location of your pingback service. - -```html - -``` - -* High-level explanation: http://codex.wordpress.org/Introduction_to_Blogging#Pingbacks -* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 -* PHP pingback service: http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ - - -## App Stores - -### Install a Chrome Web Store app - -Users can install a Chrome app directly from your website, as long as the app -and site have been associated via Google's Webmaster Tools. Read more on -[Chrome Web Store's Inline Installation -docs](https://developers.google.com/chrome/web-store/docs/inline_installation). - -```html - -``` - -### Smart App Banners in iOS 6 Safari - -Stop bothering everyone with gross modals advertising your entry in the App Store. -This bit of code will unintrusively allow the user the option to download your iOS -app, or open it with some data about the user's current state on the website. - -```html - -``` - -## Google Analytics augments - -### More tracking settings - -The [optimized Google Analytics -snippet](http://mathiasbynens.be/notes/async-analytics-snippet) included with -HTML5 Boilerplate includes something like this: - -```js -var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']]; -``` - -In case you need more settings, just extend the array literal instead of -[`.push()`ing to the -array](http://mathiasbynens.be/notes/async-analytics-snippet#dont-push-it) -afterwards: - -```js -var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview'], ['_setAllowAnchor', true]]; -``` - -### Anonymize IP addresses - -In some countries, no personal data may be transferred outside jurisdictions -that do not have similarly strict laws (i.e. from Germany to outside the EU). -Thus a webmaster using the Google Analytics script may have to ensure that no -personal (trackable) data is transferred to the US. You can do that with [the -`_gat.anonymizeIp` -option](http://code.google.com/apis/analytics/docs/gaJS/gaJSApi_gat.html#_gat._anonymizeIp). -In use it looks like this: - -```js -var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_gat._anonymizeIp'], ['_trackPageview']]; -``` - -### Track jQuery AJAX requests in Google Analytics - -An article by @JangoSteve explains how to [track jQuery AJAX requests in Google -Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/). - -Add this to `plugins.js`: - -```js -/* - * Log all jQuery AJAX requests to Google Analytics - * See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ - */ -if (typeof _gaq !== "undefined" && _gaq !== null) { - $(document).ajaxSend(function(event, xhr, settings){ - _gaq.push(['_trackPageview', settings.url]); - }); -} -``` - -### Track JavaScript errors in Google Analytics - -Add this function after `_gaq` is defined: - -```js -(function(window){ - var undefined, - link = function (href) { - var a = window.document.createElement('a'); - a.href = href; - return a; - }; - window.onerror = function (message, file, row) { - var host = link(file).hostname; - _gaq.push([ - '_trackEvent', - (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', - message, file + ' LINE: ' + row, undefined, undefined, true - ]); - }; -}(window)); -``` - -### Track page scroll - -Add this function after `_gaq` is defined: - -```js -$(function(){ - var isDuplicateScrollEvent, - scrollTimeStart = new Date, - $window = $(window), - $document = $(document), - scrollPercent; - - $window.scroll(function() { - scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height()); - if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% - isDuplicateScrollEvent = 1; - _gaq.push(['_trackEvent', 'scroll', - 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's', - undefined, undefined, true - ]); - } - }); -}); -``` - - -## Miscellaneous - -* Use [HTML5 - polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). - -* Use [Microformats](http://microformats.org/wiki/Main_Page) (via - [microdata](http://microformats.org/wiki/microdata)) for optimum search - results - [visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html). - -* If you're building a web app you may want [native style momentum scrolling in - iOS5](http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/) using - `-webkit-overflow-scrolling: touch`. - -* Avoid development/stage websites "leaking" into SERPs (search engine results - page) by [implementing X-Robots-tag - headers](https://github.com/h5bp/html5-boilerplate/issues/804). - -* Screen readers currently have less-than-stellar support for HTML5 but the JS - script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can - help increase accessibility by adding ARIA roles to HTML5 elements. - - -*Many thanks to [Brian Blakely](https://github.com/brianblakely) for -contributing much of this information.* diff --git a/www/doc/faq.md b/www/doc/faq.md deleted file mode 100755 index 3e967b2..0000000 --- a/www/doc/faq.md +++ /dev/null @@ -1,77 +0,0 @@ -[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation -table of contents](TOC.md) - -# Frequently asked questions - -### Why is the URL for jQuery without "http"? - -This is an intentional use of [protocol-relative -URLs](http://paulirish.com/2010/the-protocol-relative-url/) - -**N.B.** Using a protocol-relative URL for files that exist on a CDN is -problematic when you try to view your local files directly in the browser. The -browser will attempt to fetch the file from your local file system. We -recommend that you use a local server to test your pages (or Dropbox). This can -be done using Python by running `python -m SimpleHTTPServer` from your local -directory, using Ruby by installing and running -[asdf](https://rubygems.org/gems/asdf), and by installing any one of XAMPP, -MAMP, or WAMP. - - -### Why don't you automatically load the latest version of jQuery from the Google CDN? - -1. The latest version of jQuery may not be compatible with the existing - plugins/code on the site. Version updating should be an intentional - decision. -2. The latest version has a very short `max-age=3600` compares to the specific - version of `max-age=31536000`, which means you won't get the benefits of - long-term caching. - - -### Why is the Google Analytics code at the bottom? Google recommends it be placed the `head`. - -The advantage to placing it in the `head` is that you will track a user's -pageview even if they leave the page before it has been fully loaded. However, -putting the code at the bottom keeps all the scripts together and reinforces -that scripts at the bottom are the right move. - - -### How can I integrate [Twitter Bootstrap](http://twitter.github.com/bootstrap/) with HTML5 Boilerplate? - -You can use [Initializr](http://initializr.com) to create a custom build that -includes HTML5 Boilerplate with Twitter Bootstrap. - -Read more about how [HTML5 Boilerplate and Twitter Bootstrap complement each -other](http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher). - - -### How do I prevent phone numbers looking twice as large and having a Skype highlight? - -If this is occurring, it is because a user has the Skype browser extension -installed. - -Use the following CSS to prevent Skype from formatting the numbers on your -page: - -```css -span.skype_pnh_container { - display: none !important; -} - -span.skype_pnh_print_container { - display: inline !important; -} -``` - - -### Do I need to upgrade my sites each time a new version of HTML5 Boilerplate is released? - -No. You don't normally replace the foundations of a house once it has been -built. There is nothing stopping you from trying to work in the latest changes -but you'll have to assess the costs/benefits of doing so. - - -### Where can I get help for support questions? - -Please ask for help on -[StackOverflow](http://stackoverflow.com/questions/tagged/html5boilerplate). diff --git a/www/doc/htaccess.md b/www/doc/htaccess.md deleted file mode 100755 index 71542bf..0000000 --- a/www/doc/htaccess.md +++ /dev/null @@ -1,333 +0,0 @@ -[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation -table of contents](TOC.md) - -# .htaccess - -In Apache HTTP server, `.htaccess` (hypertext access) is the configuration file -that allows for web server configuration. HTML5 Boilerplate includes a number -of best practice server rules for making web pages fast and secure, these rules -can be applied in the `.htaccess` file. - -**First, you'll want to have these modules enabled for optimum performance:** - -* `mod_setenvif.c` (setenvif_module) -* `mod_headers.c` (headers_module) -* `mod_deflate.c` (deflate_module) -* `mod_filter.c` (filter_module) -* `mod_expires.c` (expires_module) -* `mod_rewrite.c` (rewrite_module) - - -## On Windows - -You've got a couple of options that depend on how you installed Apache. - -1. **WampServer**. This is by far the simplest option. If you have installed - WampServer just click on the icon in the task bar, hover over the Apache - section in the menu that comes up and then hover over the modules section. - You will be presented with a list of modules. Simply click on a module name - to enable it (or disable it if it is already enabled). A check mark next to - a module indicates that it is enabled. WampServer will automatically restart - the Apache service after you enable a module. - -2. **Manually editing `httpd.conf`**. This assumes that you have manually - installed Apache. You will need to locate the `httpd.conf` file which is - normally in the `conf` folder in the folder where you installed Apache (for - example `C:\apache\conf\httpd.conf`). Open up this file in a text editor. Near - the top (after a bunch of comments) you will see a long list of modules. Check - to make sure that the modules listed above are not commented out. If they - are, go ahead and uncomment them and restart Apache. - -That's it, you're done! - - -## On Linux - -These instructions should work on any distribution where `apt-get` has been -used to install Apache. - -1. Open up a terminal and type the following command. Enter your password when - prompted. - - `sudo a2enmod setenvif headers deflate filter expires rewrite include` - -1. Restart apache by using the following command so the new configuration takes - effect. - - `sudo /etc/init.d/apache2 restart` - -That's it, you're done! - - -## On Mac - -1. **MAMP PRO**. On the main screen, click the `Apache` tab and ensure that all - the required modules listed above are 'checked', indicating they are - enabled. - -2. **MAMP**. Locate the `httpd.conf` file, which is typically found in - `/Applications/MAMP/conf/apache/httpd.conf`. Open the file in a text editor - and uncomment all of the required modules listed above. Once you have done so, - reset MAMP. - -3. **XAMPP**. Follow the same steps as for MAMP, but look for `httpd.conf` in - `/Applications/XAMPP/etc/httpd.conf`. - - -## Security - -Do not turn off your ServerSignature (i.e., the `Server:` HTTP header). Serious -attackers can use other kinds of fingerprinting methods to figure out the -actual server and components running behind a port. Instead, as a site owner, -you should keep track of what's listening on ports on hosts that you control. -Run a periodic scanner to make sure nothing suspicious is running on a host you -control, and use the ServerSignature to determine if this is the web server and -version that you expect. - - -## Performance - -### Configure ETags - -```apache -FileETag None -``` - -Entity tags (ETags) is a mechanism that web servers and browsers use to -determine whether the component in the browser's cache matches the one on the -origin server. (An "entity" is another word for "component": images, scripts, -stylesheets, etc.) ETags were added to provide a mechanism for validating -entities that is more flexible than the last-modified date. An `ETag` is a -string that uniquely identifies a specific version of a component. The only -format constraints are that the string be quoted. The origin server specifies -the component's `ETag` using the `ETag` response header. - -```http -HTTP/1.1 200 OK -Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT -ETag: "10c24bc-4ab-457e1c1f" -Content-Length: 12195 -``` - -Later, if the browser has to validate a component, it uses the `If-None-Match` -header to pass the `ETag` back to the origin server. If the ETags match, a 304 -status code is returned reducing the response by 12195 bytes for this -example. - -```http -GET /i/yahoo.gif HTTP/1.1 -Host: us.yimg.com -If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT -If-None-Match: "10c24bc-4ab-457e1c1f" -HTTP/1.1 304 Not Modified -``` - -The problem with ETags is that they typically are constructed using attributes -that make them unique to a specific server hosting a site. ETags won't match -when a browser gets the original component from one server and later tries to -validate that component on a different server, a situation that is all too -common on web sites that use a cluster of servers to handle requests. By -default, both Apache and IIS embed data in the ETag that dramatically reduces -the odds of the validity test succeeding on web sites with multiple servers. - -The ETag format for Apache 1.3 and 2.x is inode-size-timestamp. Although a -given file may reside in the same directory across multiple servers, and have -the same file size, permissions, timestamp, etc., its inode is different from -one server to the next. - -IIS 5.0 and 6.0 have a similar issue with ETags. The format for ETags on IIS is -Filetimestamp:ChangeNumber. A ChangeNumber is a counter used to track -configuration changes to IIS. It's unlikely that the ChangeNumber is the same -across all IIS servers behind a web site. - -The end result is ETags generated by Apache and IIS for the exact same -component won't match from one server to another. If the ETags don't match, the -user doesn't receive the small, fast 304 response that ETags were designed for; -instead, they'll get a normal 200 response along with all the data for the -component. If you host your web site on just one server, this isn't a problem. -But if you have multiple servers hosting your web site, and you're using Apache -or IIS with the default ETag configuration, your users are getting slower -pages, your servers have a higher load, you're consuming greater bandwidth, and -proxies aren't caching your content efficiently. Even if your components have a -far future Expires header, a conditional GET request is still made whenever the -user hits Reload or Refresh. - -If you're not taking advantage of the flexible validation model that ETags -provide, it's better to just remove the ETag altogether. The Last-Modified -header validates based on the component's timestamp. And removing the ETag -reduces the size of the HTTP headers in both the response and subsequent -requests. This Microsoft Support article describes how to remove ETags. In -Apache, this is done by simply adding the above line to your Apache -configuration file. - - -### Gzip Components - -Compression reduces response times by reducing the size of the HTTP response. - -Starting with HTTP/1.1, web clients indicate support for compression with the -Accept-Encoding header in the HTTP request. - -``` -Accept-Encoding: gzip, deflate -``` - -If the web server sees this header in the request, it may compress the response -using one of the methods listed by the client. The web server notifies the web -client of this via the Content-Encoding header in the response. - -``` -Content-Encoding: gzip -``` - -Gzip is the most popular and effective compression method at this time. It was -developed by the GNU project and standardized by RFC 1952. The only other -compression format you're likely to see is deflate, but it's less effective and -less popular. - -Gzipping generally reduces the response size by about 70%. Approximately 90% of -today's Internet traffic travels through browsers that claim to support gzip. -If you use Apache, the module configuring gzip depends on your version: Apache -1.3 uses `mod_gzip` while Apache 2.x uses `mod_deflate`. - -There are known issues with browsers and proxies that may cause a mismatch in -what the browser expects and what it receives with regard to compressed -content. Fortunately, these edge cases are dwindling as the use of older -browsers drops off. The Apache modules help out by adding appropriate Vary -response headers automatically. - -Servers choose what to gzip based on file type, but are typically too limited -in what they decide to compress. Most web sites gzip their HTML documents. It's -also worthwhile to gzip your scripts and stylesheets, but many web sites miss -this opportunity. In fact, it's worthwhile to compress any text response -including XML and JSON. Image and PDF files should not be gzipped because they -are already compressed. Trying to gzip them not only wastes CPU but can -potentially increase file sizes. - -Gzipping as many appropriate file types as possible is an easy way to reduce -page weight and accelerate the user experience. - - -### Cache busting - -A first-time visitor to your page may have to make several HTTP requests, but -by using the Expires header you make those components cacheable. This avoids -unnecessary HTTP requests on subsequent page views. Expires headers are most -often used with images, but they should be used on all components including -scripts, stylesheets, etc. - -Traditionally, if you use a far future Expires header you have to change the -component's filename whenever the component changes. - -The H5BP `.htaccess` has built-in filename cache busting. To use it, uncomment -the relevant lines in the `.htaccess` file. - -Doing so will route all requests for `/path/filename.20120101.ext` to -`/path/filename.ext`. To use this, just add a time-stamp number (or your own -numbered versioning system) into your resource filenames in your HTML source -whenever you update those resources. - -#### Example: - -```html - - - - -``` - -**N.B. You do not have to rename the resource on the filesystem.** All you have -to do is add the timestamp number to the filename in your HTML source. The -`.htaccess` directive will serve up the proper file. - -Traditional cache busting involved adding a query string to the end of your -JavaScript or CSS filename whenever you updated it. - -```html - -``` - -However, as [Steve Souders](http://stevesouders.com/) explains in [*Revving -Filenames: don’t use -querystring*](http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/), -the query string approach is not always reliable for clients behind a Squid -Proxy Server. - - -## Trailing slash redirects - -Trailing slash redirects can be done by adding one of the options below in `.htaccess`. - -### Option 1 -Rewrite `domain.com/foo` -> `domain.com/foo/`. - -```apache -RewriteCond %{REQUEST_FILENAME} !-f -RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$ -RewriteRule ^(.*)$ $1/ [R=301,L] -``` - -### Option 2 -Rewrite `domain.com/foo/` -> `domain.com/foo` - -```apache -RewriteRule ^(.*)/$ $1 [R=301,L] -``` - -Here are some tips to show you how to integrate the rewrite rules with -different CMS tools. There are four areas you need to look out for: - -### 1. Keep a backup - -If you use trailing slash redirects on an existing site, always keep a backup -of your `.htaccess` and test thoroughly on your staging server before using it on -a production server. - -### 2. Don't replace existing rules, merge - -For example, if you use CodeIgniter you may have existing URL rewrite rules like: - -```apache -RewriteCond %{REQUEST_FILENAME} !-f -RewriteCond %{REQUEST_FILENAME} !-d -RewriteRule ^(.*)$ index.php/$1 -``` - -Merge the above with H5BP rules below: - -```apache -RewriteCond %{REQUEST_FILENAME} !-f -RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$ -RewriteRule ^(.*)$ $1/ [R=301,L] -``` - -### 3. Be careful of the order - -Make sure you test thoroughly in your staging environment. For the above -example, the order is add trailing slash first, and add your existing rule -after: - -```apache -# this adds trailing slash -RewriteCond %{REQUEST_FILENAME} !-f -RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$ -RewriteRule ^(.*)$ $1/ [R=301,L] - -# this gets rid of index.php -RewriteCond %{REQUEST_FILENAME} !-f -RewriteCond %{REQUEST_FILENAME} !-d -RewriteRule ^(.*)$ index.php/$1 -``` - -### 4. Double-check `RewriteBase` path is correct - -Make sure your `RewriteBase` path points to the correct location and sits above -any rewrite rules. This usually happens to those have WordPress and ran the -auto install. For instance, if you have a site at `example.com/blog`, your -RewriteBase may look like: - -```apache -RewriteBase /blog/ -``` - -If you already have a working RewriteBase, keep that and don't remove it. diff --git a/www/doc/html.md b/www/doc/html.md deleted file mode 100755 index 5973a37..0000000 --- a/www/doc/html.md +++ /dev/null @@ -1,170 +0,0 @@ -[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation -table of contents](TOC.md) - -# The HTML - -## Conditional `html` classes - -A series of IE conditional comments apply the relevant IE-specific classes to -the `html` tag. This provides one method of specifying CSS fixes for specific -legacy versions of IE. While you may or may not choose to use this technique in -your project code, HTML5 Boilerplate's default CSS does not rely on it. - -When using the conditional classes technique, applying classes to the `html` -element has several benefits: - -* It avoids a [file blocking - issue](http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/) - discovered by Stoyan Stefanov and Markus Leptien. -* It avoids the need for an empty comment that also fixes the above issue. -* CMSes like WordPress and Drupal use the body class more heavily. This makes - integrating there a touch simpler. -* It still validates as HTML5. -* It uses the same element as Modernizr (and Dojo). That feels nice. -* It can improve the clarity of code in multi-developer teams. - - -## The `no-js` class - -Allows you to more easily explicitly add custom styles when JavaScript is -disabled (`no-js`) or enabled (`js`). More here: [Avoiding the -FOUC](http://paulirish.com/2009/avoiding-the-fouc-v3/). - - -## The order of meta tags, and `
-
-
+
+
+
+
+
Celebrate one of the most influential products of our time that for 60 years did what no other invention could do. Learn about the man behind the camera who influenced the likes of Steve Jobs and Instagram & expose yourself to instant gratification by snapping a few candid shots of your own.
- YES, I'M COMING - NO, NOT THIS TIME + +Celebrate one of the most influential products of our time that for 60 years did what no other invention could do. Learn about the man behind the camera who influenced the likes of Steve Jobs and Instagram & expose yourself to instant gratification by snapping a few candid shots of your own.
+ + YES, I’M COMING + NO, NOT THIS TIME +