├── README.md ├── css ├── component.css ├── component2.css └── demo.css ├── fonts └── bpicons │ ├── bpicons.eot │ ├── bpicons.svg │ ├── bpicons.ttf │ ├── bpicons.woff │ └── license.txt ├── img ├── profile1.jpg └── profile2.jpg ├── index.html ├── index2.html └── js ├── cbpSplitLayout.js ├── classie.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | Blueprint: Split Layout 2 | ========= 3 | 4 | A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effects. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=16693) 7 | 8 | [demo](http://tympanus.net/Blueprints/SplitLayout/) 9 | 10 | The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration. 11 | Check out all of our Blueprints [here](http://tympanus.net/codrops/category/blueprints/) 12 | 13 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 14 | 15 | Read more here: [License](http://tympanus.net/codrops/licensing/) 16 | 17 | [© Codrops 2013](http://www.codrops.com) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | html, body, 2 | .container { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | overflow-y: scroll; 10 | background: #333; 11 | } 12 | 13 | .splitlayout { 14 | position: relative; 15 | overflow-x: hidden; 16 | min-height: 100%; 17 | width: 100%; 18 | } 19 | 20 | /* Intro sides */ 21 | .side { 22 | position: fixed; 23 | top: 0; 24 | z-index: 100; 25 | width: 50%; 26 | height: 100%; 27 | text-align: center; 28 | -webkit-backface-visibility: hidden; 29 | } 30 | 31 | .open-left .side, 32 | .open-right .side { 33 | cursor: default; 34 | } 35 | 36 | .overlay { 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | z-index: 499; 41 | visibility: hidden; 42 | width: 100%; 43 | height: 100%; 44 | opacity: 0; 45 | } 46 | 47 | .side-left .overlay { 48 | background: rgba(0,0,0,0.7); 49 | } 50 | 51 | .side-right .overlay { 52 | background: rgba(0,0,0,0.3); 53 | } 54 | 55 | .side-left { 56 | left: 0; 57 | background: #47a3da; 58 | color: #fff; 59 | outline: 1px solid #47a3da; /* avoid gap */ 60 | } 61 | 62 | .side-right { 63 | right: 0; 64 | background: #fff; 65 | color: #47a3da; 66 | outline: 1px solid #fff; /* avoid gap */ 67 | } 68 | 69 | /* Intro content, profile image and name, back button */ 70 | .intro-content { 71 | position: absolute; 72 | top: 50%; 73 | left: 50%; 74 | padding: 0 1em; 75 | width: 50%; 76 | cursor: pointer; 77 | -webkit-transform: translateY(-50%) translateX(-50%); 78 | transform: translateY(-50%) translateX(-50%); 79 | } 80 | 81 | .profile { 82 | margin: 0 auto; 83 | width: 140px; 84 | height: 140px; 85 | border-radius: 50%; 86 | background: #47a3da; 87 | } 88 | 89 | .profile img { 90 | max-width: 100%; 91 | border-radius: 50%; 92 | opacity: 0.6; 93 | } 94 | 95 | .intro-content h1 > span { 96 | display: block; 97 | white-space: nowrap; 98 | } 99 | 100 | .intro-content h1 > span:first-child { 101 | font-weight: 300; 102 | font-size: 2em; 103 | } 104 | 105 | .intro-content h1 > span:nth-child(2) { 106 | position: relative; 107 | margin-top: 0.5em; 108 | padding: 0.8em; 109 | text-transform: uppercase; 110 | letter-spacing: 1px; 111 | font-size: 0.8em; 112 | } 113 | 114 | .intro-content h1 > span:nth-child(2):before { 115 | position: absolute; 116 | top: 0; 117 | left: 25%; 118 | width: 50%; 119 | height: 2px; 120 | background: #fff; 121 | content: ''; 122 | } 123 | 124 | .side-right .intro-content h1 > span:nth-child(2):before { 125 | background: #47a3da; 126 | } 127 | 128 | .back { 129 | position: fixed; 130 | top: 2.6em; 131 | z-index: 500; 132 | display: block; 133 | visibility: hidden; 134 | width: 50px; 135 | height: 50px; 136 | border-radius: 50%; 137 | color: #47a3da; 138 | text-align: center; 139 | font-size: 22px; 140 | line-height: 44px; 141 | opacity: 0; 142 | pointer-events: none; 143 | } 144 | 145 | .mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */ 146 | position: absolute; 147 | } 148 | 149 | .back-left { 150 | left: 12.5%; 151 | -webkit-transform: translateX(-50%); 152 | transform: translateX(-50%); 153 | } 154 | 155 | .back-right { 156 | right: 12.5%; 157 | -webkit-transform: translateX(50%); 158 | transform: translateX(50%); 159 | color: #fff; 160 | } 161 | 162 | .open-right .back-left, 163 | .open-left .back-right { 164 | visibility: visible; 165 | opacity: 1; 166 | -webkit-transition-delay: 0.3s; 167 | transition-delay: 0.3s; 168 | pointer-events: auto; 169 | } 170 | 171 | .back:hover { 172 | color: #ddd; 173 | } 174 | 175 | /* Pages */ 176 | .page { 177 | position: relative; 178 | top: 0; 179 | overflow: auto; 180 | min-height: 100%; 181 | width: 75%; 182 | height: auto; 183 | font-size: 1.4em; 184 | -webkit-backface-visibility: hidden; 185 | } 186 | 187 | .page-right { 188 | left: 25%; 189 | outline: 5px solid #ecf0f1; /* avoid rounding gaps */ 190 | background: #ecf0f1; 191 | color: #97a8b2; 192 | -webkit-transform: translateX(100%); 193 | transform: translateX(100%); 194 | } 195 | 196 | .splitlayout.open-right { 197 | background: #ecf0f1; 198 | } 199 | 200 | .page-left { 201 | left: 0; 202 | outline: 5px solid #34495e; /* avoid rounding gaps */ 203 | background: #34495e; 204 | color: #fff; 205 | text-align: right; 206 | -webkit-transform: translateX(-100%); 207 | transform: translateX(-100%); 208 | } 209 | 210 | .splitlayout.open-left { 211 | background: #34495e; 212 | } 213 | 214 | /* Inner page content */ 215 | .page-inner { 216 | padding: 2em; 217 | } 218 | 219 | .page-inner section { 220 | padding-bottom: 1em; 221 | } 222 | 223 | .page-inner h2 { 224 | margin: 0 0 1em 0; 225 | font-weight: 300; 226 | font-size: 2.4em; 227 | } 228 | 229 | .page-inner p { 230 | font-weight: 300; 231 | font-size: 1.2em; 232 | } 233 | 234 | /* All transitions */ 235 | .side, 236 | .page { 237 | -webkit-transition: -webkit-transform 0.6s; 238 | transition: transform 0.6s; 239 | } 240 | 241 | .overlay { 242 | -webkit-transition: opacity 0.6s, visibility 0.1s 0.6s; 243 | transition: opacity 0.6s, visibility 0.1s 0.6s; 244 | } 245 | 246 | .intro-content { 247 | -webkit-transition: -webkit-transform 0.6s, top 0.6s; 248 | transition: transform 0.6s, top 0.6s; 249 | } 250 | 251 | .intro-content h1, 252 | .back { 253 | -webkit-transition: opacity 0.3s; 254 | transition: opacity 0.3s; 255 | } 256 | 257 | /* Open and close */ 258 | 259 | /* We need to set the position and overflow for the respective page scroll */ 260 | .reset-layout .page, 261 | .splitlayout.open-right .page-left, 262 | .splitlayout.open-left .page-right, 263 | .splitlayout.close-right .page-left, 264 | .splitlayout.close-left .page-right { 265 | position: absolute; 266 | overflow: hidden; 267 | height: 100%; 268 | } 269 | 270 | .splitlayout.open-right .page-right, 271 | .splitlayout.open-left .page-left { 272 | position: relative; 273 | overflow: auto; 274 | height: auto; 275 | } 276 | 277 | .open-right .side-left .overlay, 278 | .open-left .side-right .overlay { 279 | visibility: visible; 280 | opacity: 1; 281 | -webkit-transition: opacity 0.6s; 282 | transition: opacity 0.6s; 283 | } 284 | 285 | /* Right side open */ 286 | .open-right .side-left { 287 | -webkit-transform: translateX(-60%); 288 | transform: translateX(-60%); 289 | } 290 | 291 | .open-right .side-right { 292 | z-index: 200; 293 | -webkit-transform: translateX(-150%); 294 | transform: translateX(-150%); 295 | } 296 | 297 | .close-right .side-right { 298 | z-index: 200; 299 | } 300 | 301 | .open-right .side-right .intro-content { 302 | -webkit-transform: translateY(-50%) translateX(0%) scale(0.6); 303 | transform: translateY(-50%) translateX(0%) scale(0.6); 304 | } 305 | 306 | .open-right .page-right { 307 | -webkit-transform: translateX(0%); 308 | transform: translateX(0%); 309 | } 310 | 311 | /* Left side open */ 312 | .open-left .side-right { 313 | -webkit-transform: translateX(60%); 314 | transform: translateX(60%); 315 | } 316 | 317 | .open-left .side-left { 318 | z-index: 200; 319 | -webkit-transform: translateX(150%); 320 | transform: translateX(150%); 321 | } 322 | 323 | .close-left .side-left { 324 | z-index: 200; 325 | } 326 | 327 | .open-left .side-left .intro-content { 328 | -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6); 329 | transform: translateY(-50%) translateX(-100%) scale(0.6); 330 | } 331 | 332 | .open-left .codropsheader { 333 | opacity: 0; 334 | visibility: hidden; 335 | -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s; 336 | transition: opacity 0.3s, visibility 0.1s 0.3s; 337 | } 338 | 339 | .open-left .page-left { 340 | -webkit-transform: translateX(0%); 341 | transform: translateX(0%); 342 | } 343 | 344 | /* Media Queries */ 345 | @media screen and (max-width: 83em) { 346 | .intro-content { font-size: 60%; } 347 | } 348 | 349 | @media screen and (max-width: 58em) { 350 | body { font-size: 90%; } 351 | } 352 | 353 | @media screen and (max-width: 49.4375em) { 354 | .open-right .side-right { 355 | -webkit-transform: translateX(-175%); 356 | transform: translateX(-175%); 357 | } 358 | 359 | .open-right .side-left { 360 | -webkit-transform: translateX(-100%); 361 | transform: translateX(-100%); 362 | } 363 | 364 | .open-left .side-right { 365 | -webkit-transform: translateX(100%); 366 | transform: translateX(100%); 367 | } 368 | 369 | .open-left .side-left { 370 | -webkit-transform: translateX(175%); 371 | transform: translateX(175%); 372 | } 373 | 374 | .page { 375 | width: 100%; 376 | } 377 | 378 | .page-right { 379 | left: 0; 380 | padding-left: 15%; 381 | } 382 | 383 | .page-left { 384 | padding-right: 15%; 385 | } 386 | 387 | .intro-content { 388 | width: 100%; 389 | } 390 | 391 | .open-right .side-right .intro-content { 392 | top: 100%; 393 | -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5); 394 | transform: translateY(-150px) translateX(-12.5%) scale(0.5); 395 | } 396 | 397 | .open-left .side-left .intro-content { 398 | top: 100%; 399 | -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5); 400 | transform: translateY(-150px) translateX(-87.5%) scale(0.5); 401 | } 402 | 403 | .open-right .intro-content h1, 404 | .open-left .intro-content h1 { 405 | opacity: 0; 406 | } 407 | 408 | .back-left { 409 | left: 6.25%; 410 | } 411 | 412 | .back-right { 413 | right: 6.25%; 414 | } 415 | } 416 | 417 | @media screen and (max-width: 42.5em) { 418 | body { font-size: 80%; } 419 | .intro-content { font-size: 50%; } 420 | } 421 | 422 | @media screen and (max-height: 41.125em) { 423 | .intro-content { 424 | -webkit-transform: translateY(-25%) translateX(-50%); 425 | transform: translateY(-25%) translateX(-50%); 426 | } 427 | } 428 | 429 | @media screen and (max-width: 39.375em) { 430 | .intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); } 431 | } 432 | 433 | @media screen and (max-width: 320px) { 434 | body { font-size: 70%; } 435 | } -------------------------------------------------------------------------------- /css/component2.css: -------------------------------------------------------------------------------- 1 | html, body, 2 | .container { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | overflow-y: scroll; 10 | background: #333; 11 | } 12 | 13 | .splitlayout { 14 | position: relative; 15 | overflow-x: hidden; 16 | min-height: 100%; 17 | width: 100%; 18 | } 19 | 20 | /* Intro sides */ 21 | .side { 22 | position: fixed; 23 | top: 0; 24 | z-index: 100; 25 | width: 50%; 26 | height: 100%; 27 | text-align: center; 28 | -webkit-backface-visibility: hidden; 29 | } 30 | 31 | .open-left .side, 32 | .open-right .side { 33 | cursor: default; 34 | } 35 | 36 | .overlay { 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | z-index: 499; 41 | visibility: hidden; 42 | width: 100%; 43 | height: 100%; 44 | opacity: 0; 45 | } 46 | 47 | .side-left .overlay { 48 | background: rgba(0,0,0,0.7); 49 | } 50 | 51 | .side-right .overlay { 52 | background: rgba(0,0,0,0.3); 53 | } 54 | 55 | .side-left { 56 | left: 0; 57 | background: #47a3da; 58 | color: #fff; 59 | outline: 1px solid #47a3da; /* avoid gap */ 60 | } 61 | 62 | .side-right { 63 | right: 0; 64 | background: #fff; 65 | color: #47a3da; 66 | outline: 1px solid #fff; /* avoid gap */ 67 | } 68 | 69 | /* Intro content, profile image and name, back button */ 70 | .intro-content { 71 | position: absolute; 72 | top: 50%; 73 | left: 50%; 74 | padding: 0 1em; 75 | width: 50%; 76 | cursor: pointer; 77 | -webkit-transform: translateY(-50%) translateX(-50%); 78 | transform: translateY(-50%) translateX(-50%); 79 | } 80 | 81 | .profile { 82 | margin: 0 auto; 83 | width: 140px; 84 | height: 140px; 85 | border-radius: 50%; 86 | background: #47a3da; 87 | } 88 | 89 | .profile img { 90 | max-width: 100%; 91 | border-radius: 50%; 92 | opacity: 0.6; 93 | } 94 | 95 | .intro-content h1 > span { 96 | display: block; 97 | white-space: nowrap; 98 | } 99 | 100 | .intro-content h1 > span:first-child { 101 | font-weight: 300; 102 | font-size: 2em; 103 | } 104 | 105 | .intro-content h1 > span:nth-child(2) { 106 | position: relative; 107 | margin-top: 0.5em; 108 | padding: 0.8em; 109 | text-transform: uppercase; 110 | letter-spacing: 1px; 111 | font-size: 0.8em; 112 | } 113 | 114 | .intro-content h1 > span:nth-child(2):before { 115 | position: absolute; 116 | top: 0; 117 | left: 25%; 118 | width: 50%; 119 | height: 2px; 120 | background: #fff; 121 | content: ''; 122 | } 123 | 124 | .side-right .intro-content h1 > span:nth-child(2):before { 125 | background: #47a3da; 126 | } 127 | 128 | .back { 129 | position: fixed; 130 | top: 2.6em; 131 | z-index: 500; 132 | display: block; 133 | visibility: hidden; 134 | width: 50px; 135 | height: 50px; 136 | border-radius: 50%; 137 | color: #47a3da; 138 | text-align: center; 139 | font-size: 22px; 140 | line-height: 44px; 141 | opacity: 0; 142 | pointer-events: none; 143 | } 144 | 145 | .mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */ 146 | position: absolute; 147 | } 148 | 149 | .back-left { 150 | left: 12.5%; 151 | -webkit-transform: translateX(-50%); 152 | transform: translateX(-50%); 153 | } 154 | 155 | .back-right { 156 | right: 12.5%; 157 | -webkit-transform: translateX(50%); 158 | transform: translateX(50%); 159 | color: #fff; 160 | } 161 | 162 | .open-right .back-left, 163 | .open-left .back-right { 164 | visibility: visible; 165 | opacity: 1; 166 | -webkit-transition-delay: 0.3s; 167 | transition-delay: 0.3s; 168 | pointer-events: auto; 169 | } 170 | 171 | .back:hover { 172 | color: #ddd; 173 | } 174 | 175 | /* Pages */ 176 | .page { 177 | position: relative; 178 | top: 0; 179 | overflow: auto; 180 | min-height: 100%; 181 | width: 75%; 182 | height: auto; 183 | font-size: 1.4em; 184 | -webkit-backface-visibility: hidden; 185 | } 186 | 187 | .page-right { 188 | left: 25%; 189 | outline: 5px solid #ecf0f1; /* avoid rounding gaps */ 190 | background: #ecf0f1; 191 | color: #97a8b2; 192 | -webkit-transform: translateX(100%); 193 | transform: translateX(100%); 194 | } 195 | 196 | .page-left { 197 | left: 0; 198 | outline: 5px solid #34495e; /* avoid rounding gaps */ 199 | background: #34495e; 200 | color: #fff; 201 | text-align: right; 202 | -webkit-transform: translateX(-100%); 203 | transform: translateX(-100%); 204 | } 205 | 206 | /* Inner page content */ 207 | .page-inner { 208 | padding: 2em; 209 | } 210 | 211 | .page-inner section { 212 | padding-bottom: 1em; 213 | } 214 | 215 | .page-inner h2 { 216 | margin: 0 0 1em 0; 217 | font-weight: 300; 218 | font-size: 2.4em; 219 | } 220 | 221 | .page-inner p { 222 | font-weight: 300; 223 | font-size: 1.2em; 224 | } 225 | 226 | /* All transitions */ 227 | .side, 228 | .page { 229 | -webkit-transition: -webkit-transform 0.5s ease-in-out; 230 | transition: transform 0.5s ease-in-out; 231 | } 232 | 233 | .overlay { 234 | -webkit-transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out; 235 | transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out; 236 | } 237 | 238 | .intro-content { 239 | -webkit-transition: -webkit-transform 0.5s ease-in-out, top 0.5s ease-in-out; 240 | transition: transform 0.5s ease-in-out, top 0.5s ease-in-out; 241 | } 242 | 243 | .intro-content h1, 244 | .back { 245 | -webkit-transition: opacity 0.3s ease-in-out; 246 | transition: opacity 0.3s ease-in-out; 247 | } 248 | 249 | /* Open and close */ 250 | 251 | /* We need to set the position and overflow for the respective page scroll */ 252 | .reset-layout .page, 253 | .splitlayout.open-right .page-left, 254 | .splitlayout.open-left .page-right, 255 | .splitlayout.close-right .page-left, 256 | .splitlayout.close-left .page-right { 257 | position: absolute; 258 | overflow: hidden; 259 | height: 100%; 260 | } 261 | 262 | .splitlayout.open-right .page-right, 263 | .splitlayout.open-left .page-left { 264 | position: relative; 265 | overflow: auto; 266 | height: auto; 267 | } 268 | 269 | .open-right .side-left .overlay, 270 | .open-left .side-right .overlay { 271 | visibility: visible; 272 | opacity: 1; 273 | -webkit-transition: opacity 0.5s ease-in-out; 274 | transition: opacity 0.5s ease-in-out; 275 | } 276 | 277 | /* Right side open */ 278 | .open-right .side-left { 279 | -webkit-transform: translateX(-60%) scale(.5); 280 | transform: translateX(-60%) scale(.5); 281 | } 282 | 283 | .open-right .side-right { 284 | z-index: 200; 285 | -webkit-transform: translateX(-150%); 286 | transform: translateX(-150%); 287 | } 288 | 289 | .close-right .side-right { 290 | z-index: 200; 291 | } 292 | 293 | .open-right .side-right .intro-content { 294 | -webkit-transform: translateY(-50%) translateX(0%) scale(0.6); 295 | transform: translateY(-50%) translateX(0%) scale(0.6); 296 | } 297 | 298 | .open-right .page-right { 299 | -webkit-transform: translateX(0%); 300 | transform: translateX(0%); 301 | } 302 | 303 | /* Left side open */ 304 | .open-left .side-right { 305 | -webkit-transform: translateX(60%) scale(.5); 306 | transform: translateX(60%) scale(.5); 307 | } 308 | 309 | .open-left .side-left { 310 | z-index: 200; 311 | -webkit-transform: translateX(150%); 312 | transform: translateX(150%); 313 | } 314 | 315 | .close-left .side-left { 316 | z-index: 200; 317 | } 318 | 319 | .open-left .side-left .intro-content { 320 | -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6); 321 | transform: translateY(-50%) translateX(-100%) scale(0.6); 322 | } 323 | 324 | .open-left .codropsheader { 325 | opacity: 0; 326 | visibility: hidden; 327 | -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s; 328 | transition: opacity 0.3s, visibility 0.1s 0.3s; 329 | } 330 | 331 | .open-left .page-left { 332 | -webkit-transform: translateX(0%); 333 | transform: translateX(0%); 334 | } 335 | 336 | /* Media Queries */ 337 | @media screen and (max-width: 83em) { 338 | .intro-content { font-size: 60%; } 339 | } 340 | 341 | @media screen and (max-width: 58em) { 342 | body { font-size: 90%; } 343 | } 344 | 345 | @media screen and (max-width: 49.4375em) { 346 | .open-right .side-right { 347 | -webkit-transform: translateX(-175%); 348 | transform: translateX(-175%); 349 | } 350 | 351 | .open-right .side-left { 352 | -webkit-transform: translateX(-100%) scale(.7); 353 | transform: translateX(-100%) scale(.7); 354 | } 355 | 356 | .open-left .side-right { 357 | -webkit-transform: translateX(100%) scale(.7); 358 | transform: translateX(100%) scale(.7); 359 | } 360 | 361 | .open-left .side-left { 362 | -webkit-transform: translateX(175%); 363 | transform: translateX(175%); 364 | } 365 | 366 | .page { 367 | width: 100%; 368 | } 369 | 370 | .page-right { 371 | left: 0; 372 | padding-left: 15%; 373 | } 374 | 375 | .page-left { 376 | padding-right: 15%; 377 | } 378 | 379 | .intro-content { 380 | width: 100%; 381 | } 382 | 383 | .open-right .side-right .intro-content { 384 | top: 100%; 385 | -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5); 386 | transform: translateY(-150px) translateX(-12.5%) scale(0.5); 387 | } 388 | 389 | .open-left .side-left .intro-content { 390 | top: 100%; 391 | -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5); 392 | transform: translateY(-150px) translateX(-87.5%) scale(0.5); 393 | } 394 | 395 | .open-right .intro-content h1, 396 | .open-left .intro-content h1 { 397 | opacity: 0; 398 | } 399 | 400 | .back-left { 401 | left: 6.25%; 402 | } 403 | 404 | .back-right { 405 | right: 6.25%; 406 | } 407 | } 408 | 409 | @media screen and (max-width: 42.5em) { 410 | body { font-size: 80%; } 411 | .intro-content { font-size: 50%; } 412 | } 413 | 414 | @media screen and (max-height: 41.125em) { 415 | .intro-content { 416 | -webkit-transform: translateY(-25%) translateX(-50%); 417 | transform: translateY(-25%) translateX(-50%); 418 | } 419 | } 420 | 421 | @media screen and (max-width: 39.375em) { 422 | .intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); } 423 | } 424 | 425 | @media screen and (max-width: 320px) { 426 | body { font-size: 70%; } 427 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Blueprint Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | @font-face { 4 | font-family: 'bpicons'; 5 | src:url('../fonts/bpicons/bpicons.eot'); 6 | src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/bpicons/bpicons.woff') format('woff'), 8 | url('../fonts/bpicons/bpicons.ttf') format('truetype'), 9 | url('../fonts/bpicons/bpicons.svg#bpicons') format('svg'); 10 | font-weight: normal; 11 | font-style: normal; 12 | } /* Made with http://icomoon.io/ */ 13 | 14 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 15 | body, html { font-size: 100%; padding: 0; margin: 0;} 16 | 17 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 18 | .clearfix:before, .clearfix:after { content: " "; display: table; } 19 | .clearfix:after { clear: both; } 20 | 21 | body { 22 | font-family: 'Lato', Calibri, Arial, sans-serif; 23 | color: #fff; 24 | background: #333; 25 | } 26 | 27 | a { 28 | color: #ccc; 29 | text-decoration: none; 30 | } 31 | 32 | a:hover { 33 | color: #000; 34 | } 35 | 36 | .codropsheader { 37 | width: 100%; 38 | margin: 0 auto; 39 | text-align: left; 40 | padding: 1.4em; 41 | opacity: 0.7; 42 | visibility: visible; 43 | -webkit-transition: opacity 0.3s; 44 | transition: opacity 0.3s; 45 | } 46 | 47 | .codropsheader h1 { 48 | font-size: 2.125em; 49 | line-height: 1.3; 50 | margin: 0 0 0.6em 0; 51 | float: left; 52 | font-weight: 400; 53 | } 54 | 55 | .codropsheader > span { 56 | display: block; 57 | position: relative; 58 | z-index: 9999; 59 | font-weight: 700; 60 | text-transform: uppercase; 61 | letter-spacing: 0.5em; 62 | padding: 0 0 0.6em 0.1em; 63 | } 64 | 65 | .codropsheader > span span:after { 66 | width: 30px; 67 | height: 30px; 68 | left: -12px; 69 | font-size: 50%; 70 | top: -8px; 71 | font-size: 75%; 72 | position: relative; 73 | } 74 | 75 | .codropsheader > span span:hover:before { 76 | content: attr(data-content); 77 | text-transform: none; 78 | text-indent: 0; 79 | letter-spacing: 0; 80 | font-weight: 300; 81 | font-size: 110%; 82 | padding: 0.8em 1em; 83 | line-height: 1.2; 84 | text-align: left; 85 | left: auto; 86 | margin-left: 4px; 87 | position: absolute; 88 | color: #47a3da; 89 | background: #fff; 90 | } 91 | 92 | .codropsheader nav { 93 | float: left; 94 | text-align: center; 95 | margin-left: 1.5em; 96 | display: block; 97 | } 98 | 99 | .codropsheader nav a { 100 | display: inline-block; 101 | position: relative; 102 | text-align: left; 103 | width: 2.5em; 104 | height: 2.5em; 105 | background: #47a3da; 106 | border-radius: 50%; 107 | margin: 0 0.1em; 108 | border: 3px solid #fff; 109 | } 110 | 111 | .codropsheader nav a > span { 112 | display: none; 113 | } 114 | 115 | .codropsheader nav a:hover:before { 116 | content: attr(data-info); 117 | color: #fff; 118 | position: absolute; 119 | width: 600%; 120 | top: 120%; 121 | text-align: right; 122 | right: 0; 123 | pointer-events: none; 124 | } 125 | 126 | .codropsheader nav a:hover { 127 | background: #fff; 128 | } 129 | 130 | .bp-icon:after { 131 | font-family: 'bpicons'; 132 | speak: none; 133 | font-style: normal; 134 | font-weight: normal; 135 | font-variant: normal; 136 | text-transform: none; 137 | text-align: center; 138 | color: #fff; 139 | -webkit-font-smoothing: antialiased; 140 | } 141 | 142 | .codropsheader nav .bp-icon:after { 143 | position: absolute; 144 | top: 0; 145 | left: 0; 146 | width: 100%; 147 | height: 100%; 148 | line-height: 2; 149 | text-indent: 0; 150 | } 151 | 152 | .codropsheader nav a:hover:after { 153 | color: #47a3da; 154 | } 155 | 156 | .bp-icon-next:after { 157 | content: "\e000"; 158 | } 159 | .bp-icon-drop:after { 160 | content: "\e001"; 161 | } 162 | .bp-icon-archive:after { 163 | content: "\e002"; 164 | } 165 | .bp-icon-about:after { 166 | content: "\e003"; 167 | } 168 | .bp-icon-prev:after { 169 | content: "\e004"; 170 | } 171 | 172 | .demos { 173 | display: inline-block; 174 | line-height: 2.4em; 175 | margin-left: 1em; 176 | float: right; 177 | } 178 | 179 | .demos a { 180 | display: inline-block; 181 | color: #fff; 182 | margin: 0 0.5em; 183 | } 184 | 185 | .demos a:hover, 186 | .demos a:focus, 187 | .demos a.current { 188 | color: rgba(0,0,0,.4); 189 | } 190 | 191 | @media screen and (max-width: 73.375em) { 192 | .codropsheader { 193 | text-align: center; 194 | } 195 | .codropsheader h1, 196 | .codropsheader nav, 197 | .demos { 198 | float: none; 199 | margin: 0 auto; 200 | padding: 0.15em 0; 201 | } 202 | .codropsheader > span { 203 | padding: 0; 204 | } 205 | .codropsheader > span span:after { 206 | display: none; 207 | } 208 | } 209 | 210 | @media screen and (max-height: 30.25em) { 211 | .codropsheader nav { display: none; } 212 | } -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SplitLayout/2de436924a110af4c0999945ffcdd41561dadd90/fonts/bpicons/bpicons.eot -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SplitLayout/2de436924a110af4c0999945ffcdd41561dadd90/fonts/bpicons/bpicons.ttf -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SplitLayout/2de436924a110af4c0999945ffcdd41561dadd90/fonts/bpicons/bpicons.woff -------------------------------------------------------------------------------- /fonts/bpicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /img/profile1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SplitLayout/2de436924a110af4c0999945ffcdd41561dadd90/img/profile1.jpg -------------------------------------------------------------------------------- /img/profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SplitLayout/2de436924a110af4c0999945ffcdd41561dadd90/img/profile2.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: Split Layout 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | Blueprint 23 |

Split Layout

24 | 30 |
31 | Effect 1 32 | Effect 2 33 |
34 |
35 |
36 |
profile1
37 |

Toby Blue Web Designer

38 |
39 |
40 |
41 |
42 |
43 |
profile2
44 |

Amy White Web Developer

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |

Web Development

53 |

Scenario archetype complementary responsive script pixel sidebar sitemap keep it simple. Complementary visuals footer CSS from alan cooper delightful. Photoshop iconography simplicity user experience affordance narrative ascenders contour. Slab serif interstitial skeuomorphism illustrator design by committee simplicity alan cooper eye tracking. Typography contrast mental model typesetting affordance narrative from CSS. Retina simplicity design by committee typography oblique.

54 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

55 |
56 |
57 |

Constraints

58 |

Card-sorting dropdown constraints alan cooper prägnanz iconography. Stakeholder balsamiq italic vector composition ethnography CSS monospace hierarchy. Eye tracking serif persona focus group.

59 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

60 |

Scenario navigation complementary jony ive helvetica archetype interstitial serif front-end. Constraints pencil usability gestalt design language mockup usability testing affordance jakob nielsen.

61 |
62 |
63 |

Ligature

64 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

65 |

Paper prototype urbanized headroom typography splash screen pencil modal branding. Retina omnigraffle objectified descender navigation adobe ethnography. Innovate design by committee modern hero message. Contrast user-centered color theory keep it simple visuals bevel adobe descender splash screen. From focus group accessibility sans-serif archetype pixel-perfect complementary skeuomorphism. Focus group iconography figure-ground navigation user-centered omnigraffle from.

66 |
67 |
68 |

Ligature

69 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

70 |

Paper prototype urbanized headroom typography splash screen pencil modal branding. Retina omnigraffle objectified descender navigation adobe ethnography. Innovate design by committee modern hero message. Contrast user-centered color theory keep it simple visuals bevel adobe descender splash screen. From focus group accessibility sans-serif archetype pixel-perfect complementary skeuomorphism. Focus group iconography figure-ground navigation user-centered omnigraffle from.

71 |
72 |
73 |

Typesetting

74 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

75 |

Fireworks mobile skeuomorphism sitemap. Workflow iconography interaction design pixel-perfect serif. Mental model monospace typeface behavior change bauhaus from usability testing. Color theory user experience paper prototype narrative palette serif gradient header. Oblique modal 66-character line sketch responsive portfolio. Comic sans fireworks prägnanz monospace gradient design language jakob nielsen. Figure-ground pixel aspect ratio sketches rounded corners jony ive constraints mental model splash screen.

76 |

Placeholder text by Designer Ipsum.

77 |

Profile images are licensed under a Creative Commons BY-NC-SA 2.0 license. The images are from Greg Peverill-Conti's 1,000 faces project.

78 |
79 |
80 |
81 |
82 |
83 |
84 |

Web Design

85 |

Scenario archetype complementary responsive script pixel sidebar sitemap keep it simple. Complementary visuals footer CSS from alan cooper delightful. Photoshop iconography simplicity user experience affordance narrative ascenders contour. Slab serif interstitial skeuomorphism illustrator design by committee simplicity alan cooper eye tracking. Typography contrast mental model typesetting affordance narrative from CSS. Retina simplicity design by committee typography oblique.

86 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

87 |
88 |
89 |

Responsive

90 |

Card-sorting dropdown constraints alan cooper prägnanz iconography. Stakeholder balsamiq italic vector composition ethnography CSS monospace hierarchy. Eye tracking serif persona focus group.

91 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

92 |

Scenario navigation complementary jony ive helvetica archetype interstitial serif front-end. Constraints pencil usability gestalt design language mockup usability testing affordance jakob nielsen.

93 |
94 |
95 |

Prototype

96 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

97 |

Paper prototype urbanized headroom typography splash screen pencil modal branding. Retina omnigraffle objectified descender navigation adobe ethnography. Innovate design by committee modern hero message. Contrast user-centered color theory keep it simple visuals bevel adobe descender splash screen. From focus group accessibility sans-serif archetype pixel-perfect complementary skeuomorphism. Focus group iconography figure-ground navigation user-centered omnigraffle from.

98 |
99 |
100 |

Typography

101 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

102 |

Fireworks mobile skeuomorphism sitemap. Workflow iconography interaction design pixel-perfect serif. Mental model monospace typeface behavior change bauhaus from usability testing. Color theory user experience paper prototype narrative palette serif gradient header. Oblique modal 66-character line sketch responsive portfolio. Comic sans fireworks prägnanz monospace gradient design language jakob nielsen. Figure-ground pixel aspect ratio sketches rounded corners jony ive constraints mental model splash screen.

103 |

Placeholder text by Designer Ipsum.

104 |

Profile images are licensed under a Creative Commons BY-NC-SA 2.0 license. The images are from Greg Peverill-Conti's 1,000 faces project.

105 |
106 |
107 |
108 | → 109 | ← 110 |
111 |
112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: Split Layout 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | Blueprint 23 |

Split Layout

24 | 30 |
31 | Effect 1 32 | Effect 2 33 |
34 |
35 |
36 |
profile1
37 |

Toby Blue Web Designer

38 |
39 |
40 |
41 |
42 |
43 |
profile2
44 |

Amy White Web Developer

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |

Web Development

53 |

Scenario archetype complementary responsive script pixel sidebar sitemap keep it simple. Complementary visuals footer CSS from alan cooper delightful. Photoshop iconography simplicity user experience affordance narrative ascenders contour. Slab serif interstitial skeuomorphism illustrator design by committee simplicity alan cooper eye tracking. Typography contrast mental model typesetting affordance narrative from CSS. Retina simplicity design by committee typography oblique.

54 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

55 |
56 |
57 |

Constraints

58 |

Card-sorting dropdown constraints alan cooper prägnanz iconography. Stakeholder balsamiq italic vector composition ethnography CSS monospace hierarchy. Eye tracking serif persona focus group.

59 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

60 |

Scenario navigation complementary jony ive helvetica archetype interstitial serif front-end. Constraints pencil usability gestalt design language mockup usability testing affordance jakob nielsen.

61 |
62 |
63 |

Ligature

64 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

65 |

Paper prototype urbanized headroom typography splash screen pencil modal branding. Retina omnigraffle objectified descender navigation adobe ethnography. Innovate design by committee modern hero message. Contrast user-centered color theory keep it simple visuals bevel adobe descender splash screen. From focus group accessibility sans-serif archetype pixel-perfect complementary skeuomorphism. Focus group iconography figure-ground navigation user-centered omnigraffle from.

66 |
67 |
68 |

Ligature

69 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

70 |

Paper prototype urbanized headroom typography splash screen pencil modal branding. Retina omnigraffle objectified descender navigation adobe ethnography. Innovate design by committee modern hero message. Contrast user-centered color theory keep it simple visuals bevel adobe descender splash screen. From focus group accessibility sans-serif archetype pixel-perfect complementary skeuomorphism. Focus group iconography figure-ground navigation user-centered omnigraffle from.

71 |
72 |
73 |

Typesetting

74 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

75 |

Fireworks mobile skeuomorphism sitemap. Workflow iconography interaction design pixel-perfect serif. Mental model monospace typeface behavior change bauhaus from usability testing. Color theory user experience paper prototype narrative palette serif gradient header. Oblique modal 66-character line sketch responsive portfolio. Comic sans fireworks prägnanz monospace gradient design language jakob nielsen. Figure-ground pixel aspect ratio sketches rounded corners jony ive constraints mental model splash screen.

76 |

Placeholder text by Designer Ipsum.

77 |

Profile images are licensed under a Creative Commons BY-NC-SA 2.0 license. The images are from Greg Peverill-Conti's 1,000 faces project.

78 |
79 |
80 |
81 |
82 |
83 |
84 |

Web Design

85 |

Scenario archetype complementary responsive script pixel sidebar sitemap keep it simple. Complementary visuals footer CSS from alan cooper delightful. Photoshop iconography simplicity user experience affordance narrative ascenders contour. Slab serif interstitial skeuomorphism illustrator design by committee simplicity alan cooper eye tracking. Typography contrast mental model typesetting affordance narrative from CSS. Retina simplicity design by committee typography oblique.

86 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

87 |
88 |
89 |

Responsive

90 |

Card-sorting dropdown constraints alan cooper prägnanz iconography. Stakeholder balsamiq italic vector composition ethnography CSS monospace hierarchy. Eye tracking serif persona focus group.

91 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

92 |

Scenario navigation complementary jony ive helvetica archetype interstitial serif front-end. Constraints pencil usability gestalt design language mockup usability testing affordance jakob nielsen.

93 |
94 |
95 |

Prototype

96 |

Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.

97 |

Paper prototype urbanized headroom typography splash screen pencil modal branding. Retina omnigraffle objectified descender navigation adobe ethnography. Innovate design by committee modern hero message. Contrast user-centered color theory keep it simple visuals bevel adobe descender splash screen. From focus group accessibility sans-serif archetype pixel-perfect complementary skeuomorphism. Focus group iconography figure-ground navigation user-centered omnigraffle from.

98 |
99 |
100 |

Typography

101 |

Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.

102 |

Fireworks mobile skeuomorphism sitemap. Workflow iconography interaction design pixel-perfect serif. Mental model monospace typeface behavior change bauhaus from usability testing. Color theory user experience paper prototype narrative palette serif gradient header. Oblique modal 66-character line sketch responsive portfolio. Comic sans fireworks prägnanz monospace gradient design language jakob nielsen. Figure-ground pixel aspect ratio sketches rounded corners jony ive constraints mental model splash screen.

103 |

Placeholder text by Designer Ipsum.

104 |

Profile images are licensed under a Creative Commons BY-NC-SA 2.0 license. The images are from Greg Peverill-Conti's 1,000 faces project.

105 |
106 |
107 |
108 | → 109 | ← 110 |
111 |
112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /js/cbpSplitLayout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpSplitLayout.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | (function() { 12 | 13 | 'use strict'; 14 | 15 | // http://stackoverflow.com/a/11381730/989439 16 | function mobilecheck() { 17 | var check = false; 18 | (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); 19 | return check; 20 | } 21 | 22 | var splitlayout = document.getElementById( 'splitlayout' ), 23 | leftSide = splitlayout.querySelector( 'div.intro > div.side-left' ), 24 | rightSide = splitlayout.querySelector( 'div.intro > div.side-right' ), 25 | pageLeft = splitlayout.querySelector( 'div.page-left' ), 26 | pageRight = splitlayout.querySelector( 'div.page-right' ), 27 | eventtype = mobilecheck() ? 'touchstart' : 'click', 28 | transEndEventNames = { 29 | 'WebkitTransition': 'webkitTransitionEnd', 30 | 'MozTransition': 'transitionend', 31 | 'OTransition': 'oTransitionEnd', 32 | 'msTransition': 'MSTransitionEnd', 33 | 'transition': 'transitionend' 34 | }, 35 | transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )]; 36 | 37 | function init() { 38 | if( mobilecheck() ) { 39 | classie.add( splitlayout, 'mobile-layout' ); 40 | } 41 | classie.add( splitlayout, 'reset-layout' ); 42 | 43 | leftSide.querySelector( 'div.intro-content' ).addEventListener( eventtype, function( ev ) { 44 | reset(); 45 | classie.add( splitlayout, 'open-left' ); 46 | } ); 47 | 48 | rightSide.querySelector( 'div.intro-content' ).addEventListener( eventtype, function( ev ) { 49 | reset(); 50 | classie.add( splitlayout, 'open-right' ); 51 | } ); 52 | 53 | // back to intro 54 | // after transition ends: 55 | var onEndTransFn = function() { 56 | this.removeEventListener( transEndEventName, onEndTransFn ); 57 | classie.add( splitlayout, 'reset-layout' ); 58 | document.body.scrollTop = document.documentElement.scrollTop = 0; 59 | }, 60 | backToIntro = function( ev ) { 61 | ev.preventDefault(); 62 | ev.stopPropagation(); 63 | var dir = classie.has( ev.target, 'back-right' ) ? 'left' : 'right', 64 | page = dir === 'right' ? pageRight : pageLeft; 65 | classie.remove( splitlayout, 'open-' + dir ); 66 | classie.add( splitlayout, 'close-' + dir ); 67 | page.addEventListener( transEndEventName, onEndTransFn ); 68 | }; 69 | 70 | splitlayout.querySelector( 'a.back-left' ).addEventListener( eventtype, backToIntro ); 71 | splitlayout.querySelector( 'a.back-right' ).addEventListener( eventtype, backToIntro ); 72 | } 73 | 74 | function reset() { 75 | classie.remove( splitlayout, 'close-right' ); 76 | classie.remove( splitlayout, 'close-left' ); 77 | classie.remove( splitlayout, 'reset-layout' ); 78 | } 79 | 80 | init(); 81 | 82 | })(); -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransforms=function(){return!!D("transform")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f