├── README.md
├── c
    └── project-hub.css
├── index.html
└── j
    └── project-hub.js


/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6 | 
  7 | <head>    
  8 |     <title>Client Name Project Hub</title>
  9 |     <meta charset="utf-8" />
 10 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 11 |     <meta name="description" content="" />
 12 | 
 13 |     <!-- http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho -->
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 15 | 
 16 |     <link href="http://fonts.googleapis.com/css?family=Karla:400,700,400italic" rel="stylesheet" type="text/css" />
 17 |     <link href="../c/project-hub.css" rel="stylesheet" type="text/css" />
 18 | 
 19 | </head>
 20 | 
 21 | <body>
 22 | 
 23 |     <div class="wrap clearfix">
 24 | 
 25 | 
 26 |         <div class="page-header-wrap">
 27 | 
 28 |             <header class="page-header" role="banner">
 29 |                 <h1 class="page-header-title">Client Name</h1>
 30 |                 <h2 class="page-header-subtitle">Project Hub</h2>
 31 |             </header>       
 32 | 
 33 |         </div><!-- .page-header-wrap -->
 34 | 
 35 | 
 36 | 
 37 |         <section role="main" class="main">
 38 | 
 39 | 
 40 |             <article class="entry entry-future">
 41 |                 <h1 class="entry-title">Design Round 11</h1>
 42 |                 <p class="entry-date">June 4, 2014</p>
 43 |                     
 44 |             </article><!-- .entry -->
 45 | 
 46 | 
 47 | 
 48 |             <article class="entry entry-future">
 49 |                 <h1 class="entry-title">Design Round 10</h1>
 50 |                 <p class="entry-date">June 4, 2014</p>
 51 |                     
 52 |             </article><!-- .entry -->
 53 | 
 54 | 
 55 | 
 56 |             <article class="entry entry-future">
 57 |                 <h1 class="entry-title">Design Round 9</h1>
 58 |                 <p class="entry-date">June 4, 2014</p>
 59 |                     
 60 |             </article><!-- .entry -->
 61 | 
 62 | 
 63 | 
 64 |             <article class="entry entry-future">
 65 |                 <h1 class="entry-title">Design Round 8</h1>
 66 |                 <p class="entry-date">June 4, 2014</p>
 67 |                     
 68 |             </article><!-- .entry -->
 69 | 
 70 | 
 71 | 
 72 |             <article class="entry entry-future">
 73 |                 <h1 class="entry-title">Design Round 7</h1>
 74 |                 <p class="entry-date">June 4, 2014</p>
 75 |                     
 76 |             </article><!-- .entry -->
 77 | 
 78 | 
 79 | 
 80 |             <article class="entry entry-future">
 81 |                 <h1 class="entry-title">Design Round 6</h1>
 82 |                 <p class="entry-date">June 4, 2014</p>
 83 |                     
 84 |             </article><!-- .entry -->
 85 | 
 86 | 
 87 | 
 88 |             <article class="entry entry-future">
 89 |                 <h1 class="entry-title">Design Round 5</h1>
 90 |                 <p class="entry-date">June 4, 2014</p>
 91 |                     
 92 |             </article><!-- .entry -->
 93 | 
 94 | 
 95 | 
 96 |             <article class="entry entry-future">
 97 |                 <h1 class="entry-title">Design Round 4</h1>
 98 |                 <p class="entry-date">June 4, 2014</p>
 99 |                     
100 |             </article><!-- .entry -->
101 | 
102 | 
103 | 
104 |             <article class="entry entry-latest">
105 |                 <h1 class="entry-title">Design Round 3</h1>
106 |                 <p class="entry-date">June 4, 2014</p>
107 | 
108 |                 <p>Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.</p>
109 | 
110 |                 <ul>
111 |                     <li><a href="#">Home</a></li>
112 |                     <li><a href="#">Home Variation</a></li>
113 |                     <li><a href="#">About</a></li>
114 |                 </ul>
115 |                     
116 |             </article><!-- .entry -->
117 | 
118 | 
119 | 
120 |             <article class="entry">
121 |                 <h1 class="entry-title">Design Round 2 a long title of this entry</h1>
122 |                 <p class="entry-date">June 4, 2014</p>
123 | 
124 |                 <p>Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.</p>
125 | 
126 |                 <ul>
127 |                     <li><a href="#">Home</a></li>
128 |                     <li><a href="#">Home Variation</a></li>
129 |                     <li><a href="#">About</a></li>
130 |                 </ul>
131 |                     
132 |             </article><!-- .entry -->
133 | 
134 | 
135 | 
136 |             <article class="entry">
137 |                 <h1 class="entry-title">Design Round 1</h1>
138 |                 <p class="entry-date">June 4, 2014</p>
139 | 
140 |                 <p>Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.</p>
141 | 
142 |                 <ul>
143 |                     <li><a href="#">Home</a></li>
144 |                     <li><a href="#">Home Variation</a></li>
145 |                     <li><a href="#">About</a></li>
146 |                 </ul>
147 |                     
148 |             </article><!-- .entry -->
149 | 
150 | 
151 |         </section><!-- .main -->
152 | 
153 |     </div><!-- .wrap -->
154 | 
155 |     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
156 |     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
157 |     <script src="../j/project-hub.js"></script>
158 |     
159 | 
160 | </body>
161 | </html>
162 | 
163 |     
164 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------