Skip to content

Instantly share code, notes, and snippets.

@rayantony

rayantony/bootsplatblog.html

Created November 22, 2014 10:58
Show Gist options
  • Save rayantony/e05741b663f568d40425 to your computer and use it in GitHub Desktop.
Save rayantony/e05741b663f568d40425 to your computer and use it in GitHub Desktop.
Download ZIP
BootSplat Blog WTF on Codepen part 1
Raw
bootsplatblog.html
<!DOCTYPE html>
<html lang="en" class="cookie_used_true">
<base href="http://codepen.io/" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta content="authenticity_token" name="csrf-param" />
<meta content="6DtToX/GB2GNU3RDk4fK0bWPexUsCz532fcxL54GdJU=" name="csrf-token" />
<title>WTF is a BootSplat vs a Bootstrap? by ray anthony on CodePen</title>
<link href='//fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic' rel='stylesheet'>
<link href="http://assets.cdpn.io/assets/global/global-MQ-e487b5352298162b8cddfca25137d46f.css" media="all" rel="stylesheet" type="text/css" />
<link href="http://assets.cdpn.io/assets/page/page-MQ-13450335f6527439d4d6053f798cb64c.css" media="all" rel="stylesheet" type="text/css" />
<link href="http://assets.cdpn.io/assets/posts/post-70a7db13e3c3a3fff042da23080b5c0f.css" media="screen" rel="stylesheet" type="text/css" />
<style media="all">body{font:125%/1.75 Lustria,Georgia;color:#444;margin:0}q{font-style:italic}p{margin:3.5em 0}h2{color:#b30027;font-size:175%;line-height:1.5;margin:.51em 0}h3{font-size:125%;line-height:1.4;margin:.25em 0}p:first-child,h2:first-child,h3:first-child,h2+p,h3{margin-top:0}code{font-family:Menlo,&quot;Courier New&quot;,monospace;font-size:85%;line-height:1.5}img{max-width:100%;height:auto}iframe{display:inherit}.grid{text-align:center;margin:auto;padding:20px;font-size:0}.grid__item{font-size:1.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:20px;display:inline-block;vertical-align:top;text-align:left;width:100%}.grid--1{max-width:220px}.grid--2{max-width:440px}.grid--3{max-width:660px}.grid--4{max-width:880px}.grid--6{max-width:1320px}.grid--center{text-align:center}.image{background:#fff;border-radius:5px;box-shadow:0 0 0 1px #cecece,0 2px 0 1px #cecece;transform:translateZ(0)}.caption{font-size:90%;line-height:1.95;color:#a4a4a4;margin:0}.figure{display:block;margin:2.5em -40px}.figure__caption{display:block;margin-top:1.25em;text-align:center}.figure__item{display:block;overflow:hidden}.figure__item&gt;*{display:block;margin-left:auto;margin-right:auto}.nav a{color:inherit;text-decoration:none;display:inline-block}.bullet-list{list-style:none;margin-left:0;padding-left:0}.bullet-list li{margin:.5em 0}.bullet-list li:before{font-size:125%;line-height:1.25;position:absolute;content:&quot;5CF&quot;;margin-left:-1.125em;color:#999}.button{border-radius:5px;background:#b30027;color:#fff;text-decoration:none;padding:.85em 1em;display:inline-block}.button:hover{background:#87141b}.page__nav{padding:0;background:#980013;color:#fff;margin:-10px 0}.page__nav a{font-size:110%;margin-right:1.15em;margin-left:1.15em}.page__header{padding:6% 0;background:#b30027}.page__title{color:#fff;font-size:250%;line-height:1.25;-webkit-animation:.5s .25s fade backwards ease-out;animation:.5s .25s fade backwards ease-out}.page__subtitle{display:block;font-size:115%;color:#aaa;text-transform:uppercase;letter-spacing:.35em;word-spacing:.5em;margin:.5em 0;-webkit-animation:.5s .5s fade backwards ease-out;animation:.5s .5s fade backwards ease-out}.page__content{background:#e4e4e4;padding:5% 0}.page__content--alt{padding:5% 0;background:#737978;color:#c6c6c6}.page__content a:not(.button){color:#b30027}.page__content--alt h2{color:#fff}.page__content--alt strong{color:#fff}.post p:first-child{font-size:130%;line-height:1.81;color:#777}.post .image img:not([width=&quot;920&quot;]){margin-top:40px;margin-bottom:40px}.post__navigation .nav__item{width:45%}.post__navigation a{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.post__navigation .nav__item--prev{float:left}.post__navigation .nav__item--next{float:right;text-align:right}.comments{margin-left:0;padding-left:0}.comment{font-size:84%;line-height:1.55;margin:3.5em 0;list-style:none;overflow:hidden;position:relative;padding:0 0 0 5.5em}.comment__header{margin-bottom:1.35em}.comment__author{font-size:130%;font-style:normal;display:inline-block;color:#fff}.comment__date{display:block;color:#aaa}.comment a{color:#fff}.comment p{margin-top:1.25em;margin-bottom:1.25em}.comment p:first-child{margin-top:0}.avatar{width:3.5em;height:3.5em;background:#fff;margin:.25em;border-radius:50%;box-shadow:0 0 0 .2em #737978,0 0 0 .25em #969696}.comment__avatar{position:absolute;margin-left:-5.5em;z-index:1}.comment--reply{font-size:100%;padding:0;overflow:visible}.comment--reply:before{content:&quot;&quot;;position:absolute;left:-3.5em;top:-1000em;bottom:100%;border-right:1px solid #969696}.comment--reply:last-child{margin-bottom:0;padding-bottom:0}.work a{text-decoration:none;color:inherit}.work h2{color:#444;padding-bottom:.25em;border-bottom:1px solid #ccc}:not(pre)&gt;code{box-shadow:0 0 1px rgba(20,20,20,.6);background-color:rgba(0,0,0,.07);border-radius:3px;padding:.15em .4em;white-space:nowrap}.pre-wrap{white-space:pre-wrap;word-break:break-all}.codeblock{font-size:90%;padding:40px;background:#39382e;color:#f8f8f2;overflow:auto;text-shadow:0 1px 0 #000}.code__comment{color:#958f75}.code__string{color:#a6e22e}.code__number,.code__regex,.code__atblock,.code__dtd{color:#fd971f}.code__keyword,.code__tag{color:#f92672}.code__object,.code__property{color:#66d9ef}.code__value{color:#b88bff}.code__punc{color:#a59f85}.code__color{box-shadow:0 0 0 1px rgba(0,0,0,.5);vertical-align:text-bottom;border-radius:2px;margin:.15em .3em .15em .5em;display:inline-block;padding:.4em}@media screen and (min-width:1080px){.comment{margin-left:-5.5em}.comment--reply{margin-left:0}}@media screen and (max-width:920px){.figure .image{border-radius:0;box-shadow:none}}@media screen and (max-width:640px){.grid{padding:0}.grid__item{font-size:.9rem}.figure{margin-left:-20px;margin-right:-20px}.codeblock{padding:20px}.bullet-list{margin-left:1.125em}}@media screen and (max-width:310px){.grid__item{font-size:.7rem}}@media screen and (min-width:640px){.comment__author{float:left}.comment__date{float:right}.comment__header{overflow:hidden;margin-bottom:.5em}}@-webkit-keyframes fade{from{transform:translateY(.25em);opacity:0}}@keyframes fade{from{transform:translateY(.25em);opacity:0}}</style>
<style media="all">http://codepen.io/rayrc/pen/ec492af64bae4ce14e3928d6a2108a3f.css</style>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body class="post-post
logged-in
not-team
">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100" style="enable-background: new 0 0 100 100; display: none;" xml:space="preserve">
<defs>
<path id="icon-heart" d="M99.866,26.199C98.533,13.167,87.456,3,73.988,3C63.193,3,53.938,9.532,50,18.832C46.062,9.532,36.807,3,26.013,3
C12.544,3,1.466,13.167,0.134,26.199C0.045,27.067,0,27.95,0,28.842C0,60.24,38.788,75.059,50,96l0,0
c11.212-20.94,50-35.759,50-67.158C100,27.95,99.955,27.067,99.866,26.199z"/>
<path id="icon-codepen-box" d="M99.961,34.205c-0.009-0.063-0.025-0.124-0.035-0.187c-0.021-0.121-0.043-0.242-0.075-0.36
c-0.019-0.071-0.044-0.14-0.067-0.208c-0.034-0.105-0.068-0.21-0.11-0.312c-0.029-0.071-0.063-0.142-0.096-0.21
c-0.045-0.097-0.092-0.192-0.146-0.284c-0.04-0.068-0.082-0.134-0.122-0.2c-0.058-0.089-0.117-0.176-0.182-0.26
c-0.047-0.063-0.097-0.126-0.147-0.187c-0.068-0.079-0.139-0.158-0.214-0.232c-0.056-0.058-0.112-0.115-0.171-0.168
c-0.079-0.071-0.161-0.14-0.243-0.205c-0.064-0.05-0.128-0.1-0.195-0.147c-0.025-0.016-0.047-0.037-0.071-0.053L52.383,0.722
c-1.444-0.962-3.323-0.962-4.767,0L1.914,31.19c-0.024,0.016-0.046,0.037-0.071,0.053c-0.067,0.047-0.13,0.098-0.193,0.147
c-0.084,0.065-0.166,0.134-0.243,0.205c-0.061,0.053-0.116,0.11-0.172,0.168c-0.075,0.074-0.146,0.153-0.213,0.232
c-0.051,0.061-0.101,0.124-0.148,0.187c-0.063,0.084-0.124,0.171-0.18,0.26c-0.043,0.066-0.084,0.132-0.124,0.2
c-0.053,0.092-0.1,0.187-0.146,0.284c-0.033,0.068-0.067,0.139-0.096,0.21c-0.042,0.103-0.076,0.208-0.11,0.312
c-0.022,0.068-0.047,0.137-0.067,0.208c-0.031,0.119-0.052,0.239-0.075,0.36c-0.011,0.063-0.026,0.124-0.034,0.187
C0.014,34.389,0,34.576,0,34.765v30.468c0,0.189,0.014,0.376,0.04,0.563c0.008,0.061,0.023,0.124,0.034,0.184
c0.022,0.121,0.043,0.242,0.075,0.36c0.02,0.071,0.045,0.14,0.067,0.208c0.034,0.105,0.068,0.21,0.11,0.315
c0.029,0.071,0.063,0.14,0.096,0.208c0.046,0.097,0.094,0.191,0.146,0.287c0.039,0.066,0.08,0.131,0.124,0.197
c0.056,0.089,0.117,0.176,0.18,0.261c0.047,0.065,0.097,0.126,0.148,0.187c0.067,0.079,0.138,0.158,0.213,0.231
c0.057,0.058,0.112,0.115,0.172,0.168c0.078,0.071,0.159,0.14,0.243,0.206c0.063,0.05,0.126,0.1,0.193,0.147
c0.025,0.016,0.047,0.037,0.071,0.053l45.703,30.469C48.338,99.758,49.169,100,50,100c0.83,0,1.661-0.242,2.383-0.723
l45.703-30.469c0.024-0.016,0.045-0.037,0.071-0.053c0.067-0.047,0.13-0.097,0.195-0.147c0.083-0.066,0.164-0.134,0.243-0.206
c0.059-0.053,0.115-0.11,0.171-0.168c0.075-0.074,0.146-0.153,0.214-0.231c0.05-0.061,0.1-0.121,0.147-0.187
c0.065-0.084,0.124-0.171,0.182-0.261c0.041-0.066,0.083-0.131,0.122-0.197c0.054-0.095,0.101-0.189,0.146-0.287
c0.033-0.068,0.067-0.137,0.096-0.208c0.042-0.105,0.076-0.21,0.11-0.315c0.022-0.068,0.048-0.137,0.067-0.208
c0.032-0.118,0.054-0.239,0.075-0.36c0.01-0.061,0.026-0.124,0.035-0.184C99.985,65.61,100,65.423,100,65.233V34.765
C100,34.576,99.985,34.389,99.961,34.205z M54.297,12.327l33.668,22.444L72.927,44.831L54.297,32.369V12.327z M45.703,12.327
v20.042L27.074,44.831l-15.04-10.061L45.703,12.327z M8.594,42.809L19.345,50L8.594,57.19V42.809z M45.703,87.672L12.035,65.228
l15.04-10.058L45.703,67.63V87.672z M50,60.165L34.802,50L50,39.833L65.198,50L50,60.165z M54.297,87.672V67.63L72.927,55.17
l15.039,10.058L54.297,87.672z M91.405,57.19L80.656,50l10.75-7.191V57.19z"/>
<path id="icon-code" d="M28.871,21.5L0,50.004L28.874,78.5l10.497-10.349L20.998,50.004l18.373-18.13L28.871,21.5z M71.129,21.5
L60.633,31.865l18.378,18.131L60.633,68.122l10.496,10.365L100,49.974L71.129,21.5z"/>
<path id="icon-key" d="M84,0H16C7.164,0,0,7.164,0,16v68c0,8.836,7.164,16,16,16h68c8.836,0,16-7.164,16-16V16C100,7.164,92.836,0,84,0z
M85,70.167c0,5.154-3.583,9.333-8.001,9.333H23c-4.418,0-8-4.179-8-9.333V18.833c0-5.155,3.582-9.333,8-9.333h53.999
C81.417,9.5,85,13.679,85,18.833V70.167z"/>
<path id="icon-help" d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z"/>
<g id="icon-logout">
<rect x="40.403" width="17.919" height="62.191"/>
<path d="M67.811,12.449v16.909c8.432,5.818,12.691,14.664,12.691,24.572c0,17.518-13.682,31.717-31.199,31.717
c-17.512,0-30.335-14.199-30.335-31.717c0-9.886,3.516-18.723,13.002-24.537V12.47C14.051,19.929,4.864,35.692,4.864,53.93
c0,25.444,20.072,46.07,45.51,46.07c25.445,0,44.763-20.626,44.763-46.07C95.137,35.675,85.729,19.904,67.811,12.449z"/>
</g>
<g id="icon-menu">
<rect y="3.415" width="100" height="22.532"/>
<rect y="38.734" width="100" height="22.532"/>
<rect y="74.053" width="100" height="22.532"/>
</g>
<g id="icon-eye">
<path d="M50,12.548c-27.612,0-50,37.012-50,37.012s22.388,37.989,50,37.989c27.611,0,50-37.989,50-37.989S77.611,12.548,50,12.548z
M50,75.049c-13.807,0-25-11.193-25-25s11.193-25,25-25c13.807,0,25,11.193,25,25S63.807,75.049,50,75.049z"/>
<path d="M62.5,50.097c0,6.909-5.598,12.5-12.5,12.5c-6.903,0-12.5-5.593-12.5-12.5c0-6.908,5.597-12.5,12.5-12.5
C56.902,37.597,62.5,43.189,62.5,50.097z"/>
</g>
<polygon id="icon-x" points="100,78.905 78.735,100 49.608,71.094 21.263,99.217 0,78.123 28.344,50 0,21.877 21.263,0.78 49.608,28.905
78.735,0 100,21.094 70.862,50"/>
<path id="icon-gear" d="M87.687,45.077c-0.313-2.433-0.816-4.807-1.542-7.079l8.145-11.73l-5.827-7.515l-0.094-0.123l-5.824-7.514
l-12.955,5.577c-2.041-1.265-4.192-2.362-6.459-3.219L59.42,0h-9.34h-0.153h-9.341l-3.709,13.474
c-2.27,0.857-4.421,1.955-6.463,3.222l-12.957-5.577l-5.825,7.514l-0.097,0.124l-5.822,7.517l8.146,11.731
c-0.726,2.271-1.233,4.645-1.544,7.079L0,52.032l2.08,9.375l0.033,0.15l2.08,9.375l14.001,0.761c1.295,2.028,2.771,3.926,4.4,5.668
l-2.396,14.227l8.416,4.173l0.138,0.067L37.169,100l9.309-10.796c1.161,0.109,2.335,0.173,3.524,0.173s2.358-0.074,3.52-0.184
l9.317,10.804l8.415-4.173l0.141-0.066l8.413-4.172l-2.396-14.228c1.628-1.741,3.104-3.64,4.4-5.672l14-0.759l2.078-9.375
l0.035-0.154L100,52.025L87.687,45.077z M50.003,34.51c8.435,0,15.272,7.035,15.272,15.719c0,8.679-6.839,15.717-15.272,15.717
c-8.436,0-15.272-7.038-15.272-15.717C34.731,41.545,41.569,34.51,50.003,34.51z"/>
<path id="icon-arrow-right" d="M59.469,9.429L45.096,23.812c0,0,8.063,8.063,16.006,16.007H0v20.355h61.103L45.086,76.189l14.383,14.382
L100,50L59.469,9.429z"/>
<polygon id="icon-arrow-down-mini" points="0,21.113 100,21.113 50,78.887 "/>
<g id="icon-fork">
<path d="M84.339,62.504c-4.454,0-8.463,1.818-11.313,4.721c-0.519-0.49-1.041-1.006-1.578-1.572
c-6.965-7.211-14.451-19.189-22.311-29.678C41.16,25.766,32.941,15.562,20.125,15.069H0v14.37h20.126
c2.555-0.111,6.556,1.993,11.208,6.914c6.961,7.197,14.454,19.171,22.315,29.662c4.822,6.164,9.759,12.293,15.741,16.289
c1.99,6.191,7.93,10.688,14.949,10.688c8.648,0,15.661-6.824,15.661-15.244C100,69.328,92.987,62.504,84.339,62.504z"/>
<path d="M51.541,29.438h18.986c2.637,4.795,7.831,8.059,13.811,8.059c8.648,0,15.661-6.824,15.661-15.243S92.986,7.01,84.338,7.01
c-5.979,0-11.174,3.264-13.811,8.058H36.3C42.307,18.619,47.161,23.992,51.541,29.438z"/>
</g>
<path id="icon-run" d="M55.702,50.002L77.85,72.324L100,50.002l-9.173-9.249l-6.611,6.668C82.878,25.187,64.56,7.5,42.169,7.5
C18.916,7.5,0,26.567,0,50.002C0,73.436,18.917,92.5,42.169,92.5h16.218V79.424H42.169c-16.102,0-29.193-13.197-29.193-29.421
c0-16.229,13.092-29.426,29.193-29.426c15.08,0,27.37,11.615,28.892,26.41l-6.184-6.233L55.702,50.002z"/>
<path id="icon-save" d="M84.187,44.046c0.084-0.753,0.114-1.52,0.114-2.289c0-13.402-10.814-24.257-24.154-24.257
c-10.354,0-19.161,6.551-22.599,15.754c-2.274-2.508-5.521-4.111-9.166-4.111c-6.872,0-12.439,5.59-12.439,12.493
c0,0.816,0.084,1.606,0.239,2.38C7.014,45.534,0,53.472,0,63.095C0,73.824,8.648,82.5,19.323,82.5h61.354
C91.351,82.5,100,73.824,100,63.095C100,53.59,93.177,45.715,84.187,44.046z"/>
<g id="icon-edit">
<path d="M24.56,92.536L0,100l7.453-24.583C13.809,75.173,24.775,86.209,24.56,92.536z"/>
<path d="M96.617,32.082l-0.475,0.471L67.383,3.766l0.472-0.472C80.782-9.646,109.871,18.811,96.617,32.082z"/>
<path d="M61.64,9.516l28.758,28.785L44.095,84.646c-1.222,1.221-2.234,0.884-2.234,0.884l2.314-15.356l-14.454,0.074l0.072-14.468
l-15.342,2.312c0,0-0.34-1.011,0.883-2.234L61.64,9.516z"/>
</g>
<path id="icon-share" d="M75,46.226v15.096l25-25.161L75,11v12.581c-38.25,0.25-37.5,37.742-37.5,37.742S51.126,42.477,75,46.226z M55,13.516H7.5
c-6.15,0-7.5,1.761-7.5,7.549v60.387C0,87.718,1.499,89,7.5,89H80c6.025,0,7.5-1.133,7.5-7.548v-20.13L75,72.117v4.302H12.5V26.097
h30L55,13.516z"/>
<g id="icon-text">
<polygon points="44.937,10 0,10 0,55.171 24.117,90 41.296,77.165 26.218,55.171 44.937,55.171"/>
<polygon points="100,10 55.062,10 55.062,55.171 79.183,90 96.361,77.165 81.284,55.171 100,55.171"/>
</g>
<path id="icon-check" d="M34.357,91.176L0,56.604L16.687,39.81l18.157,18.264l48.954-49.25L100,25.125L34.357,91.176z"/>
<g id="icon-user">
<circle cx="50" cy="25" r="25"/>
<path d="M75,62.5H25c-6.903,0-12.5,5.597-12.5,12.5v25H25h50h12.5V75C87.5,68.097,81.903,62.5,75,62.5z"/>
</g>
<path id="icon-file" d="M56.2,0H12.5v100h75V31.2L56.2,0z M25,87.5v-75h25v25h25v50H25z"/>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; display: none;" xml:space="preserve">
<defs>
<path id="icon-mag" d="M97.8,80.1L70.9,56.8c2.1-4.7,3.4-9.9,3.4-15.4c0-20.5-16.6-37.1-37.1-37.1C16.6,4.3,0,20.9,0,41.5
C0,62,16.6,78.6,37.2,78.6c9.9,0,18.9-3.9,25.6-10.3l25.8,22.4c2.6,2.3,6.6,2,8.8-0.6l1-1.2C100.7,86.3,100.4,82.3,97.8,80.1z
M37.6,68.6c-15,0-27.1-12.1-27.1-27.1c0-14.9,12.1-27.1,27.1-27.1c14.9,0,27.1,12.1,27.1,27.1C64.7,56.4,52.6,68.6,37.6,68.6z"/>
<path id="icon-twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"/>
<path id="icon-comment" d="M50,9.939c-27.615,0-50,14.757-50,32.959c0,11.435,8.836,21.498,22.248,27.408v19.754l19.084-14.581l-0.805-0.234
c3.068,0.387,6.229,0.607,9.473,0.607c27.613,0,50-14.754,50-32.959C100,24.696,77.613,9.939,50,9.939z"/>
<g id="icon-grid">
<rect width="23.81" height="23.81"/>
<rect x="38.095" width="23.809" height="23.81"/>
<rect x="76.19" width="23.81" height="23.81"/>
<rect y="38.095" width="23.81" height="23.809"/>
<rect x="38.095" y="38.095" width="23.809" height="23.809"/>
<rect x="76.19" y="38.095" width="23.81" height="23.809"/>
<rect y="76.19" width="23.81" height="23.81"/>
<rect x="38.095" y="76.19" width="23.809" height="23.81"/>
<rect x="76.19" y="76.19" width="23.81" height="23.81"/>
</g>
<path id="icon-arrow-left" d="M0,50l40.531,40.57l14.383-14.381L38.896,60.174H100V39.819H38.898c7.942-7.944,16.006-16.007,16.006-16.007
L40.531,9.429L0,50z"/>
<path id="icon-run" d="M55.702,50.002L77.85,72.324L100,50.002l-9.173-9.249l-6.611,6.668C82.878,25.187,64.56,7.5,42.169,7.5
C18.916,7.5,0,26.567,0,50.002C0,73.436,18.917,92.5,42.169,92.5h16.218V79.424H42.169c-16.102,0-29.193-13.197-29.193-29.421
c0-16.229,13.092-29.426,29.193-29.426c15.08,0,27.37,11.615,28.892,26.41l-6.184-6.233L55.702,50.002z"/>
<g id="icon-rss">
<path d="M7.336,62.163c-0.388-0.075-0.783-0.112-1.171-0.112c-1.42,0-2.81,0.491-3.923,1.409C0.822,64.632,0,66.375,0,68.216
v25.617C0,97.238,2.76,100,6.166,100h25.616c1.84,0,3.586-0.822,4.757-2.243c1.17-1.421,1.646-3.287,1.297-5.098
C34.876,77.378,22.62,65.12,7.336,62.163z"/>
<path d="M6.764,30.957c-0.199-0.02-0.399-0.029-0.597-0.029c-1.525,0-3.005,0.563-4.142,1.6C0.733,33.699,0,35.357,0,37.096v3.098
c0,3.164,2.394,5.812,5.536,6.136C30.838,48.92,51.08,69.161,53.672,94.462c0.322,3.146,2.973,5.539,6.135,5.539h3.098
c1.74,0,3.398-0.732,4.566-2.023c1.168-1.286,1.738-3.009,1.571-4.74C65.841,60.349,39.65,34.158,6.764,30.957z"/>
<path d="M99.986,93.431C96.732,43.428,56.568,3.268,6.565,0.012C6.432,0.005,6.298,0,6.166,0C4.604,0,3.095,0.593,1.95,1.667
C0.705,2.832,0,4.461,0,6.167v3.088c0,3.247,2.515,5.938,5.752,6.155c42.113,2.832,76.006,36.726,78.839,78.84
c0.22,3.235,2.907,5.75,6.151,5.75h3.091c1.706,0,3.335-0.706,4.5-1.95C99.498,96.805,100.098,95.135,99.986,93.431z"/>
</g>
<g id="icon-community">
<path d="M60.1,26.3H39.9c-3.2,0-5.9,2.6-5.9,5.8v27.4c0,3.2,2.6,5.9,5.9,5.9h0v19.4c0,3.2,2.5,5.9,5.7,5.9h8.7
c3.1,0,5.7-2.6,5.7-5.9V65.4h0c3.2,0,5.9-2.6,5.9-5.9V32.1C65.9,28.9,63.3,26.3,60.1,26.3z"/>
<circle cx="50" cy="14.8" r="9.5"/>
<path d="M95,28.6H77.7c-2.8,0-5,2.2-5,5v23.5c0,2.8,2.2,5,5,5h0v16.7c0,2.8,2.2,5,4.9,5h7.5c2.7,0,4.9-2.2,4.9-5V62.1h0
c2.8,0,5-2.2,5-5V33.6C100,30.8,97.8,28.6,95,28.6z"/>
<circle cx="86.3" cy="18.8" r="8.2"/>
<path d="M22.3,28.6H5c-2.8,0-5,2.2-5,5v23.5c0,2.8,2.2,5,5,5h0v16.7c0,2.8,2.2,5,4.9,5h7.5c2.7,0,4.9-2.2,4.9-5V62.1h0
c2.8,0,5-2.2,5-5V33.6C27.3,30.8,25.1,28.6,22.3,28.6z"/>
<circle cx="13.7" cy="18.8" r="8.2"/>
</g>
<g id="icon-sort">
<polygon fill="#727373" points="0,46 50,0 100,46 "/>
<polygon fill="#727373" points="100,54 50,100 0,54 "/>
</g>
<g id="icon-sort-up">
<polygon fill="#FFFFFF" points="0,46 50,0 100,46 "/>
<polygon fill="#727373" points="100,54 50,100 0,54 "/>
</g>
<g id="icon-sort-down">
<polygon fill="#FFFFFF" points="100,54 50,100 0,54 "/>
<polygon fill="#727373" points="0,46 50,0 100,46 "/>
</g>
</defs>
</svg>
<header class="main-header lowkey-header group">
<div class="header-left">
<h1 class="logo header-chunk">
<a href="http://codepen.io/">
CodePen
</a>
</h1>
</div>
<div class="header-right">
<div class="user-stuff header-chunk">
<div class="logged-in-user-stuff">
<a href="/rayrc/">
<img id="mini-personal-avatar" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/167883/profile/profile-80_1.jpg" width="36" height="36" alt="User Gravatar">
</a>
<svg viewBox="0 0 100 100" class="dropdown-arrow">
<use xlink:href="#icon-arrow-down-mini"></use>
</svg>
<ul class="dropdown group">
<li class="dropdown-newpen">
<a href="/pen/">
<svg viewBox="0 0 100 100" class="icon-codepen-box">
<use xlink:href="#icon-codepen-box"></use>
</svg>
New Pen
</a>
</li>
<li class="dropdown-newpost sep-after">
<div class="has-submenu">
<a href="/write/">
<svg viewBox="0 0 100 100" class="icon-edit">
<use xlink:href="#icon-edit"></use>
</svg>
New Post
</a>
<ul class="submenu">
<li><a href="/write/manage/">Manage Posts</a></li>
<li>
<a href="/rayrc/blog/">
View Blog
</a>
</li>
</ul>
</div>
</li>
<li class="dropdown-embedbuilder">
<a href="/rayrc/embed/builder/public/">
<svg viewBox="0 0 100 100" class="icon-code">
<use xlink:href="#icon-code"></use>
</svg>
Embed Builder
</a>
</li>
<li class="dropdown-embedbuilder sep-after">
<a href="/rayrc/assets/">
<svg viewBox="0 0 100 100" class="icon-file">
<use xlink:href="#icon-file"></use>
</svg>
Asset Manager
</a>
</li>
<li class="dropdown-yourprofile">
<div class="has-submenu">
<a href="/rayrc/">
<svg viewBox="0 0 100 100" class="icon-user">
<use xlink:href="#icon-user"></use>
</svg>
Your Profile
</a>
<ul class="submenu">
<li><a href="/rayrc/public/">Public Pens</a></li>
<li><a href="/rayrc/private/">Private Pens</a></li>
<li><a href="/rayrc/forked/">Forked Pens</a></li>
<li><a href="/rayrc/loved/">Loved Pens</a></li>
<li><a href="/rayrc/activity/">Recent Activity</a></li>
</ul>
</div>
</li>
<li class="dropdown-yoursettings">
<div class="has-submenu">
<a href="/rayrc/settings/">
<svg viewBox="0 0 100 100" class="icon-gear">
<use xlink:href="#icon-gear"></use>
</svg>
Your Settings
</a>
<ul class="submenu">
<li><a href="/rayrc/settings#editor">Editor Settings</a></li>
<li><a href="/rayrc/settings#profile">Profile Settings</a></li>
<li><a href="/rayrc/settings#blog">Blog Settings</a></li>
<li><a href="/rayrc/settings#notifications">Email Settings</a></li>
<li><a href="/rayrc/settings#pro">Account Settings</a></li>
</ul>
</div>
</li>
<li class="dropdown-help sep-after">
<a href="http://blog.codepen.io/documentation/">
<svg viewBox="0 0 100 100" class="icon-help">
<use xlink:href="#icon-help"></use>
</svg>
Help
</a>
</li>
<li class="dropdown-logout sep-after">
<a href="/login/logout" id="logout">
<svg viewBox="0 0 100 100" class="icon-logout">
<use xlink:href="#icon-logout"></use>
</svg>
Log Out
</a> </li>
</ul>
</div>
</div>
</div>
</header>
<article class="grid group posts-grid">
<header class="post-header grid-1-1">
<h1 class="post-title">WTF is a BootSplat vs a Bootstrap?</h1>
<div class="post-meta user">
<a href="/rayrc/">
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/167883/profile/profile-80_1.jpg" alt="User Avatar" width="20" height="20" class="avatar">
ray anthony
</a>
on
<a href="/rayrc/blog/">
Ray Anthony
</a>
<span class="date-sep">//</span>
<time title='Last updated on Nov 19, 2014'>Nov 19, 2014</time>
<a class="button mini-button" href="/write/wtf-is-a-bootsplat">
Edit
</a>
</div>
</header>
<div class="grid-1-6" style="padding-right: 20px;">
</div>
<div class="grid-2-3">
<section class="post-body">
<h1 id="bootsplat!-">BootSplat! </h1>
<h4 id="a-visual-reference">A Visual Reference</h4>
<hr />
<h4 id="so-wtf-is-a-bootsplat?">So WTF is a BootSplat?</h4>
<p>We all know there's a difference between a "Splash Page" and well, a "Splat" page it comes down to laziness often, but as a reminder what the difference is, I've not-so meticulously constructed a few samples to which I lovingly refer to as BootSplats! Which will help illustrate the concept. Without having to redirect you form Chris's site to Envato/ Theme Forest. </p>
<hr />
<h2 id="how-can-i-know-if-i've....-splatted?">How Can I know if I've.... Splatted?</h2>
<p>In this wonderful era we live in there are many technologies being born by the second that empower the least likely of people to accomplish remarkable things with truly remarkable ease. Generally thats a good thing for humanity, but being able to slap together a website with an html header 4 tags and 3 cdn lines can have consequences, such as the world believing all americans sip lattes while updating their photography website, seriously how many of these are there? And no you Europeans and Mexicans are absolutely not exempt I've seen you do it too! </p>
<hr />
<h2 id="how-do-you-tell-a-bootsplat-from-say-a-bootstrap-3-or-4?">How do you tell a Bootsplat from say a Bootstrap 3 or 4?</h2>
<blockquote>
<p>Splats favor the two series actually. More special effects as it was Bootstrap 3 that saw a migration towards minimalist aesthetics all over San Francisco, not just Twitter, but also the mobile first model was 3 thus there at least for a time was a bit more pizazz in the 2 series, being more desktop focused and less nose in the air. To answer the question though, "...Eye of the Beholder" You know when you've splatted or not.</p>
</blockquote>
<h2 id="what-does-a-splat-look-like?">What Does a Splat Look Like?</h2>
<blockquote>
<p>Please immediately submit his information in the meantime, lets see a splat!
<p data-slug-hash='yyyyBY' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8055' data-tab='result' class='codepen'></p></p>
</blockquote>
<p>I suppose its better than freeform where we'd inevitably have an ugly myspace like web gone nuts. We can thank the Twiiter guys and Yahoo for at least making sure our splats are sort of pretty. But again theres Splas (paging, and Splat (paging) all too often do they meet. </p>
<hr />
<blockquote>
<h2 id="anything-for-the-ladies?">Anything for the Ladies?</h2>
<p>To remind you ladies out there guilty of it, I'm onto your splatting as well! And So I give you She-Splat! Gentleman that I am, I've removed any expletives, and Bam!
<p data-slug-hash='GgggGV' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8082' data-default_tab='result' class='codepen'></p></p>
<h2 id="aw-yeah-that's-right.-its-pink.">aw yeah that's right. its pink.</h2>
<hr />
</blockquote>
<h2 id="say-it-ain't-so!?">Say it Ain't So!?</h2>
<p>I'll admit being less of a designer type and beyond pressed for time as if life depends on it (sometimes literally does), I'm totally guilty of a few splats myself and more to come. In fact it was actually in plotting my next Splat that I was compelled and inspired to build this demo and it's respective parent site, BootSplat! It's a jab at cheesy design, at consumerism, and just clean fun so please dont take it seriously because despite the arduous 4 minutes I spent making the site, I certainly don't :) In fact 4 minutes is less time than these very comments here about it! As for the content, I went to catholic school enough latin, instead a little Rolling Stones tribute is well frankly ALWAYS in order far as I'm concerned so, Shidoobee!</p>
<blockquote>
<h2 id="lets-see-some-more!-(just-to-be-sure-you-know...)">Lets See Some More! (Just to be sure you know...)</h2>
<p>One More? OK a going out splat, hell yeah this sh**'s on FIRE!
<p data-slug-hash='NPPPEr' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8082' data-default_tab='result' data-class='codepen' class='codepen'></p> </p>
</blockquote>
<h2 id="does-a-splat-have-to-be-a-web-site-per-se?">Does a Splat Have to be a Web Site Per Se?</h2>
<p>Other industries have been known to splat as well, Take the Beatles Yellow Submarine, or any Eagles album, The Sex Pistols (glorious but still a splat), John Grisham's novels even the good ones, The last Indiana Jones Movie, and American Psycho 2 with Mila Kunis, Eminem's last 4 albums, all big friggin Splats. </p>
<blockquote>
<h3 id="tim-burton-totally-splats,-heres-one-now-with-some-simple-brown-gradients-overlaying-a-mushroom-forest-gives-it-more-of-that-film-look-a-la-michael-keaton-batman:">Tim Burton totally splats, heres one now with some simple brown gradients overlaying a mushroom forest gives it more of that film look a la Michael Keaton Batman:</h3>
<p><p data-slug-hash='OPPVzp' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8082' data-default_tab='result' class='codepen'></p>
Love it! </p>
<h3 id="theatre-lovers-?-i-got-you-and-babs,-judy,-liza,-with-one-shot-here-ya-go-bam!">Theatre Lovers ? I got you and Babs, Judy, Liza, with one shot here ya go Bam!</h3>
<p><p data-slug-hash='NPPqey' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8082' data-default_tab='result' class='codepen'></p>
I think that came out rather nice </p>
<h3 id="oprah?-notorious,-loves-to-splat:">Oprah? Notorious, loves to splat:</h3>
<p><img src="http://s3-ec.buzzfed.com/static/2014-07/18/8/enhanced/webdr10/anigif_enhanced-buzz-31782-1405685704-7.gif" alt="Oprah Bees" /></p>
<h4 id="so-does-rhianna-simply-by-existing">So does Rhianna simply by existing</h4>
<p><img src="http://media3.giphy.com/media/Ukl3M7Lhux1Be/giphy.gif" alt="rhianna" /></p>
<p>I didnt even have to touch those up I swear</p>
<h3 id="just-a-couple-more-please!">Just a Couple More Please!</h3>
<p>Ok i guess, one more and on fire? ok... Bam!
<p data-slug-hash='RNNWJQ' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8082' data-default_tab='result' class='codepen'></p></p>
</blockquote>
<h3 id="feeling-dickensian?-sitting-in-those-nasty-stairweels-in-the-ghettos-at-all-hours,-our-friend-charlie-has-seen-his-fair-share-of-splats-no-doubt.">Feeling Dickensian? Sitting in those nasty stairweels in the ghettos at all hours, our friend Charlie has seen his fair share of splats no doubt.</h3>
<blockquote>
<p><p data-slug-hash='LEEpXj' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8082' data-default_tab='result' class='codepen'></p></p>
</blockquote>
<h3 id="fire-in-an-all-oxygen-environment-perhaps?">Fire in an all oxygen environment perhaps?</h3>
<blockquote>
<p><p data-slug-hash='raaemZ' data-default-tab='result' data-height='420' data-theme-id='0' data-theme_id='8082' data-default_tab='result' class='codepen'></p></p>
</blockquote>
<h5 id="these-are-splats.-any-questions?-didn't-think-so.">These are Splats. Any Questions? Didn't think so.</h5>
<h1 id="please-look-before-you-splat-a-message-from-#bootsplat!">Please look before you splat a message from #<a href="http://bootsplat.com">BootSplat!</a></h1>
<h5 id="you-can-view-these-and-other-splats-@-http://codepen.io/collection/akkxya/">You can view these and other splats @ <a href="http://codepen.io/collection/AkKxyA/">http://codepen.io/collection/AkKxyA/</a></h5>
<h5 id="by-ray-anthony">by <a href="http://rayanthony.io">ray anthony</a></h5>
<h6 id="****this-is-not-to-be-taken-too-terribly-serious,-is-intended-as-entertainment-and-education-in-the-loosest-sense-of-the-word.-it-can-be-forked,-shared,-and-re-splatted-as-you-please.">****<i>This is not to be taken too terribly serious, is intended as entertainment and education in the loosest sense of the word. It can be forked, shared, and re-splatted as you please.</i>
</h6></span>
</section>
<div class="post-footer">
<div id="post-stats" class="stats">
<span class="single-stat stat-comments">
0
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-comment"></use>
</svg>
</span>
<span class="single-stat stat-views">
8
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-eye"></use>
</svg>
</span>
<span class="single-stat stat-loves">
<span class="count">
0
</span>
<svg viewBox="0 0 100 100" class="icon-heart">
<use xlink:href="#icon-heart"></use>
</svg>
</span>
</div>
<ul class="tag-grid">
<li><a href="/posts/tag/css">css</a></li>
<li><a href="/posts/tag/html">html</a></li>
<li><a href="/posts/tag/bootstrap">bootstrap</a></li>
<li><a href="/posts/tag/free template">free template</a></li>
<li><a href="/posts/tag/bootsplat">bootsplat</a></li>
</ul>
</div>
<section class="comments">
<h2>Comments</h2>
<ol id="comment-list" class="comment-list block-comments" itemprop="comment">
<li id="no-comments" class="module message-empty">No comments yet.</li>
</ol>
<h4 id="leave-comment" class="leave-comment">
Leave a Comment
<span class="title-hints">
<a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a> supported.
<span class="hide-on-mobile">Double-click names to add to comment.</span>
</span>
</h4>
<form id="comment-form" class="block-comment-form" action="#0">
<textarea id="new-comment" class="block-comment-textarea"
name="text" placeholder="Be cool."></textarea>
<div class="submit-area">
<button id="submit" class="button comment-button action-button expand-right">
<span class="label">Submit</span>
<span class="spinner"></span>
</button>
</div>
</form>
</section>
</div>
<div class="grid-1-6" style="padding-left: 20px;">
</div>
</article>
<footer class="article-footer">
<div class="article-footer-no-ad grid group">
<div class="grid-1-2" style="padding-right: 20px;">
<div class="article-footer-section">
<h2>
Other Articles by
<a href="/rayrc/blog/">
ray anthony
</a>
</h2>
<article class="footer-article-exerpt module module-text">
<h2>
<a href="http://codepen.io/rayrc/blog/debug">
debug
</a>
</h2>
<p>a test</p><p>Just debugging my layouts settings</p><hr /><p>By <a>ray anthony</a>Blog: <a>ray anthony's codepen blog</a>Pens: <a>ray anthony Codepen</a></p></span>
</article>
<article class="footer-article-exerpt module module-text">
<h2>
<a href="http://codepen.io/rayrc/blog/south-american-ghosts">
South American Ghosts
</a>
</h2>
<p>South America Earthquakes Spring 2014</p><p>South American Ghosts</p><p>Where our lives changed forever, like we never made it home...</p><blockquote><p>[[[pen slug-hash='sqCac' height='300'...</p></blockquote>
</article>
</div>
</div>
<div class="grid-1-2">
<div class="article-footer-section">
<h2>
Other Picked Posts
</h2>
<article class="footer-article-exerpt module module-text">
<h2>
<a href="/OddlyTimbot/blog/classes-in-codepen">
Classes in Codepen
</a>
</h2>
<div class="post-content">
<p>I've been a part-time professor at a college in Toronto on and off for years. Besides this I've taught many workshops and such out of my studio, and organized a lot of...</p>
</div>
<div class="user">
<a href="/OddlyTimbot">
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/98342/profile/profile-20_2.jpg" alt="User Avatar" width="20" height="20">
Tim Willison
</a>
on
<a href="/OddlyTimbot/blog">
Tim Willison&#x27;s Blog
</a>
</div>
</article>
<article class="footer-article-exerpt module module-text">
<h2>
<a href="/somethingkindawierd/blog/jsx-is-weird">
JSX is Weird
</a>
</h2>
<div class="post-content">
<p>JSX is Weird</p><p>I'm a huge fan of Facebook's React library. So much a fan that it got me out of my comfortable bubble and out into the <a>javascript speaker circuit.</a> (Well, <a>Elijah...</a></p>
</div>
<div class="user">
<a href="/somethingkindawierd">
<img src="//gravatar.com/avatar/5468b3db7e772268b6125293c8bf2869?s=20" alt="User Avatar" width="20" height="20">
Jon Beebe
</a>
on
<a href="/somethingkindawierd/blog">
Jon Beebe&#x27;s Blog
</a>
</div>
</article>
</div>
</div>
</div>
</footer>
<input type="hidden" id="init-data" value="{&quot;__mobile&quot;:false,&quot;__cookieUsed&quot;:true,&quot;__turnOffJS&quot;:false,&quot;__user&quot;:&quot;{\&quot;id\&quot;:167883,\&quot;username\&quot;:\&quot;rayrc\&quot;,\&quot;current_team_id\&quot;:0}&quot;,&quot;__post&quot;:{&quot;hashid&quot;:&quot;DbGmKZ&quot;,&quot;title&quot;:&quot;WTF is a BootSplat vs a Bootstrap?&quot;,&quot;permalink&quot;:&quot;wtf-is-a-bootsplat&quot;,&quot;published_at&quot;:&quot;2014-11-19T00:14:55Z&quot;,&quot;last_updated&quot;:1416419452.0},&quot;__profiled&quot;:{&quot;id&quot;:167883,&quot;name&quot;:&quot;ray anthony&quot;,&quot;username&quot;:&quot;rayrc&quot;,&quot;type&quot;:&quot;user&quot;,&quot;is_team&quot;:false,&quot;base_url&quot;:&quot;/rayrc&quot;}}">
<script src="http://assets.cdpn.io/assets/common/everypage-04a150ace7d31b71fe935baebf6da7ef.js" type="text/javascript"></script>
<script src="http://assets.cdpn.io/assets/post/index-ca50cc239b50656b0797f49d336b5699.js" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment