├── README.md ├── css ├── component.css └── default.css ├── fonts ├── bpicons │ ├── bpicons.eot │ ├── bpicons.svg │ ├── bpicons.ttf │ ├── bpicons.woff │ └── license.txt └── pgicons │ ├── Read Me.txt │ ├── license.txt │ ├── lte-ie7.js │ ├── pgicons.dev.svg │ ├── pgicons.eot │ ├── pgicons.svg │ ├── pgicons.ttf │ └── pgicons.woff ├── images ├── 1_back.png ├── 1_front.png ├── 2_back.png ├── 2_front.png ├── 3_back.png ├── 3_front.png ├── 4_back.png ├── 4_front.png └── tshirt.svg ├── index.html └── js ├── cbpShop.js ├── cbpShop.min.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | Products Grid Layout 3 | ========= 4 | 5 | A responsive product grid layout with some UI details for inspiration. 6 | 7 | [article on Codrops](http://tympanus.net/codrops/?p=15098) 8 | 9 | [demo](http://tympanus.net/Blueprints/ProductGridLayout/) 10 | 11 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'pgicons'; 3 | src:url('../fonts/pgicons/pgicons.eot'); 4 | src:url('../fonts/pgicons/pgicons.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/pgicons/pgicons.woff') format('woff'), 6 | url('../fonts/pgicons/pgicons.ttf') format('truetype'), 7 | url('../fonts/pgicons/pgicons.svg#pgicons') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .cbp-pgcontainer { 13 | position: relative; 14 | width: 100%; 15 | padding: 0 30px 100px 30px; 16 | } 17 | 18 | .cbp-pgcontainer ul, 19 | .cbp-pgcontainer li { 20 | padding: 0; 21 | margin: 0; 22 | list-style-type: none; 23 | } 24 | 25 | .cbp-pggrid { 26 | position: relative; 27 | text-align: center; 28 | } 29 | /* If flexbox is supported we'll use it to lay out the grid */ 30 | .flexbox .cbp-pggrid { 31 | display: -webkit-flex; 32 | display: -moz-flex; 33 | display: -ms-flex; 34 | display: flex; 35 | -webkit-flex-flow: row wrap; 36 | -moz-flex-flow: row wrap; 37 | -ms-flex-flow: row wrap; 38 | flex-flow: row wrap; 39 | -webkit-justify-content: center; 40 | -moz-justify-content: center; 41 | -ms-justify-content: center; 42 | -webkit-justify-content: center; 43 | } 44 | 45 | .cbp-pggrid > li { 46 | display: inline-block; 47 | vertical-align: top; 48 | position: relative; 49 | width: 33%; 50 | min-width: 340px; 51 | max-width: 555px; 52 | padding: 20px 2% 50px 2%; 53 | text-align: left; 54 | } 55 | 56 | .flexbox .cbp-pggrid > li { 57 | display: block; 58 | } 59 | 60 | .cbp-pgcontent { 61 | border: 3px solid #47a3da; 62 | position: relative; 63 | } 64 | 65 | .cbp-pgrotate { 66 | width: 36px; 67 | height: 36px; 68 | position: absolute; 69 | display: block; 70 | color: transparent; 71 | font-size: 0; 72 | z-index: 100; 73 | border-bottom: 3px solid #47a3da; 74 | border-left: 3px solid #47a3da; 75 | right: 0px; 76 | top: 0px; 77 | cursor: pointer; 78 | text-align: center; 79 | } 80 | 81 | .cbp-pgrotate:before { 82 | font-size: 18px; 83 | line-height: 32px; 84 | color: #47a3da; 85 | } 86 | 87 | .no-touch .cbp-pgrotate:hover, 88 | .cbp-pgrotate.cbp-pgrotate-active { 89 | background: #47a3da; 90 | } 91 | 92 | .no-touch .cbp-pgrotate:hover:before, 93 | .cbp-pgrotate.cbp-pgrotate-active:before { 94 | color: #fff; 95 | } 96 | 97 | /* The item with the images will have perspective */ 98 | .cbp-pgitem { 99 | width: 100%; 100 | position: relative; 101 | padding: 2em; 102 | -webkit-perspective: 1400px; 103 | -moz-perspective: 1000px; 104 | perspective: 1000px; 105 | -webkit-backface-visibility: hidden; 106 | -moz-backface-visibility: hidden; 107 | backface-visibility: hidden; 108 | } 109 | 110 | /* The flip container */ 111 | .cbp-pgitem-flip { 112 | -webkit-transform-style: preserve-3d; 113 | -moz-transform-style: preserve-3d; 114 | transform-style: preserve-3d; 115 | -webkit-transition: -webkit-transform .4s ease-out; 116 | -moz-transition: -moz-transform .4s ease-out; 117 | transition: transform .4s ease-out; 118 | } 119 | 120 | /* If you want to rotate on hover instead of click, you could use something like this: 121 | .cbp-pgrotate:hover + .cbp-pgitem .cbp-pgitem-flip 122 | */ 123 | .cbp-pgitem.cbp-pgitem-showback .cbp-pgitem-flip { 124 | -webkit-transform: rotateY(180deg); 125 | -moz-transform: rotateY(180deg); 126 | transform: rotateY(180deg); 127 | } 128 | 129 | .cbp-pgitem-flip img { 130 | display: block; 131 | margin: 0 auto; 132 | max-width: 100%; 133 | max-height: 100%; 134 | -webkit-backface-visibility: hidden; 135 | -moz-backface-visibility: hidden; 136 | backface-visibility: hidden; 137 | } 138 | 139 | .cbp-pgitem img:first-child { 140 | position: relative; 141 | } 142 | 143 | /* The second image will be rotated so that we'd be looking at the back of it */ 144 | .cbp-pgitem img:nth-child(2) { 145 | position: absolute; 146 | top: 50%; 147 | left: 50%; 148 | -webkit-transform: translateX(-50%) translateY(-50%) rotateY(-180deg); 149 | -moz-transform: translateX(-50%) translateY(-50%) rotateY(-180deg); 150 | transform: translateX(-50%) translateY(-50%) rotateY(-180deg); 151 | } 152 | 153 | /* Fallback for browsers that don't support 3d transforms */ 154 | .no-csstransforms3d .cbp-pgitem img:nth-child(2) { 155 | position: relative; 156 | top: 0; 157 | left: 0; 158 | display: none; 159 | } 160 | 161 | .no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:first-child { 162 | display: none; 163 | } 164 | 165 | .no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:nth-child(2) { 166 | display: block; 167 | } 168 | 169 | /* The options bar */ 170 | .cbp-pgoptions { 171 | height: 60px; 172 | width: 100%; 173 | border-top: 3px solid #47a3da;; 174 | } 175 | 176 | .cbp-pgoptions > li { 177 | width: 20%; 178 | height: 100%; 179 | float: left; 180 | position: relative; 181 | display: block; 182 | cursor: pointer; 183 | color: transparent; 184 | font-size: 0; 185 | border-left: 3px solid #47a3da; 186 | -webkit-touch-callout: none; 187 | -webkit-user-select: none; 188 | -khtml-user-select: none; 189 | -moz-user-select: none; 190 | -ms-user-select: none; 191 | user-select: none; 192 | } 193 | 194 | .cbp-pgoptions > li:first-child { 195 | border-left: none; 196 | } 197 | 198 | .no-touch .cbp-pgoptions li { 199 | color: #47a3da; 200 | } 201 | 202 | .no-touch .cbp-pgoptions li:hover, 203 | .cbp-pgoptions li.cbp-pgoption-active { 204 | background: #47a3da; 205 | } 206 | 207 | .cbp-pgoptions li:before, 208 | .cbp-pgoptions li > span { 209 | font-size: 22px; 210 | line-height: 60px; 211 | text-indent: 0; 212 | text-align: center; 213 | color: #47a3da; 214 | } 215 | 216 | .no-touch .cbp-pgoptions li:hover:before, 217 | .no-touch .cbp-pgoptions li:hover > span, 218 | .cbp-pgoptions li.cbp-pgoption-active > span { 219 | color: #fff; 220 | } 221 | 222 | .cbp-pgoptions li.cbp-pgoptsize > span { 223 | font-size: 22px; 224 | } 225 | 226 | .cbp-pgoptions li > span { 227 | display: block; 228 | } 229 | 230 | .cbp-pgoptions li:before { 231 | position: absolute; 232 | width: 100%; 233 | height: 100%; 234 | } 235 | 236 | /* Icons */ 237 | .cbp-pgoptcompare, 238 | .cbp-pgoptcart, 239 | .cbp-pgoptfav, 240 | .cbp-pgrotate { 241 | font-family: 'pgicons'; 242 | speak: none; 243 | font-style: normal; 244 | font-weight: normal; 245 | font-variant: normal; 246 | text-transform: none; 247 | line-height: 1; 248 | -webkit-font-smoothing: antialiased; 249 | } 250 | 251 | .cbp-pgoptcompare:before { 252 | content: "\e001"; 253 | } 254 | 255 | .cbp-pgoptfav:before { 256 | content: "\e003"; 257 | } 258 | 259 | .cbp-pgoptfav.cbp-pgoptfav-selected:before { 260 | content: "\e002"; 261 | color: #ee73b8; 262 | } 263 | 264 | .cbp-pgoptfav.cbp-pgoptfav-selected:hover:before { 265 | color: #f9c0e0; 266 | } 267 | 268 | .cbp-pgoptcart:before { 269 | content: "\e000"; 270 | } 271 | 272 | .cbp-pgrotate:before { 273 | content: "\e004"; 274 | } 275 | 276 | /* Tooltips */ 277 | .cbp-pgopttooltip { 278 | position: absolute; 279 | bottom: 180%; 280 | margin-bottom: 0px; 281 | background: #fff; 282 | padding: 25px; 283 | width: 100px; 284 | left: 50%; 285 | margin-left: -50px; 286 | border: 3px solid #47a3da; 287 | opacity: 0; 288 | z-index: 1000; 289 | visibility: hidden; 290 | pointer-events: none; 291 | -webkit-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s; 292 | -moz-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s; 293 | transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s; 294 | } 295 | 296 | .cbp-pgoptions li:hover .cbp-pgopttooltip, 297 | .cbp-pgoptions li.cbp-pgoption-active .cbp-pgopttooltip { 298 | visibility: visible; 299 | opacity: 1; 300 | -webkit-transition-delay: 0s; 301 | -moz-transition-delay: 0s; 302 | transition-delay: 0s; 303 | bottom: 100%; 304 | pointer-events: auto; 305 | } 306 | 307 | .cbp-pgopttooltip:after, 308 | .cbp-pgopttooltip:before { 309 | top: 100%; 310 | border: solid transparent; 311 | content: " "; 312 | height: 0; 313 | width: 0; 314 | position: absolute; 315 | pointer-events: none; 316 | } 317 | 318 | .cbp-pgopttooltip:after { 319 | border-color: transparent; 320 | border-top-color: #fff; 321 | border-width: 10px; 322 | left: 50%; 323 | margin-left: -10px; 324 | } 325 | 326 | .cbp-pgopttooltip:before { 327 | border-color: transparent; 328 | border-top-color: #47a3da; 329 | border-width: 14px; 330 | left: 50%; 331 | margin-left: -14px; 332 | } 333 | 334 | /* Size tooltip */ 335 | .cbp-pgoptsize .cbp-pgopttooltip { 336 | margin-left: -50px; 337 | } 338 | 339 | .cbp-pgoptsize .cbp-pgopttooltip span { 340 | display: block; 341 | text-indent: 0; 342 | background: url(../images/tshirt.svg) no-repeat center center; 343 | background-size: 100%; 344 | margin: 0 auto 4px; 345 | text-align: center; 346 | font-size: 12px; 347 | font-weight: 700; 348 | color: #65b3e2; 349 | } 350 | 351 | .cbp-pgoptsize .cbp-pgopttooltip span:hover { 352 | color: #0968a1; 353 | -webkit-transform: scale(1.1); 354 | -moz-transform: scale(1.1); 355 | transform: scale(1.1); 356 | } 357 | 358 | .cbp-pgoptsize .cbp-pgopttooltip span[data-size="XL"] { 359 | width: 44px; 360 | height: 44px; 361 | line-height: 44px; 362 | } 363 | 364 | .cbp-pgoptsize .cbp-pgopttooltip span[data-size="L"] { 365 | width: 40px; 366 | height: 40px; 367 | line-height: 40px; 368 | } 369 | 370 | .cbp-pgoptsize .cbp-pgopttooltip span[data-size="M"] { 371 | width: 34px; 372 | height: 34px; 373 | line-height: 34px; 374 | } 375 | 376 | .cbp-pgoptsize .cbp-pgopttooltip span[data-size="S"] { 377 | width: 30px; 378 | height: 30px; 379 | line-height: 30px; 380 | } 381 | 382 | /* Color tooltip */ 383 | .cbp-pgoptcolor .cbp-pgopttooltip { 384 | padding: 5px; 385 | } 386 | 387 | .cbp-pgoptions li.cbp-pgoptcolor > span, 388 | .cbp-pgoptcolor .cbp-pgopttooltip span { 389 | display: block; 390 | margin: 12px auto 0; 391 | text-indent: -900em; 392 | } 393 | 394 | .cbp-pgoptions li.cbp-pgoptcolor > span { 395 | width: 36px; 396 | height: 36px; 397 | border: 3px solid #fff; 398 | } 399 | 400 | .cbp-pgoptcolor .cbp-pgopttooltip span { 401 | float: left; 402 | margin: 4px; 403 | width: 34px; 404 | height: 34px; 405 | } 406 | 407 | .no-touch .cbp-pgoptcolor .cbp-pgopttooltip span:hover { 408 | -webkit-transform: scale(1.1); 409 | -moz-transform: scale(1.1); 410 | transform: scale(1.1); 411 | } 412 | 413 | .cbp-pgoptcolor span[data-color="c1"] { 414 | background: #72bbe9; 415 | } 416 | 417 | .cbp-pgoptcolor span[data-color="c2"] { 418 | background: #e577aa; 419 | } 420 | 421 | .cbp-pgoptcolor span[data-color="c3"] { 422 | background: #e5b178; 423 | } 424 | 425 | .cbp-pgoptcolor span[data-color="c4"] { 426 | background: #7abe93; 427 | } 428 | 429 | .cbp-pginfo { 430 | padding-top: 10px; 431 | } 432 | 433 | .cbp-pginfo:before, 434 | .cbp-pginfo:after { 435 | content: " "; 436 | display: table; 437 | } 438 | 439 | .cbp-pginfo:after { 440 | clear: both; 441 | } 442 | 443 | .cbp-pginfo h3, 444 | .cbp-pginfo span { 445 | float: left; 446 | width: 50%; 447 | font-size: 1.8em; 448 | padding: 10px 5px; 449 | margin: 0; 450 | } 451 | 452 | .cbp-pginfo h3 { 453 | font-weight: 300; 454 | } 455 | 456 | .cbp-pginfo span { 457 | font-weight: 700; 458 | text-align: right; 459 | } 460 | /* Media Queries */ 461 | 462 | @media screen and (max-width: 68.125em) { 463 | .cbp-pggrid > li { 464 | width: 48%; 465 | } 466 | } 467 | 468 | @media screen and (max-width: 46.125em) { 469 | .cbp-pggrid > li { 470 | width: 100%; 471 | } 472 | } -------------------------------------------------------------------------------- /css/default.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: #47a3da; 24 | } 25 | 26 | a { 27 | color: #f0f0f0; 28 | text-decoration: none; 29 | } 30 | 31 | a:hover { 32 | color: #000; 33 | } 34 | 35 | .container > header { 36 | width: 90%; 37 | max-width: 69em; 38 | margin: 0 auto; 39 | padding: 2.875em 1.875em 1.875em; 40 | } 41 | 42 | .container > header h1 { 43 | font-size: 2.125em; 44 | line-height: 1.3; 45 | margin: 0 0 0.6em 0; 46 | float: left; 47 | font-weight: 400; 48 | } 49 | 50 | .container > header > span { 51 | display: block; 52 | position: relative; 53 | z-index: 9999; 54 | font-weight: 700; 55 | text-transform: uppercase; 56 | letter-spacing: 0.5em; 57 | padding: 0 0 0.6em 0.1em; 58 | } 59 | 60 | .container > header > span span:after { 61 | width: 30px; 62 | height: 30px; 63 | left: -12px; 64 | font-size: 50%; 65 | top: -8px; 66 | font-size: 75%; 67 | position: relative; 68 | } 69 | 70 | .container > header > span span:hover:before { 71 | content: attr(data-content); 72 | text-transform: none; 73 | text-indent: 0; 74 | letter-spacing: 0; 75 | font-weight: 300; 76 | font-size: 110%; 77 | padding: 0.8em 1em; 78 | line-height: 1.2; 79 | text-align: left; 80 | left: auto; 81 | margin-left: 4px; 82 | position: absolute; 83 | color: #fff; 84 | background: #47a3da; 85 | } 86 | 87 | .container > header nav { 88 | float: right; 89 | text-align: center; 90 | } 91 | 92 | .container > header nav a { 93 | display: inline-block; 94 | position: relative; 95 | text-align: left; 96 | width: 2.5em; 97 | height: 2.5em; 98 | background: #fff; 99 | border-radius: 50%; 100 | margin: 0 0.1em; 101 | border: 4px solid #47a3da; 102 | } 103 | 104 | .container > header nav a > span { 105 | display: none; 106 | } 107 | 108 | .container > header nav a:hover:before { 109 | content: attr(data-info); 110 | color: #47a3da; 111 | position: absolute; 112 | width: 600%; 113 | top: 120%; 114 | text-align: right; 115 | right: 0; 116 | pointer-events: none; 117 | } 118 | 119 | .container > header nav a:hover { 120 | background: #47a3da; 121 | } 122 | 123 | .bp-icon:after { 124 | font-family: 'bpicons'; 125 | speak: none; 126 | font-style: normal; 127 | font-weight: normal; 128 | font-variant: normal; 129 | text-transform: none; 130 | text-align: center; 131 | color: #47a3da; 132 | -webkit-font-smoothing: antialiased; 133 | } 134 | 135 | .container > header nav .bp-icon:after { 136 | position: absolute; 137 | top: 0; 138 | left: 0; 139 | width: 100%; 140 | height: 100%; 141 | line-height: 2; 142 | text-indent: 0; 143 | } 144 | 145 | .container > header nav a:hover:after { 146 | color: #fff; 147 | } 148 | 149 | .bp-icon-next:after { 150 | content: "\e000"; 151 | } 152 | .bp-icon-drop:after { 153 | content: "\e001"; 154 | } 155 | .bp-icon-archive:after { 156 | content: "\e002"; 157 | } 158 | .bp-icon-about:after { 159 | content: "\e003"; 160 | } 161 | .bp-icon-prev:after { 162 | content: "\e004"; 163 | } 164 | 165 | @media screen and (max-width: 55em) { 166 | 167 | .container > header h1, 168 | .container > header nav { 169 | float: none; 170 | } 171 | 172 | .container > header > span, 173 | .container > header h1 { 174 | text-align: center; 175 | } 176 | 177 | .container > header nav { 178 | margin: 0 auto; 179 | } 180 | 181 | .container > header > span { 182 | text-indent: 30px; 183 | } 184 | } -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/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/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/fonts/bpicons/bpicons.ttf -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/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/ -------------------------------------------------------------------------------- /fonts/pgicons/Read Me.txt: -------------------------------------------------------------------------------- 1 | To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file. 2 | 3 | See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face -------------------------------------------------------------------------------- /fonts/pgicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ 2 | License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ -------------------------------------------------------------------------------- /fonts/pgicons/lte-ie7.js: -------------------------------------------------------------------------------- 1 | /* Load this script using conditional IE comments if you need to support IE 7 and IE 6. */ 2 | 3 | window.onload = function() { 4 | function addIcon(el, entity) { 5 | var html = el.innerHTML; 6 | el.innerHTML = '' + entity + '' + html; 7 | } 8 | var icons = { 9 | 'cbp-pgicon-loop-alt4' : '', 10 | 'cbp-pgicon-cart' : '', 11 | 'cbp-pgicon-heart' : '', 12 | 'cbp-pgicon-heart-2' : '', 13 | 'cbp-pgicon-angle-left' : '', 14 | 'cbp-pgicon-angle-right' : '', 15 | 'cbp-pgicon-rotate' : '' 16 | }, 17 | els = document.getElementsByTagName('*'), 18 | i, attr, html, c, el; 19 | for (i = 0; ; i += 1) { 20 | el = els[i]; 21 | if(!el) { 22 | break; 23 | } 24 | attr = el.getAttribute('data-icon'); 25 | if (attr) { 26 | addIcon(el, attr); 27 | } 28 | c = el.className; 29 | c = c.match(/cbp-pgicon-[^\s'"]+/); 30 | if (c && icons[c[0]]) { 31 | addIcon(el, icons[c[0]]); 32 | } 33 | } 34 | }; -------------------------------------------------------------------------------- /fonts/pgicons/pgicons.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 23 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /fonts/pgicons/pgicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/fonts/pgicons/pgicons.eot -------------------------------------------------------------------------------- /fonts/pgicons/pgicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 23 | 24 | 25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /fonts/pgicons/pgicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/fonts/pgicons/pgicons.ttf -------------------------------------------------------------------------------- /fonts/pgicons/pgicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/fonts/pgicons/pgicons.woff -------------------------------------------------------------------------------- /images/1_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/1_back.png -------------------------------------------------------------------------------- /images/1_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/1_front.png -------------------------------------------------------------------------------- /images/2_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/2_back.png -------------------------------------------------------------------------------- /images/2_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/2_front.png -------------------------------------------------------------------------------- /images/3_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/3_back.png -------------------------------------------------------------------------------- /images/3_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/3_front.png -------------------------------------------------------------------------------- /images/4_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/4_back.png -------------------------------------------------------------------------------- /images/4_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ProductGridLayout/45e7db3d10c61f9d18029ead8c48f54f2c79d7f1/images/4_front.png -------------------------------------------------------------------------------- /images/tshirt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 23 | 25 | 27 | 31 | 35 | 39 | 40 | 41 | 64 | 66 | 67 | 69 | image/svg+xml 70 | 72 | 73 | 74 | 75 | 76 | 81 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: Responsive Product Grid Layout 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | Blueprint 20 |

Responsive Product Grid Layout

21 | 27 |
28 |
29 | 259 |
260 |
261 | 262 | 265 | 266 | 267 | -------------------------------------------------------------------------------- /js/cbpShop.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpShop.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( window ) { 12 | 13 | 'use strict'; 14 | 15 | function cbpShop( el ) { 16 | this.el = el; 17 | this._init(); 18 | } 19 | 20 | cbpShop.prototype = { 21 | _init : function() { 22 | var self = this; 23 | 24 | this.touch = Modernizr.touch; 25 | 26 | this.products = this.el.querySelectorAll( 'ul.cbp-pggrid > li' ); 27 | Array.prototype.slice.call( this.products ).forEach( function( el, i ) { 28 | var content = el.querySelector( 'div.cbp-pgcontent' ), 29 | item = content.querySelector( 'div.cbp-pgitem' ), 30 | rotate = content.querySelector( 'span.cbp-pgrotate' ); 31 | 32 | if( self.touch ) { 33 | 34 | rotate.addEventListener( 'touchstart', function() { self._rotateItem( this, item ); } ); 35 | 36 | var options = content.querySelector( 'ul.cbp-pgoptions' ), 37 | size = options.querySelector( 'li.cbp-pgoptsize > span' ), 38 | color = options.querySelector( 'li.cbp-pgoptcolor > span' ); 39 | 40 | size.addEventListener( 'touchstart', function() { self._showItemOptions( this ); } ); 41 | color.addEventListener( 'touchstart', function() { self._showItemOptions( this ); } ); 42 | } 43 | else { 44 | rotate.addEventListener( 'click', function() { self._rotateItem( this, item ); } ); 45 | } 46 | } ); 47 | }, 48 | _rotateItem : function( trigger, item ) { 49 | if( item.getAttribute( 'data-open' ) === 'open' ) { 50 | item.setAttribute( 'data-open', '' ); 51 | trigger.className = trigger.className.replace(/\b cbp-pgrotate-active\b/,''); 52 | item.className = item.className.replace(/\b cbp-pgitem-showback\b/,''); 53 | } 54 | else { 55 | item.setAttribute( 'data-open', 'open' ); 56 | trigger.className += ' cbp-pgrotate-active'; 57 | item.className += ' cbp-pgitem-showback'; 58 | } 59 | }, 60 | _showItemOptions : function( trigger ) { 61 | if( trigger.getAttribute( 'data-open' ) === 'open' ) { 62 | trigger.setAttribute( 'data-open', '' ); 63 | trigger.parentNode.className = trigger.parentNode.className.replace(/\b cbp-pgoption-active\b/,''); 64 | } 65 | else { 66 | trigger.setAttribute( 'data-open', 'open' ); 67 | trigger.parentNode.className += ' cbp-pgoption-active'; 68 | } 69 | }, 70 | /* 71 | other functions.. 72 | */ 73 | } 74 | 75 | window.cbpShop = cbpShop; 76 | 77 | } )( window ); -------------------------------------------------------------------------------- /js/cbpShop.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpShop.min.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(b){function a(c){this.el=c;this._init()}a.prototype={_init:function(){var c=this;this.touch=Modernizr.touch;this.products=this.el.querySelectorAll("ul.cbp-pggrid > li");Array.prototype.slice.call(this.products).forEach(function(j,h){var l=j.querySelector("div.cbp-pgcontent"),k=l.querySelector("div.cbp-pgitem"),f=l.querySelector("span.cbp-pgrotate");if(c.touch){f.addEventListener("touchstart",function(){c._rotateItem(this,k)});var e=l.querySelector("ul.cbp-pgoptions"),g=e.querySelector("li.cbp-pgoptsize > span"),d=e.querySelector("li.cbp-pgoptcolor > span");g.addEventListener("touchstart",function(){c._showItemOptions(this)});d.addEventListener("touchstart",function(){c._showItemOptions(this)})}else{f.addEventListener("click",function(){c._rotateItem(this,k)})}})},_rotateItem:function(c,d){if(d.getAttribute("data-open")==="open"){d.setAttribute("data-open","");c.className=c.className.replace(/\b cbp-pgrotate-active\b/,"");d.className=d.className.replace(/\b cbp-pgitem-showback\b/,"")}else{d.setAttribute("data-open","open");c.className+=" cbp-pgrotate-active";d.className+=" cbp-pgitem-showback"}},_showItemOptions:function(c){if(c.getAttribute("data-open")==="open"){c.setAttribute("data-open","");c.parentNode.className=c.parentNode.className.replace(/\b cbp-pgoption-active\b/,"")}else{c.setAttribute("data-open","open");c.parentNode.className+=" cbp-pgoption-active"}},};b.cbpShop=a})(window); -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-flexbox-csstransforms3d-touch-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(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- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(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=u.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(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.flexbox=function(){return F("flexWrap")},q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(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},z(""),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._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.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