Created
June 28, 2014 02:09
-
-
Save pburtchaell/bbdc9e44009cd2452e75 to your computer and use it in GitHub Desktop.
Assemble Output - June 26, 2014
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Initializing | |
| Command-line options: --verbose | |
| Reading "gruntfile.js" Gruntfile...OK | |
| Registering Gruntfile tasks. | |
| Reading package.json...OK | |
| Parsing package.json...OK | |
| Reading src/data/site.yml...OK | |
| Parsing src/data/site.yml...OK | |
| Reading bower.json...OK | |
| Parsing bower.json...OK | |
| Reading humans.txt.json...OK | |
| Parsing humans.txt.json...OK | |
| Initializing config...OK | |
| Registering "assemble" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/assemble/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/assemble/package.json...OK | |
| Loading "assemble.js" tasks...OK | |
| + assemble | |
| Registering "assemble-less" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/assemble-less/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/assemble-less/package.json...OK | |
| Loading "less.js" tasks...OK | |
| + less | |
| Registering "grunt-autoprefixer" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-autoprefixer/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-autoprefixer/package.json...OK | |
| Loading "autoprefixer.js" tasks...OK | |
| + autoprefixer | |
| Registering "grunt-contrib-clean" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-contrib-clean/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-contrib-clean/package.json...OK | |
| Loading "clean.js" tasks...OK | |
| + clean | |
| Registering "grunt-contrib-compress" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-contrib-compress/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-contrib-compress/package.json...OK | |
| Loading "compress.js" tasks...OK | |
| + compress | |
| Registering "grunt-contrib-connect" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-contrib-connect/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-contrib-connect/package.json...OK | |
| Loading "connect.js" tasks...OK | |
| + connect | |
| Registering "grunt-contrib-copy" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-contrib-copy/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-contrib-copy/package.json...OK | |
| Loading "copy.js" tasks...OK | |
| + copy | |
| Registering "grunt-contrib-less" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-contrib-less/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-contrib-less/package.json...OK | |
| Loading "less.js" tasks...OK | |
| + less | |
| Registering "grunt-contrib-uglify" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-contrib-uglify/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-contrib-uglify/package.json...OK | |
| Loading "uglify.js" tasks...OK | |
| + uglify | |
| Registering "grunt-contrib-watch" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-contrib-watch/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-contrib-watch/package.json...OK | |
| Loading "watch.js" tasks...OK | |
| + watch | |
| Registering "grunt-humans-txt" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-humans-txt/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-humans-txt/package.json...OK | |
| Loading "humans_txt.js" tasks...OK | |
| + humans_txt | |
| Registering "grunt-recess" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-recess/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-recess/package.json...OK | |
| Loading "recess.js" tasks...OK | |
| + recess | |
| Registering "grunt-robots-txt" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-robots-txt/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-robots-txt/package.json...OK | |
| Loading "robotstxt.js" tasks...OK | |
| + robotstxt | |
| Registering "grunt-sitemap" local Npm module tasks. | |
| Reading /Users/patrick/repositories/site/node_modules/grunt-sitemap/package.json...OK | |
| Parsing /Users/patrick/repositories/site/node_modules/grunt-sitemap/package.json...OK | |
| Loading "sitemap.js" tasks...OK | |
| + sitemap | |
| Loading "gruntfile.js" tasks...OK | |
| + build, default, dev, dev:css, test | |
| Running tasks: assemble | |
| Running "assemble" task | |
| Running "assemble:pages" (assemble) task | |
| Verifying property assemble.pages exists in config...OK | |
| Files: ./pages/about.hbs, ./pages/colophon.md, ./pages/commandments.md, ./pages/error.hbs, ./pages/faq.md, ./pages/index.hbs, ./pages/legal.md, ./pages/soundcloud.hbs, ./pages/styleguide.md, ./pages/work.hbs -> ./dist/development/ | |
| Options: layoutdir="./tpl/layouts", layout="default.hbs", layoutext="", partials=["./tpl/partials/**/*.{hbs,md}","./tpl/snippets/**/*.{hbs,md}"], data=["./src/data/*.{json,yml}","package.json"], assets="./dist/development/assets", ext=".html", flatten, plugins=["assemble-middleware-permalinks","assemble-middleware-anchors","assemble-middleware-wordcount"], helpers=[], collections=[{"name":"post","sortby":"date","sortorder":"descending","pages":["./posts"]}], marked={}, sitemap={"homepage":"","changefreq":"daily","priority":"0.8","robot":true}, permalinks={"structure":":basename/index.html"}, compose={"cwd":"./posts"} | |
| Assembling | |
| Steps: 18 | |
| Step 1 assembled. | |
| Calling step 2 | |
| Validating options | |
| >> >> Current engine: handlebars | |
| Reading ./package.json...OK | |
| Parsing ./package.json...OK | |
| Step 2 assembled. | |
| Calling step 3 | |
| Step 3 assembled. | |
| Calling step 4 | |
| Step 4 assembled. | |
| Calling step 5 | |
| Assembling default layout | |
| default.hbs | |
| tpl/layouts/default.hbs | |
| Reading tpl/layouts/default.hbs...OK | |
| Step 5 assembled. | |
| Calling step 6 | |
| Step 6 assembled. | |
| Calling step 7 | |
| Step 7 assembled. | |
| Calling step 8 | |
| Assembling partials | |
| Processing partials... | |
| >> Processing close-inc partial | |
| Reading ./tpl/partials/close-inc.hbs...OK | |
| >> Processing footer-inc partial | |
| Reading ./tpl/partials/footer-inc.hbs...OK | |
| >> Processing header-inc partial | |
| Reading ./tpl/partials/header-inc.hbs...OK | |
| >> Processing open-inc partial | |
| Reading ./tpl/partials/open-inc.hbs...OK | |
| >> Processing hire partial | |
| Reading ./tpl/snippets/hire.hbs...OK | |
| >> Processing kickstarter partial | |
| Reading ./tpl/snippets/kickstarter.hbs...OK | |
| >> Processing links partial | |
| Reading ./tpl/snippets/links.hbs...OK | |
| >> Processing logo-horizontal partial | |
| Reading ./tpl/snippets/logo-horizontal.hbs...OK | |
| >> Processing logo-verticle partial | |
| Reading ./tpl/snippets/logo-verticle.hbs...OK | |
| >> Processing modal partial | |
| Reading ./tpl/snippets/modal.hbs...OK | |
| >> Processing social partial | |
| Reading ./tpl/snippets/social.hbs...OK | |
| >> Processing support partial | |
| Reading ./tpl/snippets/support.hbs...OK | |
| Step 8 assembled. | |
| Calling step 9 | |
| Step 9 assembled. | |
| Calling step 10 | |
| Step 10 assembled. | |
| Calling step 11 | |
| Assembling data | |
| Processing data... | |
| Reading ./src/data/author.yml...OK | |
| Reading ./src/data/author.yml...OK | |
| Parsing ./src/data/author.yml...OK | |
| Reading ./src/data/prices.yml...OK | |
| Reading ./src/data/prices.yml...OK | |
| Parsing ./src/data/prices.yml...OK | |
| Reading ./src/data/site.yml...OK | |
| Reading ./src/data/site.yml...OK | |
| Parsing ./src/data/site.yml...OK | |
| Reading package.json...OK | |
| Reading package.json...OK | |
| Parsing package.json...OK | |
| Step 11 assembled. | |
| Calling step 12 | |
| Step 12 assembled. | |
| Calling step 13 | |
| Step 13 assembled. | |
| Calling step 14 | |
| Building pages... | |
| Reading about | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/about.hbs | |
| destFile: dist/development/about.html | |
| assets: assets | |
| Reading pages/about.hbs...OK | |
| Compiling page about | |
| Reading colophon | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/colophon.md | |
| destFile: dist/development/colophon.html | |
| assets: assets | |
| Reading pages/colophon.md...OK | |
| Compiling page colophon | |
| Reading commandments | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/commandments.md | |
| destFile: dist/development/commandments.html | |
| assets: assets | |
| Reading pages/commandments.md...OK | |
| Compiling page commandments | |
| Reading error | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/error.hbs | |
| destFile: dist/development/error.html | |
| assets: assets | |
| Reading pages/error.hbs...OK | |
| Compiling page error | |
| Reading faq | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/faq.md | |
| destFile: dist/development/faq.html | |
| assets: assets | |
| Reading pages/faq.md...OK | |
| Compiling page faq | |
| Reading index | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/index.hbs | |
| destFile: dist/development/index.html | |
| assets: assets | |
| Reading pages/index.hbs...OK | |
| Compiling page index | |
| Reading legal | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/legal.md | |
| destFile: dist/development/legal.html | |
| assets: assets | |
| Reading pages/legal.md...OK | |
| Compiling page legal | |
| Reading soundcloud | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/soundcloud.hbs | |
| destFile: dist/development/soundcloud.html | |
| assets: assets | |
| Reading pages/soundcloud.hbs...OK | |
| Compiling page soundcloud | |
| Reading styleguide | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/styleguide.md | |
| destFile: dist/development/styleguide.html | |
| assets: assets | |
| Reading pages/styleguide.md...OK | |
| Compiling page styleguide | |
| Reading work | |
| assetsPath: ./dist/development/assets | |
| DestFile: dist/development | |
| srcFile: pages/work.hbs | |
| destFile: dist/development/work.html | |
| assets: assets | |
| Reading pages/work.hbs...OK | |
| Compiling page work | |
| Information compiled | |
| Step 14 assembled. | |
| Calling step 15 | |
| Step 15 assembled. | |
| Calling step 16 | |
| Step 16 assembled. | |
| Calling step 17 | |
| Assembling pages... | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'about.html', | |
| pageName: 'about.html', | |
| pagename: 'about.html', | |
| basename: 'about', | |
| src: 'pages/about.hbs', | |
| dest: 'dist/development/about.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n<img src=/assets/img/site/patrick.jpg height=100px width=100px class=img-portrait>\n\n{{!--<figure>\n <img src=/assets/img/site/patrick-cover.jpg height=100px width=100px class=img-fill>\n <figcaption>\n <dl>\n <dt>Patrick Burtchaell</dt>\n <dd>I am a designer and student from New Orleans, Louisiana</dd>\n </dl>\n </figcaption>\n</figure>--}}\n\nMy name is Patrick Burtchaell; I am a designer and a student from New Orleans, Louisiana. I have a passion for objectifying stories and ideas and working with the people who created with them. I make things for the web and for print and, when I have time, I [write](/) about design and technology.\n\nAs I am currently a full time student, but work freelance when I can. If you want, check out my [work](/work) page.\n\nMost of the time, I am a pretty ordinary person. I say things on [Twitter]({{author.twitter}}). I post to [Dribbble]({{author.dribbble}}) and [Béhance]({{author.behance}}). My code ends up on [GitHub]({{author.github}}) most of the time. Follow me if you are weird like that.\n\nThe purpose of this website is be serve as an online repository for writings, documents, and work. The [colophon](/colophon) and [code styleguide](/styleguide) document the processess used to build it and the source can be found on [GitHub](http://github.com/pburtchaell/site).\n\nIf you have any questions or feedback, you may want to email me at [[email protected]](mailto:patrick@pburtchaell.com) —which you should definitely do since I love to talk.\n', | |
| data: | |
| { title: 'About', | |
| description: 'My name is Patrick Burtchaell; I am a designer and a student from New Orleans, Louisiana. I have a passion for objectifying stories and ideas and working with the people who created with them. I make things for the web and for print and, when I have time, I write about design and technology.', | |
| hire: false }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 0, | |
| number: 1, | |
| first: true, | |
| middle: false, | |
| next: 1, | |
| last: false } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'colophon.html', | |
| pageName: 'colophon.html', | |
| pagename: 'colophon.html', | |
| basename: 'colophon', | |
| src: 'pages/colophon.md', | |
| dest: 'dist/development/colophon.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n## Author\'s Statement\nWhen I began work on the third version of site in October of 2013, I decided I would take a lightweight and fastidious approach to the design and development. In the past, my website has been more of a storefront for my services, but it failed to tell my story. I think a website should not just be your portfolio, but rather storage of intellectual property: your ideas, your writing, your thoughts, and your memories. The internet is young compared to other methods of recording information, like books, but it will be around in some form for the rest of our lives. This website will serve the means —in a combination of ways— for me to achieve the end of recording information.\n\n## Design Notes\nBecause my site has a very clear focus on intellectual content, I wanted the design to be simple. Every property in the stylesheet and every pixel on the screen is planned out and exectuted in the most proficient manner. This design may not have the charisma of some websites, but that is the intent. My design does not have character, but rather it is transparent; the content has character. I am not trying to tell a story though pixels. I plan to do that through words.\n\n### Typography\nAs if you were reading a book, typography to feel natural. For that reason, I went with a slightly off-white background and a light grey value for all text. Links are set in a light blue that flows with the "faded" shades of my color values. Only occasionally do I style type in other colors than grey. Most other typographic elements, such as horizontal rules, are also styled in a light grey. I do not use serif typefaces on my website, because even though the design does not necessarily have a distinct character, I feel sans-serifs are more suitable.\n\n#### FF DIN\n[](http://wikipedia.org/wiki/FF_DIN)\n\nMy primary typeface for headings is _FFDIN (sometimes known as DINPRO) in the weights of bold and light. A sans-serif, FF DIN was designed in 1994 by Albert-Jan Pool in San Francisco to revive the old German DIN 1451 typeface with greater weight distribution and character sets. In 2010, FF DIN Round was also released, but I do not use it on my site.\n\n[DIN 1451](http://wikipedia.org/wiki/DIN_1451) is often used for traffic, administrative, and technical applications in Germany. It is actively defined by Deutches Institut fur Normung (DIN), the German Institute for Standardization, on the [standards sheet](http://wikipedia.org/wiki/List_of_DIN_standards#DIN_1000_to_DIN_1999) at DIN 1451-4. From 1956 to 200, DIN 1451 was used on German car number plates and the medium and condensed weights are still used on road signs throughout out Germany and other European countries; a more rare, condensed weight can be found on some older road signs from the 1980\'s.\n\nUltimately, I like the functional feel of the DIN typefaces —especially when in uppercase— and thus feel it is suitable for headings.\n\n#### Open-Sans\n[](http://wikipedia.org/wiki/Open_Sans)\n\nFF DIN is not the most readable font when smaller than 16px so I decided not to use it for the primary body font-family. Instead, I use Open-Sans Regular and Italic, humanist sans-serif designed by Steve Matteson and commissioned by Google. If you are familiar with the Droid Sans typeface, Open Sans is almost identical with the exception of wider characters and the inclusion of italic variants. As a typeface optimized for legibility across both print and web, Open-Sans was the best sans-serif choice. My typography falls back to Helvetica and Arial if either the font-files do not load or they are not supported.\n\n#### Courier\n> A letter... can be courier, which radiates dignity, prestige, and stability.\n> <cite>Howard Kettler</cite>\n\nTo style code snippets using a slightly modified version of the Github Style by Vasily Polovnyov and [_Courier_](http://wikipedia.org/wiki/Courier_(typeface), a monospaced slab-serif typeface designed by Howard Kettler. The original Courier typeface was commissioned in 1955 by IBM to resemble the output from a strike-on typewriter and was [made free](http://www.ctan.org/tex-archive/fonts/psfonts/courier) in the 1990\'s. Courier New, a bolder variant of Courier, was introduced in Windows 3.1 and used by the US State Department as their standard typeface until 2004 (when it was replaced by Times New Roman); however, I prefer the style of the original Courier.\n\n### Color & Values\nIn order to stay consistent with my personal branding, I primarily use grey values on my site.\n\nLimited to these three colors (in RGB) from my brand, I use color sparingly:\n- <span style="color:rgb(230,84,87);">Red</span> (for design): `rgb(230,84,87)`\n- <span style="color:rgb(179,255,198);">Green</span> (for video): `rgb(179,255,198)`\n- <span style="color:rgb(0,218,255);">Blue</span> (for audio): `rgb(0,218,255)`\n\nI use the following values for typography:\n- Dark Grey: `rgb(70,72,74)`\n- <span style="color:rgb(232,235,237);background:rgba(70,72,74,0.6);padding:3px;">Light Grey</span>: `rgb(232,235,237)`\n- <span style="color:rgb(0,169,198);">Links</span>: `rgb(0,169,198)`\n\nThe white background of my site is `rgb(248,248,248)`.\n\n## Development Notes\nAesthetics without functionality is art. Combine both qualities and the result is design: both aesthetics and functionality.\n\nThis idea is far more important for websites; a website with poorly written code is unacceptable. Therefore, the web adds a third quality to design: engineering —or development. Making development and design of a website are the same, these three qualities are forever tied together in a symbiotic relationship. I cannot make one decision in design without it effecting development and likewise. You could think of web design as the holy trinity. Just as the father, son and holy-spirit —they are three parts in one, aesthetics, functionality, and engineering are also three in one.\n\n### Static Site Generator\nMy site is static and generated using [Assemble](http://assemble.io/) a plugin for [Grunt](http://gruntjs.com/). I write content in either Handlebars (.hbs) or Markdown (.md). I publish my code on Github as an open-source, but contrary to many static sites, my site is not hosted with Github pages. Instead, I host my site on Amazon Web Services. With smart use of the Cloudfront CDN and S3, am easily able to load about seventy-five percent of the pages on my site in less than a second. I monitor the status of my website using [Pingdom](http://tools.pingdom.com/fpt/#!/duUCz3/pburtchaell.com).\n\n### JavaScript, Stylesheets, Images & Other Assets\nA complete list of client-side JavaScript plugins:\n- [Echo.js]() —on the article pages, images are lazy-loaded\n- [Headroom.js]() —hides the header when scrolling down\n- [Responsive-Nav]() —responsive, off-canvas navigation\n- <s>[Highlighter.js]() —syntax highlighting</s> Syntax highlighting is handled during the build of the site.\n\nWhen gzipped at the highest compression level, file sizes are:\n- styles.css: ~4.3kb\n- components.js: ~3.6kb\n- average HTML page: ~5.0kb\n- average font: ~20kb (*4 total requests = ~80kb)\n\nBy utilizing compression, caching, and a content delivery network, my average response times (as of February 2014) are:\n- New York, New York: 880ms\n- Amsterdam, Netherlands: 1.64s\n- Dallas, Texas: 681ms\n\nAs images and other binary files are lazy-loaded, I do not use small resolutions or bitrates (video only); most images are uploaded at full-size (200-300kb).\n\n### Front-End Tools\nI use Grunt as a taskrunner for my website and [Bower](http://bower.io/) for package management. To cover each plugin I use for Grunt would far beyond the scope of this document. You can find the gruntfile and a complete list of Grunt plugins in my [repository](http://github.com/pburtchaell/site-assemble/).\n\n## Build Status\n[Travis CI](https://travis-ci.org/pburtchaell/site) is used to test each commit on the master and dev (development) branches.\n\n{{!-- TODO:\n\n*Current Master Build Status*: []()\n\n*Current Developer Build Status*: []()\n\nThanks to [shields.io](http://shields.io/) for the flat badges.--}}\n', | |
| data: | |
| { published: true, | |
| highlighting: true, | |
| title: 'Colophon - v3', | |
| description: 'The colophon contains the detailed and formal notes on the design and development of the third version of my personal website, blog, and portfolio.', | |
| hire: true }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 1, | |
| number: 2, | |
| first: false, | |
| prev: 0, | |
| middle: true, | |
| next: 2, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'colophon.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'commandments.html', | |
| pageName: 'commandments.html', | |
| pagename: 'commandments.html', | |
| basename: 'commandments', | |
| src: 'pages/commandments.md', | |
| dest: 'dist/development/commandments.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n\nby Larry Black and Cliff Martinez\n\n1. Lame exuses are always just that\n2. If you are on time, you are late\n3. Deal with money properly; invoice\n4. Don\'t defer your opinion to anyone without need\n5. Don\'t quote other\'s opinions as your own\n6. Get to 99.99 percent the hard way\n7. A bad craftsman blames his software version\n8. Be discreet. Discretion is the better part of valor\n9. Study the past\n10. Know about all crafts, not just the ones you do\n11. Know how to document your work\n12. Backup your work\n13. It\'s not glamorous\n14. Create templates\n15. Finish what you start\n16. Always have pen and paper with you\n17. Always write down instructions and take notes of everything\n18. never cite low budget or short schedule as an excuse\n19. Bd efficient with your time\n20. Always be reading\n', | |
| data: | |
| { title: 'The 20 Commandments of Professionalism', | |
| date: Sun Oct 28 2012 19:00:00 GMT-0500 (CDT) }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 2, | |
| number: 3, | |
| first: false, | |
| prev: 1, | |
| middle: true, | |
| next: 3, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'commandments.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'error.html', | |
| pageName: 'error.html', | |
| pagename: 'error.html', | |
| basename: 'error', | |
| src: 'pages/error.hbs', | |
| dest: 'dist/development/error.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n{{> open-inc }}\n<link rel=stylesheet href=/assets/css/error.css>\n<body>\n<main role=main class=error-page>\n <section class=error-intro>\n <div class=wrapper>\n <h1>This, kids, is called a <b><a href=http://wikipedia.org/wiki/HTTP_404 class=line>404</a></b></h1>\n <br>\n <em>Head on <a href=/ class=line>home</a> and everything will be alright.</em>\n </div>\n </section><!-- /.error-intro -->\n</main>\n{{> close-inc }}\n', | |
| data: | |
| { title: '404 Error', | |
| shortName: 'error', | |
| description: 'This, kids, is called a 404.', | |
| layout: 'none' }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 3, | |
| number: 4, | |
| first: false, | |
| prev: 2, | |
| middle: true, | |
| next: 4, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'error.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'faq.html', | |
| pageName: 'faq.html', | |
| pagename: 'faq.html', | |
| basename: 'faq', | |
| src: 'pages/faq.md', | |
| dest: 'dist/development/faq.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n<p class=centered>\n <small>*_Have a question that is not answered here? Email me at <[email protected]> or [ask me on Twitter]({{author.twitter}}).*</small>\n</p>\n\n<a href=#time>\n <blockquote class=color-green>\n How long will it take for you to finish a project, and how soon can you get to work?\n </blockquote>\n</a>\n\nAs every project has different requirements and features, every also project has a different timeline; in addition, I am a full-time college student. Thus, I can only work on a limited number of products at a time. Check my work page [for availability](/work). If you absolutely need something done immediately, I can either try to fit it in my schedule or I can refer you to an alternative web designer or agency.\n\n<a href=#pricing>\n <blockquote class=color-blue>\n How does pricing work for a website?\n </blockquote>\n</a>\n\nEvery website project starts at a base price of {{prices.website.base}} USD. Other variables, such as feature requirements and project timeline, will increase the price. For this base price you can expect a well developed and designed static site with a small number of pages. If you, for example, wanted the base site package, but powered by a content-management-system, the price would increase by $200.\n\n<a href=#code>\n <blockquote class=color-red>\n I am a developer and I want to know more about the tools and processes you use.\n </blockquote>\n</a>\n\nFirst, I would suggest heading over to my [GitHub]({{author.github}}); secondly, checkout the [colophon](/colophon) and [source code]({{author.github}}/site) for this website. To give developers a better idea of my code style, I also have an HTML and CSS [styleguide](/styleguide).\n\nThe general rule of thumb is that I will always be on top of CSS and HTML specifications and browser support. If you still need to know more, or if you have any specific questions, ping me [on Twitter]({{author.twitter}}) or send me an email at <[email protected]>.\n\n<a href=#documentation>\n <blockquote class=color-green>\n Can I view an example contract, cover letter, and design brief?\n </blockquote>\n</a>\n\nYou most certianly can. I have a copy of my contact and other project documents available [on GitHub]({{author.github}}/contract). Keep in mind, however, that these are simply sample documents and the final contract for every project can be modified to fit the project\'s uinque requirements.\n\n<a href=#speaking>\n <blockquote class=color-blue>\n Do you speak at conferences and meetups?\n </blockquote>\n</a>\n\nI have never had the oppurtunity to speak at a conference related to the web design industry, but I do speak about technology, design, and development at the meetups and events around New Orleans; you can find an archive of those talks [on GitHub]({{author.github}}/talks).\n\nIf you would like me to speak at your conference, send an email to <[email protected]> —there is about a 99.999 percent chance I will be excited.\n\n<a href=#what-makes-you-qualified>\n <blockquote class=color-red>\n You said you are a student; what makes you qualified then?\n </blockquote>\n</a>\n\nDuring highschool, I attended the New Orleans Center for Creative Arts (NOCCA), a unique arts conservatory in the Bywater neighborhood of New Orleans, about five minutes away from the French Quarter. For four years —2010–2014&mdash I studied Media Arts under the instruction of professional artists and with a class of about ten other students. My work at NOCCA has not only taught me artistry in filmmmaking, design, computer science and audio engineering, it also taught me professionalism and provided me with a college-like atmosphere to learn.\n\nAt the end of their high-school carreers, many NOCCA students leave the school with handsome scholarships to prestigous schools — others leave the school to enter directly into the industry. Four of my fellow seniors left the school with $20,000 scholarships and I left with a full-ride to the Loyola University New Orleans graphic design program, where I am currently attending.\n', | |
| data: | |
| { published: true, | |
| hire: false, | |
| title: 'Frequently Asked Questions', | |
| description: 'Questions clients frequently ask when starting a project with me.' }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 4, | |
| number: 5, | |
| first: false, | |
| prev: 3, | |
| middle: true, | |
| next: 5, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'faq.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'index.html', | |
| pageName: 'index.html', | |
| pagename: 'index.html', | |
| basename: 'index', | |
| src: 'pages/index.hbs', | |
| dest: 'dist/development/index.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n{{> open-inc ~}}\n{{> header-inc ~}}\n<main role=main id=main>\n <section class=article-feed>\n\n {{#withSort post \'this.data.date\'}}\n {{#each this.pages}}\n <article>\n <header>\n <a href="{{findURL this.dest \'dist/development\' \'\'}}" rel=prefetch role=link class=line>\n <em><span class=article-feed-title>{{this.data.title}}</span></em>\n </a>\n <small><time class=article-feed-time>{{prettyDate this.data.date}}</time></small>\n </header>\n </article>\n {{/each ~}}\n {{/withSort ~}}\n\n </section><!-- /article-feed -->\n</main>\n{{> footer-inc ~}}\n{{> close-inc ~}}\n', | |
| data: { title: 'Home', layout: 'none' }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 5, | |
| number: 6, | |
| first: false, | |
| prev: 4, | |
| middle: true, | |
| next: 6, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'index.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'legal.html', | |
| pageName: 'legal.html', | |
| pagename: 'legal.html', | |
| basename: 'legal', | |
| src: 'pages/legal.md', | |
| dest: 'dist/development/legal.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n\n> Effective October 31, 2013\n\n## I. General Terms\nBy accessing this web site, you are agreeing to be bound by these web site Terms and Conditions of Use, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site. The materials contained in this web site are protected by applicable copyright and trade mark law.\n\n## II. General Use Licenses \n\t\n### A) Creative Commons\nUnless otherwise noted, permission is granted to download and distribute the contents under the Creative Commons license. his is the grant of a license, not a transfer of title, and under this license you may not:\n\n- remove any copyright or other proprietary notations from the materials; or\n- transfer the materials to another person under a new license.\n\n### B) MIT \nUnless otherwise noted, permission is granted to download, use, and distribute copies of the code materials on Patrick Burtchaell\'s website under the [MIT License](http://pb.mit-license.org). This is the grant of a license, not a transfer of title, and under this license you may not:\n\n- use the materials for any commercial purpose, or for any public display (commercial or non-commercial);\n- remove any copyright or other proprietary notations from the materials; or\n- transfer the materials to another person under a new license.\n\nThese licenses shall automatically terminate if you violate any of these restrictions and may be terminated by Patrick Burtchaell at any time. Upon terminating your viewing and use of these materials or upon the termination of these licenses, you must destroy any downloaded materials in your possession whether in electronic or printed format. Termination of these licenses may be punishable by law. All open-source code used in the devlopment of this site and within the projects of Patrick Burtchaell remain under their respective licenses and copyrights. \n\n## III. Disclaimer\nThe materials on Patrick Burtchaell\'s web site are provided "as is". Patrick Burtchaell makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties, including without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights. Further, Patrick Burtchaell does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the materials on its Internet web site or otherwise relating to such materials or on any sites linked to this site.\n\n## IV. Limitations\nIn no event shall Patrick Burtchaell or his suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption,) arising out of the use or inability to use the materials on Patrick Burtchaell\'s Internet site, even if Patrick Burtchaell or a authorized representative of Patrick Burtchaell has been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.\n\n## V. Revisions and Errata\nThe materials appearing on Patrick Burtchaell\'s web site could include technical, typographical, or photographic errors. Patrick Burtchaell does not warrant that any of the materials on its web site are perfectly accurate, complete, or current. Patrick Burtchaell will, however, make changes to the materials contained on his web site if an error is found and reported.\n\n## VI. Links\nPatrick Burtchaell has not reviewed all of the sites linked to his web site and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Patrick Burtchaell of the site. Use of any such linked web site is at the user\'s own risk. \n\n## VII. Site Terms of Use Modifications\nPatrick Burtchaell may revise these terms of use for his web site at any time without notice. By using this web site you are agreeing to be bound by the then current version of these Terms and Conditions of Use.\n\n## VIII. Governing Law\nAny claim relating to Patrick Burtchaell\'s web site shall be governed by the laws of the State of Louisiana without regard to its conflict of law provisions.', | |
| data: | |
| { title: 'Terms and Conditions of Use', | |
| shortName: 'legal', | |
| description: 'By accessing this web site, you are agreeing to be bound by these web site Terms and Conditions of Use, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site. The materials contained in this web site are protected by applicable copyright and trade mark law.' }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 6, | |
| number: 7, | |
| first: false, | |
| prev: 5, | |
| middle: true, | |
| next: 7, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'legal.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'soundcloud.html', | |
| pageName: 'soundcloud.html', | |
| pagename: 'soundcloud.html', | |
| basename: 'soundcloud', | |
| src: 'pages/soundcloud.hbs', | |
| dest: 'dist/development/soundcloud.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n{{> open-inc }}\n<link rel=stylesheet href="/assets/css/soundcloud.css">\n<script src=/assets/js/soundcloud/angular.js></script>\n<script src=/assets/js/soundcloud/app.js></script>\n<script>\n// Find the right method, call on correct element\nfunction launchFullscreen(element) {\n if(element.requestFullscreen) {\n element.requestFullscreen();\n } else if(element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if(element.webkitRequestFullscreen) {\n element.webkitRequestFullscreen();\n } else if(element.msRequestFullscreen) {\n element.msRequestFullscreen();\n }\n}\n// Launch fullscreen for browsers that support it!\nlaunchFullScreen(document.documentElement);\n</script>\n{{> header-inc }}\n<main ng-app="animateApp">\n <section ng-view class="page \\{{pageClass}} default-page">\n <!-- Inject views using ng-view -->\n </section>\n</main>\n<footer class=page-footer>\n <p><small>\n <a href=/colophon rel=source>\n <span class=page-footer-span>Made with<object class=page-footer-heart>\n <svg x=0 y=0 width=10px height=10px viewBox="0 0 10 8.1396484">\n <path d="M9.1796875, 0.6699219c-0.9726563-0.8925781-2.5478516-0.8925781-3.5205078,0L5,\n 1.2753906L4.3398438,0.6699219 c-0.9726563-0.8925781-2.5478516-0.8925781-3.5205078,0c-1.0927734,\n 1.0029297-1.0927734,2.6308594,0,3.6337891L5,8.1396484 l4.1796875-3.8359375C10.2734375,\n 3.3007813,10.2734375,1.6728516,9.1796875,0.6699219z"/>\n </svg></object> in New Orleans<br>\n </span><br>\n </a>\n </small></p>\n</footer><!-- /page-footer -->\n<script src=/assets/js/soundcloud/components.js></script>\n{{> close-inc }}\n', | |
| data: | |
| { title: 'Downbeat Student Music Awards', | |
| description: 'Enjoy my submissions to the 2014 Downbeat Student Music Awards for studio and live engineering.', | |
| layout: 'none', | |
| work: true }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 7, | |
| number: 8, | |
| first: false, | |
| prev: 6, | |
| middle: true, | |
| next: 8, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'soundcloud.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'styleguide.html', | |
| pageName: 'styleguide.html', | |
| pagename: 'styleguide.html', | |
| basename: 'styleguide', | |
| src: 'pages/styleguide.md', | |
| dest: 'dist/development/styleguide.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n\n[LESS]: http://lesscss.org/\n[Sass]: http://sass-lang.com/\n[Grunt]: http://gruntjs.org/\n[W3-CSS-Spec]: http://www.w3.org/style/CSS/specs.en.html\n[W3-HTML-Spec]: http://www.w3.org/html/wg/drafts/html/master/Overview.html\n[resource-autoprefixer]: https://github.com/ai/autoprefixer\n[resource-caniuse-css]: http://caniuse.com/#cats=CSS\n[resource-caniuse-html]: http://caniuse.com/#cats=HTML5\n[resource-prefixfree]: https://github.com/LeaVerou/prefixfree\n[resource-recess]: http://twitter.github.io/recess/\n[resource-thesassway]: http://thesassway.com\n\nThis document formally describes methods and standards for developing robust, easily maintained and high-performance HTML, LESS, Sass and CSS code.\n\n##Table of Contents\n\n<div class=table-of-contents>\n {{#markdown}}\n 1. [HTML5](#html5)\n 1. [General Syntax](#general-html-syntax)\n 2. [Doctype Declaration](#doctype-declaration)\n 3. [Space](#space)\n 4. [URLs](#urls)\n 2. [LESS and Sass](#less-and-sass)\n 1. [Variables](#variables)\n 2. [Functions](#functions)\n 3. [Mixins](#mixins)\n 4. [Nesting](#nesting)\n 3. [CSS](#css)\n 1. [General CSS Guidelines](#general-css-guidelines)\n 2. [Inline Styles](#inline-styles)\n 3. [Style Attribute](#style-attribute)\n 4. [Declarations, Properties, and Values](#declarations-properties-and-values)\n 1. [Declaration Order](#declaration-order)\n 2. [Single Declarations](#single-declarations)\n 3. [Color Properties and Values](#color-properties-and-values)\n 4. [Browser Prefixes](#browser-prefixes)\n 5. [Selectors](#selectors)\n 1. [Class Selectors](#class-selectors)\n 2. [ID Selectors](#id-selectors)\n 3. [Type Selectors](#type-selectors)\n 4. [Pseudo-elements and Pseudo-classes](#pseudo-elements-and-pseudo-classes)\n 5. [Link and Dynamic Pseudo-classes](#link-and-dynamic-pseudo-classes)\n 4. [Notes on Code Robustness](#notes-on-code-robustness)\n 1. [Class Names](#class-names)\n 2. [HTML Comments](#html-comments)\n 3. [CSS Comments](#css-comments)\n 5. [Appendix](#appendix)\n 6. [Contribute](#contribute)\n {{/markdown}}\n</div>\n\n## HTML5\nWhen using HTML5 elements, always follow the [W3 Specifications][W3-HTML-Spec]. If you need to check browser support of a specification, [caniuse.com][resource-caniuse-html] is an invaulable resource.\n\n### General HTML Syntax\n- In order to guarantee that code renders the same in any environment, use soft tabs with two spaces.\n- Nested elements should be indented once (two spaces) for each level.\n- Never use quotes on attributes that do not have multiple values, e.g. `<a href=http://apple.com/ rel=external>`. Remember, however, that you cannot have a space, e.g.,`<div class=content page>` would be invalid; only `<div class="content page">` would be correct.\n- When an attribute requires it, use double quotes and never single quotes.\n- Use lowercase and dashes (not underscore or camelCase).\n- Do not include trailing slash in self-closing elements.\n- Closing tags are not required on certain elements in HTML5, e.g., `<li>` instead of `<li></li>`\n\n#### Doctype Declaration\nEnforce standards mode and more consistent rendering in every browser by declaring the HTML5 doctype at the beginning of every HTML page.\n```html\n<!DOCTYPE html>\n```\n\n#### Space\nIf an HTML document has complex markup and spacing will help a developer navigate the code easier, use one line-break to separate major blocks of code from one another.\n```html\n<main>\n\n <section>\n ...\n </section>\n\n <section>\n ...\n </section>\n\n</main>\n```\n\n#### URLS\nUse relative URLs whenever possible; this will prevent problems if the base URL ever changes during a project\'s lifespan.\n```html\n<a href=/about>About</a>\n```\n\n## LESS and Sass\n[LESS][LESS] and [Sass][Sass] are two CSS preprocessors that add variables, nesting, functions, and mixins to your stylesheets and both are equally as powerful as the other. This document uses LESS syntax for examples, but Sass is very similiar; follow the same styleguide rules for both.\n\nNotes:\n - Always write Sass with only on the first "S" capitalized.\n - LESS is written in uppercase.\n\n#### Variables\nWrite local variables just as you would a CSS declaration, but always include them first.\n```scss\n.example {\n @base: 20px;\n height: @base;\n width: @base;\n margin: @base/2;\n}\n```\n\nWrite global variables just as you would a CSS declaration, but optionally include one line break between related variables. It is also helpful to prefix related variables with a common name.\n\nRemember that variables can also be called before they are declared, e.g., you could use the variable `@color` on line 1 even though it is not declared until line 10.\n\n```scss\n@font-color: #000;\n@font-size: 1rem;\n@font-style: normal;\n\n@font-bold: \'Open Sans Bold\', @font-stack;\n@font-italic: \'Open Sans Italic\', @font-stack;\n@font-stack: \'Helvetica\', \'Arial\', sans-serif;\n\n@base-margin: 2rem;\n@base-padding: 1rem;\n@base-border: 0.25rem solid;\n@base-border-radius: 0.125rem;\n```\n\nLastly, it is a best practice to include all variables in a seperate stylesheet titled `ui-variables.less` and import that stylesheet.\n\nDo not include the `.less` file extension.\n```scss\n@import \'partials/ui-variables\';\n```\n\n#### Functions\n<span class="btn btn-red btn-border no-hover">Documentation in progress</span>\n\n#### Mixins\n<span class="btn btn-red btn-border no-hover">Documentation in progress</span>\n\n#### Nesting\nAvoid nesting in LESS and Sass for the sake of it.\n```scss\n/* Bad /\n.container {\n ul {\n li {\n a {\n &:hover {\n }\n }\n }\n }\n}\n```\n\nWhile it might make sense within the LESS document to write selectors this way, it will result in inefficient CSS.\n```css\n.container { ... }\n.container ul { ... }\n.container ul li { ... }\n.container ul li a:hover { ... }\n```\n\n## CSS\nAlways follow the [W3 Specifications][W3-CSS-Spec] for CSS properties and values. If you need to check browser support of a specification, [caniuse.com][resource-caniuse-css] is an invaluable resource.\n\n#### Glossary of Terms Used\n> The **property* is an identifier with a human readable name, that defines which feature is considered by the engine.\n> The *value* describes how the feature defined by the property must be handled by the engine.\n> A *declaration* is a property and value pair; declations are grouped together in *blocks*.\n> Different declarations are applied to different parts of the document by using *selectors*.\n> The selector-declaration pair is known as *ruleset*, or often just simply a *rule*.\n> <cite>Mozilla Developer Network: <a href=http://developer.mozilla.org/en-US/Web/CSS/Syntax>CSS Syntax</a></cite>\n\n### General CSS Guidelines\n- In order to guarantee that code renders the same in any environment, use soft tabs with two spaces.\n- Nested elements should be indented once (two spaces).\n- Include one space after the `:` for each declaration.\n- Each declaration should be written on its own line and indented once (two spaces).\n- End each declaration with a semi-colon. The last declaration is optional, but your code is more error prone without it.\n- *Never* use the `@import` method; as stylesheets can only load one at a time, this method will result in longer load times.\n\n### Inline Styles\nOptionally use inline styles to load declarations for content "above the fold". This is only an advantage if your CSS document is very small. It is disadvantageous and inconvenient for larger stylesheets.\n```html\n<style>\n ...\n</style>\n```\n\n### Style Attribute\nAlthough it is very common to do so, avoid using the style attribute on HTML elements in order to prioritize CSS delivery. In addition, it is against the [Content Security Policy](http://www.w3.org/TR/CSP) of W3. On occasion, it is appropriate, but should be avoided 90 percent of the time.\n```html\n<!-- Avoid -->\n<span style="background-color:#fff; color:#555;"></span>\n```\n\n### Declarations, properties, and values\n- Avoid specifying units for zero values, e.g., `margin: 0;` instead of `margin: 0px`;\n- Use shorthand whenever possible, e.g., `font` instead of `font-size` and `font-family`.\n- Use `!important` when necessary, but avoid repeated use.\n- Use single quotes and never double quotes.\n- Stay consistent with units, e.g., do not use a mixture of REM and PX for typography, only use one or the other.\n- Do not include a line-break after related declarations.\n- Separate unrelated declarations with one line-break.\n\n```css\n.example {\n font: normal 12px "Arial";\n margin: 0 5px 5px 0;\n}\n.example-2 { ... }\n.example-3 { ... }\n\n.unrelated-declaration { ... }\n```\n\n#### Declaration Order\nStart from the "outside" and work "back in". Group related properties in the following order:\n\n1. Positioning\n2. Box model\n3. Typographic\n4. Visual\n5. Functional\n6. Pseudo-elements/classes (LESS and Sass only)\n7. Nested rulesets (LESS and Sass only)\n\nPositioning comes first because it declares the nature of an element. The box model comes next as it dictates the dimensions and placement of an element. Typography and visual declaration declarations take place on the "inside" of the element and generally do not affect the "outside". Functional declarations (animations, transitions, transforms, etc.) are last. If you are writing LESS or Sass, include (after one full line-break), your nested rules and pseudo elements last. In the case that a declaration contains the `content` property, include it first.\n\nFor a complete list of properties and their order, use [Recess][resource-recess].\n```css\n.declaration-order {\n\n content: \'\';\n\n /* Positioning /\n position: relative;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n\n / Box Model /\n display: block;\n float: left;\n width: 100px;\n height: 100px;\n\n / Typography /\n font: 13px "Arial";\n color: #000;\n\n / Visual /\n background: #fff;\n border: 1px solid;\n\n / Functional /\n transition: 1s ease;\n\n / Misc. LESS or Sass /\n &:hover { opacity: 0.5; }\n &:nth-of-type(2) { color: #555; }\n\n}\n```\n\n#### Single Declarations\nIn the case where a rule includes on one declaration, remove line breaks for readability and faster editing. Include one space after the opening bracket and one before the closing bracket.\n```css\n.class-1 { opacity: 1; }\n.class-2 { opacity: 0; }\n```\n\nOptionally, you could drop the semicolon, but this can be error-prone and is not suggested.\n```css\n.class-1 { opacity: 1 }\n.class-2 { opacity: 0 }\n```\n\n#### Color Properties and Values\nAlways use either RGBA or RGB color values whenever possible. Write values in all lowercase with no space.\n```css\ncolor: rgba(72,74,76,1);\ncolor: rgb(72,74,76);\n```\nWhen writing hex values, use all lowercase values, e.g., `#fff`, and shorthand whenever possible, e.g., `#fff` instead of `#ffffff`. If using LESS and Sass, always define variables for commonly used colors and write functions with no spaces, e.g., `fadeOut(@red,25%);`.\n```css\n@primary-grey: #555;\n@primary-white: #fff;\n\ncolor: @primary-white;\nbackground: fadeOut(@primary-grey,50%);\n```\n\n#### Browser Prefixes\nUse `-webkit-`, `-moz-`, `-ms-`, and `-o-`, in that order. Always also include an un-prefixed copy of the base property last and align the prefixed properties to the same column.\n```css\n-webkit-transform: ... ;\n -moz-transform: ... ;\n -ms-transform: ... ;\n -o-transform: ... ;\n transform: ... ;\n```\nTo determine which properties require prefixes, refer to [caniuse][resource-caniuse-css]. If you use a taskrunner, [autoprefixer][resource-autoprefixer] is very useful, as is Lea Verou\'s pollyfill, [prefix-free][resource-prefixfree].\n\n### Selectors\n- Use class selectors and avoid ID selectors\n- **Never* use the [universal selector](http://www.w3.org/TR/CSS21/selector.html#universal-selector)\n- Avoid combined type selectors, also known as descendant selectors, e.g., `ul li a`\n- Always group several selectors that share the same declarations together, e.g., `h1, h2, h3, h4, h5, h6`.\n- Follow the W3 [specification on selectors](http://www.w3.org/TR/CSS21/selector.html)\n\n#### Class Selectors\nUnless a specific case requires otherwise, always use class selectors. Do not combine class selectors with type selectors, e.g., `h1.bold`; instead use `.heading-bold`.\n\n#### ID Selectors\nAvoid ID selectors and instead use class selectors. Never combine ID selectors with type selectors, e.g., `h1#primary`.\n\n#### Type selectors\nAvoid using lengthy type selectors, e.g., `ul li a`. Since browsers read selectors from right to left, not left to right as humans do, longer selectors can greatly impact performance.\n\n#### Pseudo-elements and Pseudo-classes\nWhen grouping pseudo-elements and classes with other selectors, include them last.\n```css\na,\na:visited,\na:nth-of-type(2) { ... }\n```\nAlways declare the pseudo elements `:before` first and `:after` second, but declare them after the element they affect. Include the `content` property first in the declaration.\n```css\na { ... }\na:before { ... }\na:after {\n content: \'attr(href)\';\n color: red;\n border: 1px solid;\n}\n```\n\nWhen combining pseudo-classes, use two colons for the second class, e.g., `a:visited::hover`.\n\n#### Link and Dynamic Pseudo-classes\nAlways declare rules for the selectors `:hover`, `:active`, `:focus`, `:visited`, respectively. The selector `:link` is optional, as the `a` type selector is equally as effective; only use `:link` and `:visited` on links.\n\n## Notes on Code Robustness\nAn important part of both HTML and CSS code is how specific and robust it is. Some call this writing code as a "human-readable medium", but in the end, all text code is readable by humans. Everyone can read code, but only few can fully understand it.\n\n> ...a representation of data or information that can be naturally read by humans\n> <cite>Wikipedia: <a href=http://wikipedia.org/wiki/Human-readable_medium>Human-readable Medium</a></cite>\n\nRather than making code readable, focus on writing code in which a developer can understand its functions.\n\nIn order to write understandable code, it must be robust and set in a strong foundation. From that strong foundation, you can add a level of specification through class names and comments. This process is known as self-documenting code: source code that is that follows loosely defined conventions for naming and structure. These conventions allow for developers to effectively use the source code without previous knowledge of its specification, design, or behavior.\n\nGood, extensive documentation is key to robust code. More often than not, extensive documentation cannot be expressed through just source code. While robust object-oriented class names and specific comments certainly do help, they should not be the only form of documentation.\n\n#### Class Names\n- Keep classes lowercase and use dashes (not underscore or camelCase). Dashes provide for readability and natural breaks in related classes, e.g., `.btn` and `.btn-danger`.\n- Be specific and concise when naming classes. Use meaningful names that describe the action or functionality of a class rather than is appearance, e.g. `.btn-danger` instead of `.btn-red`.\n- Abbreviate some class names, but make sure anyone can understand the class, e.g., `.btn` instead of `.button`.\n- Prefix classes based on the closest parent element or base class.\n- Always use a base class for elements with different states. If you have a success and a failure label, make the base class `.label` and the classes `.success` and `.warning` will give it the specific styles needed for different states.\n\n```css\n/* Unintuitive /\n.u { ... }\n.uContainer { ... }\n.label_red { ... }\n\n/ Magical /\n.upload-item { ... }\n.upload-item--container { ... }\n.upload-label.warning { ... }\n```\n\n#### HTML Comments\nIn an HTML document with few lines of code, do not place comments by closing tags. In larger HTML documents, where there may be multiple closing tags of the same element include a comment containing a backslash and the class/ID name; this will help prevent human error in when making changes in development. If a description is necessary, include a colon and a short summary of element after the class/ID name. Generally, however, you should include descriptions in the stylesheet; long descriptions can diminish readability of HTML documents.\n```html\n<div class=header>\n <div class=example-div-1>\n <div class=example-div-2>\n ...\n </div><!-- /example-div-2 -->\n </div><!-- /example-div-1 -->\n</div><!-- /header: Primary header for all pages-->\n```\n\n#### CSS Comments\nNever simply reiterate a component or selector name. Always write short comments in the third person, present tense. Longer comments may be written in any person or tense.\n```css\n/ Bad </3 /\n/ Page Header /\n.page-header {\n ...\n}\n\n/ xD /\n/ .page-header: Contains the primary header elements /\n.page-header {\n ...\n}\n```\n\nBoth LESS and Sass allow in-line comments; use these to add notes after certain properties.\n```scss\n.example {\n @base: 25px;\n width: round((@base*2)/3.14); // => 16.0px\n background: #555; // background will match footer\n}\n```\n\nNever feel limited to one line with comments; use as many lines as necessary to explain the function/purpose of a declaration.\n\nSeparate stylesheets into sections with three line-breaks and a comment. Within this comment include the title of the section and a brief description less than forty characters. If you prefix the title of the sections with a unique character not used anywhere else in the code, you can easily search for different sections, e.g. search for `$CONTENT-PAGE` and this will only result with the section title, no classes will be returned.\n```css\n...\n\n\n\n/ ------------ -----------\n $SEARCH-PAGE\n All rules for the default search page\n----------- ------------ /\n\n.search-page--header {\n ...\n}\n```\n\n## Appendix\n\n### Inspiration\nThis document is inspired by my personal code style; [Code Guide][MDO], by @MDO; [CSS Guidelines][CSSWizardy], by @CSSWizardy; the Google [HTML and CSS Styleguide][Google-styleguide] and [Page Speed Guidelines][Google-speedguide]; and the [Github Styleguide][Github].\n\n### Bibliography\n- *Code Guide, Mark Otto, [mdo.github.com/code-guide](http://mdo.github.com/code-guide)\n- CSS Guidelines, Harry Roberts, [github.com/csswizardry/CSS-Guidelines](https://github.com/csswizardry/CSS-Guidelines)\n\nAll other infomation taken from an external source has been cited with a title and link to the original source document.\n\n### Suggested Reading\n- Jef Raskin: [Comments Are More Important Than Code](http://queue.acm.org/detial.cfm?id=1053354)\n\n## Contribute\n<p class=centered>\n Want to improve this document?\n <em>Make a pull-request<a href=https://github.com/pburtchaell/site-assemble/blob/master/tpl/pages/styleguide.md> on Github</a></em>.\n</p>\n\n[MDO]: http://mdo.github.com/code-guide\n[CSSWizardy]: https://github.com/csswizardry/CSS-Guidelines\n[Github]: https://github.com/styleguide\n[Google-styleguide]: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml\n[Google-speedguide]: http://feedthsbot.com/pagespeed/\n', | |
| data: | |
| { published: true, | |
| highlighting: true, | |
| title: 'Code Styleguide', | |
| description: 'A formal styleguide containing methods and standards for developing robust, easily maintained, and high-performance HTML, LESS, Sass and CSS.', | |
| hire: true }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 8, | |
| number: 9, | |
| first: false, | |
| prev: 7, | |
| middle: true, | |
| next: 9, | |
| last: false, | |
| isCurrentPage: false, | |
| relativeLink: 'styleguide.html' } | |
| Currentpage: [object Object] | |
| Variables loaded | |
| { _page: 'all', | |
| dirname: 'dist/development', | |
| filename: 'work.html', | |
| pageName: 'work.html', | |
| pagename: 'work.html', | |
| basename: 'work', | |
| src: 'pages/work.hbs', | |
| dest: 'dist/development/work.html', | |
| assets: 'assets', | |
| ext: '.html', | |
| extname: '.html', | |
| page: '\n{{> open-inc }}\n<!--\n Checking out the source code? That\'s awesome!\n You are just the kind of person I\'d enjoy to working with.\n PS: This site is open-sourced at http://github.com/pburtchaell/site. Enjoy it; code your heart out.\n-->\n<script src=/assets/js/work.js></script>\n{{> header-inc }}\n<main role=main class="page page-work">\n\n <header class="portfolio-item--header">\n <div class=header-content>\n <h1 class=rst><b>Work With Me</b></h1>\n <h4 class=rst>Design + Development from<br><b>New Orleans, Louisiana</b></h4>\n <a class=down-arrow href=#introduction rel=next data-menu-top=100p>\n <svg version=1.1 x=0 y=0 width=50px height=50px viewBox="0 0 50 50" enable-background="new 0 0 50 50">\n <path d="M25,50c13.807,0,25-11.193,25-25S38.807,0,25,0C11.193,0,0,11.193,0,25C0,38.807,11.193,50,25,50z\n M10.18,16.883c0.39-0.391,0.902-0.586,1.414-0.586s1.024,0.195,1.414,0.586L25,28.874l11.992-11.991\n c0.78-0.781,2.048-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828L25,34.531l-14.82-14.82C9.399,\n 18.93,9.399,17.664,10.18,16.883z"/>\n </svg>\n </a>\n </div>\n <div class="portfolio-item--cover work">\n <ul class="clouds rst">\n <li class="cloud rst">\n <li class="cloud rst">\n </ul>\n {{!-- <img src=/assets/img/site/loader/green.svg data-src="{{site.url}}/assets/img/site/work/2.jpg" >--}}\n </div>\n </header>\n\n <section class=wrk-sct id=introduction>\n <div class=wrapper>\n <div class="l-12 s-12 col">\n <img src=/assets/img/site/patrick.jpg height=100px width=100px class=img-portrait>\n </div>\n <div class="l-12 s-12 col">\n <p>I\'m Patrick Burtchaell, a freelance designer from New Orleans. I build and design products for the web and for print. From code, to layout, to video, I have experience in all forms of media content. Learn more\n <a href=/about class=line>about me</a>.\n {{!--Want to learn more about me?\n <b>Check out <a href=/about class=line> my about page</a>,\n <a href=/resume.pdf class=line>resumé</a>, and\n <a href={{author.github}}/ccv class=line rel=external>CCV</a>.</b>--}}</p>\n <p>Open to working with all and everything, my venture is about designing great products, working with others, meeting new people and teams, and gaining new experiences. Regardless of budget, time or location, get in touch and we shall see what we can do.</p>\n </div>\n </div>\n </section><!-- /#introduction -->\n\n <div class=wrk-sct-divider>\n <div class=wrapper>\n <strong><h1 class=divider-title>Development</h1></strong>\n <h2 class=divider-subtitle>Professional CSS Architecture</h2>\n </div>\n </div>\n\n <section class=wrk-sct id=development data-color=red>\n <div class=wrapper>\n <p><b>I have worked with CSS and HTML development on projects of all sizes.</b>\n Whether it remote work or local gigs here in New Orleans, I can join your team to help with a special project or provide a code review; if you are a small business or startup, I can build and maintain your website, from start to finish.</p>\n <div class="l-6 s-12 col fade-in left">\n <h4>Code Review</h4>\n <p>Often times, when you are not sure if your project is going in the right direction, a code review is helpful.</p>\n <p>I can provide this service remotely and efficiently. Simply give me access to your codebase, two days to evaluate and review CSS and HTML, and within a third day I will have a complete document including suggestions, improvements, and examples; once you have read this document, I can schedule a video call to discuss any questions you might have.</p>\n <h1><b>$400</b> USD</h1>\n <h4 class=rst><small>Remote code review</small></h4>\n </div>\n <div class="l-6 s-12 col">\n <h4>Start a development project</h4>\n <hr class="small ctr">\n <a href="mailto:patrick@pburtchaell.com"\n class="btn btn-white">Contact me</a>\n {{!--<a href=# class="btn btn-white btn-border">Read more</a>--}}\n <hr class="small ctr">\n <i><b>Developers</b>: Interested in how the code I write actually looks? Check out my\n <a href=/styleguide class=line>code styleguide</a> and\n <a href={{author.github}} rel=external class=line>GitHub account</a>. The source code for this website is also up <a href={{author.github}}/site rel=source class=line>in a GitHub repository</a>. Enjoy.</i>\n </div>\n </div>\n </section><!-- /#development -->\n\n <div class=wrk-sct-divider>\n <div class=wrapper>\n <strong><h1 class=divider-title>Design</h1></strong>\n <h2 class=divider-subtitle>Web + Print</h2>\n </div>\n </div>\n\n <section class=wrk-sct id=design data-color=green>\n <div class=wrapper>\n\n <div class="l-12 s-12 col">\n <p>Whether you have a small project or need an entire branding set and website designed, I would love to have an oppurtunity to work with you.</p>\n </div>\n\n <div class="l-6 s-12 col">\n <h4>Print</h4>\n <p>Doesn\'t matter if it is a complete branding set or just a business card, a brochure, or a magazine layout, I can design it for you; I am open to all design projects and ideas, both large and small. Contact me and we can talk.</p>\n </div>\n\n <div class="l-6 s-12 col">\n <h4>Start a design project</h4>\n <h1>~<b>$35</b> USD/hr</h1>\n <h4 class=rst><small>Starting price</small></h4>\n <hr class="small ctr">\n {{!--<a href=#modal-print-design class="btn btn-border">Read more</a>--}}\n </div>\n\n <div class="l-12 s-12 col">\n <h4>Web</h4>\n <p>It is important that a professional designer and developer makes you a product that will appear great and perform well. Contact me with your idea, I will discuss the price and send a contract; within a few weeks, I can have a completely launched site for you.</p>\n </div>\n\n <div class="l-6 s-12 col">\n <h1><b>$525</b> USD</h1>\n <h4 class=rst><small>Base website price</small></h4>\n <hr class="small ctr">\n </div>\n\n <div class="l-6 s-12 col">\n {{!--<a href=#modal-print-design class="btn btn-border">Read more</a>--}}\n <a href="mailto:patrick@pburtchaell.com"\n class="btn btn-white">Start a web project</a>\n </div>\n\n </div>\n </section><!-- /#design -->\n\n <section class="wrk-sct rst" id=availability data-color=dark>\n <div class=wrapper>\n <div class=work-availability>\n <h2>Availability</h2>\n <small><h4><b>January–Decemeber 2014</b></h4></small>\n <ul class=available-months>\n <li class=month data-avail=false data-month=January>\n <li class=month data-avail=false data-month=February>\n <li class=month data-avail=false data-month=March>\n <li class=month data-avail=false data-month=April>\n <li class=month data-avail=true data-month=May>\n <li class=month data-avail=null data-month=June>\n <li class=month data-avail=null data-month=July>\n <li class=month data-avail=null data-month=August>\n <li class=month data-avail=true data-month=September>\n <li class=month data-avail=true data-month=October>\n <li class=month data-avail=true data-month=November>\n <li class=month data-avail=true data-month=December>\n </ul>\n </div>\n </div>\n </section>\n\n <section class="wrk-sct rst" id=connect data-color=blue>\n <div class=wrapper>\n <div class="l-4 s-12 col">\n <h4>News</h4><hr class="small ctr">\n <small><h4><b>Stay up to date</b></h4></small>\n <form action=http://pburtchaell.us4.list-manage1.com/subscribe/post?u=1cc8293b197ba2f09fc239b52&id=20698d100d\n method=post id=mc-embedded-subscribe-form name=mc-embedded-subscribe-form class=validate target=_blank novalidate>\n <div class="mc-field-group">\n <input placeholder="Enter your email address" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">\n </div>\n <div id="mce-responses" class="clear">\n <div class="response" id="mce-error-response" style="display:none"></div>\n <div class="response" id="mce-success-response" style="display:none"></div>\n </div>\n <div style="position: absolute; left: -5000px;"><input type="text" name="b_1cc8293b197ba2f09fc239b52_20698d100d" value=""></div>\n <div class="clear"><button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-white btn-border">Submit</button></div>\n </form>\n </div>\n <div class="l-4 s-12 col">\n <h4>Recent Writings</h4><hr class="small ctr">\n {{!--{{#withSort post \'this.data.date\'}}\n {{#each this.pages}}\n <article>\n <header>\n <a href="{{findURL this.dest \'dist/development\' \'\'}}" rel=prefetch role=link class=line>\n <em><span>{{this.data.title}}</span></em><br>\n </a>\n <small><time>{{prettyDate this.page.data.date}}</time></small>\n </header>\n </article>\n {{/each ~}}\n {{/withSort ~}}--}}\n {{!-- #withSort is not working since the pages for the posts collection are not within the "assemble:pages" task. --}}\n <article>\n <a href="/2014/using-source-maps/" class=line><em>Using Source Maps</em></a><br>\n <small>March 26, 2014</small>\n </article>\n <article>\n <a href="/2014/a-better-way-to-use-font-face/" class=line><em>A Better Way to Use @font-face</em></a><br>\n <small>March 24, 2014</small>\n </article>\n <article>\n <a href="/2014/documentation-published/" class=line><em>Documentation Published</em></a><br>\n <small>March 3, 2014</small>\n </article>\n </div>\n <div class="l-4 s-12 col">\n <h4>Stay in touch</h4><hr class="small ctr">\n <small><h4><b>Because I like to talk</b></h4></small>\n <i>Drop a line via\n <a href="mailto:patrick@pburtchaell.com"\n rel=author class=line>email</a> or follow me\n <a href={{author.twitter}} rel=external class=line>on Twitter</a>, if you are into that kind of thing.\n Try smoke flares when all else fails.</i>\n </div>\n </div>\n <span></span>\n </section>\n\n</main>\n{{> footer-inc }}\n<script src=/assets/js/skrollr.js></script>\n{{> close-inc }}\n', | |
| data: | |
| { title: 'Work With Me', | |
| shortName: 'work', | |
| layout: 'none', | |
| work: true }, | |
| filePair: | |
| { src: [Getter], | |
| dest: './dist/development/', | |
| orig: { src: [Object], dest: './dist/development/' } }, | |
| index: 9, | |
| number: 10, | |
| first: false, | |
| prev: 8, | |
| middle: false, | |
| last: true, | |
| isCurrentPage: false, | |
| relativeLink: 'work.html' } | |
| Currentpage: [object Object] | |
| Variables loaded |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment