We're growing into something new. Read More
chris_mcclellan

Chris McClellan  Pro


My new(er) portfolio

Well I put this up a couple weeks ago and started sending this out with my resume. Since that time I received a boatload of requests for interviews and several job offers. I guess that was feedback enough as I took one of those offers. I still want to improve it - so feel free to comment. Thanks You can find the live version: http://www.chrismcclellan.com

Mobile Restaurant Template

This is the first of many mobile templates I've been asked to create. The idea is that this is generic enough to be modified at any time by the client... This is just first in a series of many textured mobile UI templates.

WatDoen - Geo Social App

I posted a couple weeks ago my progress on the interface for this layout. I have since returned. I get the feeling I'm not being consistent in the design since its been a couple of weeks - hence posting it here for feedback. I think this is one of the fun-er designs I've ever worked on because I get to code the map stuff and it needs to be responsive (yeehah!)

FreEvent Design Comp

This is an update to the initial design posted here: forrst.com/posts/… This is a company out of Belgium so there is some dutch (or flemish?). Struggled a bit towards the bottom hence the "Looking for feedback".

<?php
	$css_properties = array( // prioritized css properties
		'display', 'position', 'top', 'right', 'bottom', 'left', 'z-index',
		'float', 'float-offset', 'clear', 'visibility', 
		'width', 'height', 'max-width', 'max-height', 'min-width', 'min-height',
		'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
		'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
		'border', 'border-color', 'border-style', 'border-width', 'border-top', 'border-top-color', 'border-top-style', 'border-top-width', 'border-right', 'border-right-color', 'border-right-style', 'border-right-width', 'border-bottom', 'border-bottom-color', 'border-bottom-style', 'border-bottom-width', 'border-left', 'border-left-color', 'border-left-style', 'border-left-width',
		'outline', 'outline-color', 'outline-style', 'outline-width',
		'overflow', 'overflow-x', 'overflow-y', 'overflow-style', 'rotation', 'rotation-point',
		'background', 'background-attachment', 'background-color', 'background-image', 'background-position', 'background-repeat',
		'list-style', 'list-style-image', 'list-style-position', 'list-style-type',
		'font', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'font-size-adjust', 'font-stretch',
		'color', 'direction', 'letter-spacing', 'line-height', 'text-align', 'text-decoration', 'text-indent', 'unicode-bidi', 'vertical-align', 'white-space', 'word-spacing', 'hanging-punctuation', 'punctuation-trim', 'text-align-last', 'text-justify', 'text-outline', 'text-overflow', 'text-shadow', 'text-wrap', 'word-break', 'word-wrap',
		'border-collapse', 'border-spacing', 'empty-cells', 'table-layout',
		'bookmark-label', 'bookmark-level', 'bookmark-target', 'hyphenate-after', 'hyphenate-before', 'hyphenate-character', 'hyphenate-lines', 'hyphenate-resource', 'image-resolution', 'marks', 'string-set',
		'box-flex-group', 'box-lines', 'box-decoration-break',
		'content', 'counter-increment', 'counter-reset', 'quotes', 'crop', 'move-to', 'page-policy',
		'grid-columns', 'grid-rows',
		'target', 'target-name', 'target-new', 'target-position',
		'alignment-adjust', 'alignment-baseline', 'baseline-shift', 'dominant-baseline', 'drop-initial-after-adjust', 'drop-initial-after-align', 'drop-initial-before-adjust', 'drop-initial-before-align', 'drop-initial-size', 'drop-initial-value', 'inline-box-align', 'line-stacking', 'line-stacking-ruby', 'line-stacking-shift', 'line-stacking-strategy', 'text-height',
		'marquee-direction', 'marquee-play-count', 'marquee-speed', 'marquee-style',
		'fit', 'fit-position', 'image-orientation', 'page', 'size',
		'orphans', 'page-break-after', 'page-break-before', 'page-break-inside', 'widows',
		'ruby-align', 'ruby-overhang', 'ruby-position', 'ruby-span',
		'mark', 'mark-after', 'mark-before', 'phonemes', 'rest', 'rest-after', 'rest-before', 'voice-balance', 'voice-duration', 'voice-pitch', 'voice-pitch-range', 'voice-rate', 'voice-stress', 'voice-volume',
		'icon', 'nav-down', 'nav-index', 'nav-left', 'nav-right', 'nav-up', 'outline-offset', 'resize',
		'column-fill', 'column-span',
		'color-profile', 'rendering-intent',
		'clip', 'cursor', 'zoom',
		'perspective-origin',
		'-webkit-user-select', '-moz-user-select', 'user-select',
		'-webkit-user-modify', '-moz-user-modify', 'user-modify',
		'-webkit-transition-timing-function', '-moz-transition-timing-function', 'transition-timing-function',
		'-webkit-transition-property', '-moz-transition-property', 'transition-property',
		'-webkit-transition-duration', '-moz-transition-duration', 'transition-duration',
		'-webkit-transition-delay', '-moz-transition-delay', 'transition-delay',
		'-webkit-transition', '-moz-transition', 'transition',
		'-webkit-transform-style', '-moz-transform-style', 'transform-style',
		'-webkit-transform-origin', '-moz-transform-origin', 'transform-origin',
		'-webkit-transform', '-moz-transform', 'transform',
		'-epub-text-transform', 'text-transform',
		'-webkit-text-size-adjust', '-moz-text-size-adjust', 'text-size-adjust',
		'-webkit-perspective-origin', '-moz-perspective-origin', '-webkit-perspective', '-moz-perspective', 'perspective',
		'-webkit-padding-start', '-moz-padding-start', 'padding-start',
		'-webkit-padding-end', '-moz-padding-end', 'padding-end',
		'-webkit-opacity', 'opacity',
		'-webkit-mask', 'mask',
		'-webkit-margin-start', '-moz-margin-start', 'margin-start',
		'-webkit-margin-end', '-moz-margin-end', 'margin-end',
		'-epub-hyphens', '-moz-hyphens', 'hyphens',
		'-webkit-font-feature-settings', '-moz-font-feature-settings', 'font-feature-settings',
		'-webkit-filter', 'filter',
		'-webkit-columns', '-moz-columns', 'columns',
		'-webkit-column-width', '-moz-column-width', 'column-width',
		'-webkit-column-rule-width', '-moz-column-rule-width', 'column-rule-width',
		'-webkit-column-rule-style', '-moz-column-rule-style', 'column-rule-style',
		'-webkit-column-rule-color', '-moz-column-rule-color', 'column-rule-color',
		'-webkit-column-rule', '-moz-column-rule', 'column-rule',
		'-webkit-column-gap', '-moz-column-gap', 'column-gap',
		'-webkit-column-count', '-moz-column-count', 'column-count',
		'-epub-caption-side', 'caption-side',
		'-webkit-box-sizing', '-moz-box-sizing', 'box-sizing',
		'-webkit-box-shadow', '-moz-box-shadow', 'box-shadow',
		'-webkit-box-pack', '-moz-box-pack', 'box-pack',
		'-webkit-box-orient', '-moz-box-orient', 'box-orient',
		'-webkit-box-ordinal-group', '-moz-box-ordinal-group', 'box-ordinal-group',
		'-webkit-box-flex', '-moz-box-flex', 'box-flex',
		'-webkit-box-direction', '-moz-box-direction', 'box-direction',
		'-webkit-box-align', '-moz-box-align', 'box-align',
		'-webkit-border-radius', 'border-radius',
		'-webkit-border-top-right-radius', 'border-top-right-radius',
		'-webkit-border-bottom-right-radius', 'border-bottom-right-radius',
		'-webkit-border-bottom-left-radius', 'border-bottom-left-radius',
		'-webkit-border-top-left-radius', 'border-top-left-radius',
		'-webkit-border-start-width', '-moz-border-start-width', 'border-start-width',
		'-webkit-border-start-style', '-moz-border-start-style', 'border-start-style',
		'-webkit-border-start-color', '-moz-border-start-color', 'border-start-color',
		'-webkit-border-start', '-moz-border-start', 'border-start',
		'-moz-border-image-width', 'border-image-width',
		'-moz-border-image-source', 'border-image-source',
		'-moz-border-image-slice', 'border-image-slice',
		'-moz-border-image-repeat', 'border-image-repeat',
		'-moz-border-image-outset', 'border-image-outset',
		'-webkit-border-image', '-moz-border-image', 'border-image',
		'-webkit-border-end-width', '-moz-border-end-width', 'border-end-width',
		'-webkit-border-end-style', '-moz-border-end-style', 'border-end-style',
		'-webkit-border-end-color', '-moz-border-end-color', 'border-end-color',
		'-webkit-border-end', '-moz-border-end', 'border-end',
		'-webkit-background-size', 'background-size',
		'-webkit-background-origin', 'background-origin',
		'-webkit-background-clip', 'background-clip',
		'-webkit-backface-visibility', '-moz-backface-visibility', 'backface-visibility',
		'-webkit-appearance', '-moz-appearance', 'appearance',
		'-webkit-animation-timing-function', '-moz-animation-timing-function', 'animation-timing-function',
		'-webkit-animation-play-state', '-moz-animation-play-state', 'animation-play-state',
		'-webkit-animation-name', '-moz-animation-name', 'animation-name',
		'-webkit-animation-iteration-count', '-moz-animation-iteration-count', 'animation-iteration-count',
		'-webkit-animation-fill-mode', '-moz-animation-fill-mode', 'animation-fill-mode',
		'-webkit-animation-duration', '-moz-animation-duration', 'animation-duration',
		'-webkit-animation-direction', '-moz-animation-direction', 'animation-direction',
		'-webkit-animation-delay', '-moz-animation-delay', 'animation-delay',
		'-webkit-animation', '-moz-animation', 'animation'
	);
