├── README.md ├── j └── project-hub.js ├── index.html └── c └── project-hub.css /README.md: -------------------------------------------------------------------------------- 1 | Project Hub 2 | =========== 3 | 4 | Inspired by [Brad Frost](http://bradfrostweb.com/)—who I guess was [inspired by me](http://24ways.org/2013/project-hubs/)?—I’ve taken a pass at a new Project Hub. 5 | 6 | Here are a few details on what I thought needed improvement: 7 | 8 | - **Seeing the future.** Good Project Hubs document the past in a way that makes it easy for a client—or you—to keep track of the process. However, I’ve started to pre-populate the entire process for my clients so that they know not only what’s happened but also what’s coming up. 9 | - **Focusing on a moment in time.** Though this Project Hub lets you see an entire project timeline, it’s still really valuable to know where you currently are in the process. By default, each milestone is labeled with a class name of `entry-future`, which keeps the upcoming milestone grayed out. Once you’ve completed a milestone, remove this class name; that will darken the text and place a checkmark next to it. Lastly, add a class of `entry-latest` to the latest milestone to auto-scroll the page. (You can also change this class name on line 18 of the JavaScript file.) 10 | 11 | You can see the finished result here: [project-hub.superfriend.ly](http://project-hub.superfriend.ly/) 12 | 13 | Pull request or fork at your leisure. Happy Project Hubbing! 14 | -------------------------------------------------------------------------------- /j/project-hub.js: -------------------------------------------------------------------------------- 1 | /* 2 | ************************************************* 3 | 4 | PROJECT HUB 5 | JavaScript Functions 6 | Requires jQuery 7 | 8 | Created by the epic SuperFriendly team. 9 | http://superfriend.ly/ 10 | 11 | ************************************************* 12 | */ 13 | 14 | var Site = function(){ 15 | 16 | this.init = function(){ 17 | 18 | var _classNameToScrollTo = '.entry-latest', 19 | _pointToScrollTo = $(_classNameToScrollTo).offset().top - 30, 20 | _viewport = $('html, body'); 21 | 22 | _viewport.delay(500).animate({ 23 | scrollTop: _pointToScrollTo 24 | }, 2000, 'easeInOutQuint'); 25 | 26 | // http://stackoverflow.com/questions/8858994/let-user-scrolling-stop-jquery-animation-of-scrolltop 27 | _viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){ 28 | if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){ 29 | _viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional) 30 | } 31 | }); 32 | 33 | } 34 | 35 | } 36 | 37 | 38 | 39 | /*------------------------------------------- 40 | Initial Actions 41 | -------------------------------------------*/ 42 | 43 | $(document).ready(function() { 44 | var projectHub = new Site(); 45 | projectHub.init(); 46 | }); 47 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Client Name Project Hub 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

24 | 25 | 26 | 34 | 35 | 36 | 37 |

38 | 39 | 40 |

41 |

Design Round 11

42 |

June 4, 2014

43 | 44 |

45 | 46 | 47 | 48 |

49 |

Design Round 10

50 |

June 4, 2014

51 | 52 |

53 | 54 | 55 | 56 |

57 |

Design Round 9

58 |

June 4, 2014

59 | 60 |

61 | 62 | 63 | 64 |

65 |

Design Round 8

66 |

June 4, 2014

67 | 68 |

69 | 70 | 71 | 72 |

73 |

Design Round 7

74 |

June 4, 2014

75 | 76 |

77 | 78 | 79 | 80 |

81 |

Design Round 6

82 |

June 4, 2014

83 | 84 |

85 | 86 | 87 | 88 |

89 |

Design Round 5

90 |

June 4, 2014

91 | 92 |

93 | 94 | 95 | 96 |

97 |

Design Round 4

98 |

June 4, 2014

99 | 100 |

101 | 102 | 103 | 104 |

105 |

Design Round 3

106 |

June 4, 2014

107 | 108 |

Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.

109 | 110 |

Home
Home Variation
About

115 | 116 |

117 | 118 | 119 | 120 |

121 |

Design Round 2 a long title of this entry

122 |

June 4, 2014

123 | 124 |

Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.

125 | 126 |

Home
Home Variation
About

131 | 132 |

133 | 134 | 135 | 136 |

137 |

Design Round 1

138 |

June 4, 2014

139 | 140 |

Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.

141 | 142 |

Home
Home Variation
About

147 | 148 |

149 | 150 | 151 |

152 | 153 |

154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /c/project-hub.css: -------------------------------------------------------------------------------- 1 | /* 2 | ************************************************* 3 | 4 | PROJECT HUB 5 | General Screen Styles 6 | 7 | Created by the epic SuperFriendly team. 8 | http://superfriend.ly/ 9 | 10 | ************************************************* 11 | */ 12 | 13 | 14 | /*------------------------------------------- 15 | Fonts 16 | -------------------------------------------*/ 17 | 18 | 19 | 20 | /*------------------------------------------- 21 | Flag 22 | (Thanks Jeremy: http://adactio.com/journal/5429/) 23 | -------------------------------------------*/ 24 | body:after { content: 'mini'; display: none; } 25 | 26 | 27 | 28 | /*------------------------------------------- 29 | Base 30 | -------------------------------------------*/ 31 | * { margin: 0; padding: 0; } 32 | *, *:before, *:after { 33 | -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 34 | } 35 | html { font-size: 62.5%; } /* for rems */ 36 | body { font-family: 'Karla', Helvetica, Arial, sans-serif; color: #333; } 37 | 38 | 39 | /* block level */ 40 | 41 | h1, .h1 { font: bold 4.2rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 0.5em; } 42 | h2, .h2 { font: bold 1.8rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 1em; } 43 | h3, .h3 { font: bold 1.5rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 1em; } 44 | h4, h5, h6, .h4, .h5, .h6 { font: bold 1.2rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 1em; } 45 | 46 | p, ul, dl, ol, table { font-size: 1.6rem; margin: 0 0 1.5em; color: #777; } 47 | ul { margin-left: 20px; font-size: 1.4rem; } 48 | li { margin: 0 0 0.3em; } 49 | 50 | form { margin: 0 0 1.5em; } 51 | 52 | /* inline */ 53 | 54 | label { font-size: 1.6rem; } 55 | input, select, textarea { } 56 | input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { } 57 | input.empty::-webkit-input-placeholder, textarea.empty::-webkit-input-placeholder { color: red; } 58 | input.empty:-moz-placeholder, textarea.empty:-moz-placeholder { color: red; } 59 | .error { color: red; } 60 | 61 | table { } 62 | td { padding: 0.25em 1em; border-top: 1px solid #aaa; } 63 | 64 | em { font-style: italic; } 65 | strong { font-weight: bold; } 66 | 67 | mark { background: none; font-style: normal; } 68 | 69 | video { width: 100%; height: auto; } 70 | 71 | a { text-decoration: none; color: #ff4000; position: relative; } 72 | a:after { content: ''; border-bottom: 1px solid #aaa; position: absolute; bottom: -0.3em; width: 100%; left: 0; opacity: 0; transition: all 0.25s linear; -moz-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -o-transition: all 0.25s linear; } 73 | a:hover:after { opacity: 1; bottom: -0.07em; } 74 | 75 | img { display: block; margin: 0 10px 10px 0; max-width: 100%; } 76 | 77 | a img { border: none; } 78 | 79 | i { font-style: normal; } 80 | b { font-weight: normal; } 81 | 82 | abbr, abbr[title], acronym { font-size: 75%; letter-spacing: 0.2em; text-transform: uppercase; border: none; } 83 | 84 | code { font: 1.4rem/1 Consolas, 'Courier New', Courier, monospace; color: #999; } 85 | 86 | sub, sup { line-height: 0; } 87 | 88 | ::selection { background: #2a69c2; color: #fff; } 89 | ::-moz-selection { background: #2a69c2; color: #fff; } 90 | 91 | 92 | /*------------------------------------------- 93 | Global 94 | -------------------------------------------*/ 95 | 96 | /* Phark Image Replacement - http://phark.typepad.com/phark/2003/08/accessible_imag.html */ 97 | .phark { display: block; text-indent: -9999px; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; } 98 | 99 | /* Trimming Outline in Firefox - http://snook.ca/archives/html_and_css/trimming_long_o */ 100 | /*\*/ .phark-link { overflow: hidden; } /**/ 101 | 102 | /* Easy Clearing - http://www.positioniseverything.net/easyclearing.html */ 103 | .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 104 | 105 | .offscreen { position: absolute; left: -9999px; display: block; } 106 | .onscreen { left: 0; } 107 | 108 | .hide { display: none; } 109 | 110 | .no-bullets { list-style: none; } 111 | 112 | .bulleted { list-style: disc; } 113 | 114 | .uppercase { text-transform: uppercase; } 115 | 116 | .rwd-break { display: block; } 117 | 118 | 119 | /*------------------------------------------- 120 | Modules 121 | -------------------------------------------*/ 122 | .page-header { border-top: 10px solid #000; padding: 2em 2.5% 1em; border-bottom: 1px solid #000; margin: 0 0 2em; } 123 | .page-header-title { margin: 0 0 0.25em; line-height: 1; } 124 | .page-header-subtitle { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.1em; } 125 | 126 | .entry { border-bottom: 1px solid #ccc; padding: 2em 0 0; position: relative; } 127 | .entry-title { font-weight: normal; font-size: 3rem; margin: 0 0 0.1em; } 128 | .entry-future .entry-title { color: #9e9e9e; } 129 | .entry-title:before { content: ''; display: block; width: 20px; height: 20px; border: 2px solid #000; border-radius: 20px; background: #000; position: absolute; left: -43px; top: 0.95em; } 130 | .entry-future .entry-title:before { border-color: #c2c2c2; background: #fff; } 131 | .entry-title:after { content: ''; display: block; position: absolute; top: 1.1em; left: -1.27em; width: 12px; height: 10px; background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEuMzE0cHgiIGhlaWdodD0iOS4xOTJweCIgdmlld0JveD0iMCAwIDExLjMxNCA5LjE5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTEuMzE0IDkuMTkyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOS4xOTIsMCA0LjI0Myw0Ljk1IDIuMTIxLDIuODI4IDAsNC45NSAyLjEyMSw3LjA3MSA0LjI0Myw5LjE5MiA2LjM2NCw3LjA3MSAxMS4zMTQsMi4xMjEgIi8+DQo8L3N2Zz4NCg==) no-repeat 0 0; 132 | } 133 | .entry-date { font-style: italic; color: #bababa; } 134 | .entry-future .entry-date { color: #ccc; } 135 | 136 | 137 | 138 | /*------------------------------------------- 139 | Page Specific 140 | -------------------------------------------*/ 141 | .main { border-left: 3px solid #f1f1f1; width: 85%; margin: 0 auto; padding: 0 0 0 30px; } 142 | 143 | 144 | 145 | @media screen and (min-width: 800px) { 146 | 147 | .wrap { width: 95%; max-width: 1100px; margin: 0 auto 0 1em; position: relative; padding: 6em 0 10em; } 148 | .page-header-wrap { width: 35%; margin: 0; float: left; position: fixed; top: 0; } 149 | .page-header { border-bottom: none; padding-top: 6em; } 150 | .main { width: 60%; margin: 0 0 0 40%; } 151 | .entry-title:after { top: 1.14em; } 152 | } 153 | 154 | @media screen and (min-width: 1100px) { 155 | .page-header-wrap { width: 385px; } 156 | 157 | } 158 | --------------------------------------------------------------------------------