?>

CSS Mega Array (v2)

I posted an array with all of the css properties in a specific order yesterday. I didn't realize it but I was ordering it much like this article describes fordinteractive.com/2009/02/order-of-the-day-css-properties/ I have finished writing my class that formats my css and organizes my declarations based on the property and where that falls on the hierarchy as described in the link. Its simple to change the order convention by simply changing the order in this array. This one has all the vendor prefixes for features that are supported by both Webkit and Gecko. Also no duplicates - YAY! Hope someone can use it as I have put it to good use already...

Hipstar - Site Template

Check it out: demo.nookthemes.com/html/Hipstar/style-1/ Been working on this for the last few weekends for themeforest. Posted the original mockup here when it was first started and got good responses so I moved forward. This will eventually be moved into a Wordpress theme but going back to prep PSD files for sale next. Anyways I'm submitting either tomorrow or the day after and want feedback before... :)

Portfolio List Style

Previously I posted a grid version of this. Since there is a toggle for the view type - I am including a list version in this template. I have taken into consideration the comments on previous posts and believe this is about right. Heres the grid view: forrst.com/posts/vHY/…

Portfolio Layout WP Theme

I finally finished the footer and settled on the portfolio image containers... moving forward unless someone has some useful input! :) See the last iteration here: forrst.com/posts/vUF/…