crabcss
Version:
Small Flexbox CSS framework
2 lines • 11 kB
CSS
/*! normalize.css v3.0.3 - github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/*! Crab v0.1.5 - github.com/rampouchee/crab */*{box-sizing:border-box}body,html{background:#fff;color:#333;font-size:16px;overflow-x:hidden;overflow-y:scroll;width:100%;height:100vh}a{color:#bdc3c7;text-decoration:none;transition:all .25s ease-in-out}hr{border:0;height:1px;background:#e5e5e5}a:active,a:hover{color:#3498db}h1,h2,h3,h4,h5,h6,p,ul{margin:0;padding:0}.container h1,.container h2,.container h3,.container h4,.container h5,.container h6{padding:10px}code,pre{display:block;margin:4px 7px;padding:6px;background:#ecf0f1;color:#333;border-radius:3px;font-size:13px;white-space:nowrap}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.float-left{float:left}.float-right{float:right}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.vert-align{vertical-align:middle}.hidden{display:none}.hidden-v{visibility:hidden;opacity:0}.shown-v{visibility:visible;opacity:1}.set-block{display:block}.set-inline-block{display:inline-block}.reset-margin{margin:0}.reset-padding{padding:0}.margin-10{margin:10px}.margin-20{margin:20px}.margin-30{margin:30px}.margin-40{margin:40px}.margin-50{margin:50px}.margin-60{margin:60px}.margin-70{margin:70px}.margin-80{margin:80px}.margin-90{margin:90px}.margin-100{margin:100px}.margin-110{margin:110px}.margin-120{margin:120px}.margin-130{margin:130px}.margin-140{margin:140px}.margin-150{margin:150px}.margin-160{margin:160px}.margin-170{margin:170px}.margin-180{margin:180px}.margin-190{margin:190px}.margin-200{margin:200px}.margin-210{margin:210px}.margin-220{margin:220px}.margin-230{margin:230px}.margin-240{margin:240px}.margin-250{margin:250px}.margin-260{margin:260px}.margin-270{margin:270px}.margin-280{margin:280px}.margin-290{margin:290px}.margin-300{margin:300px}.margin-310{margin:310px}.margin-320{margin:320px}.margin-330{margin:330px}.margin-340{margin:340px}.margin-350{margin:350px}.margin-360{margin:360px}.margin-370{margin:370px}.margin-380{margin:380px}.margin-390{margin:390px}.margin-400{margin:400px}.margin-410{margin:410px}.margin-420{margin:420px}.margin-430{margin:430px}.margin-440{margin:440px}.margin-450{margin:450px}.margin-460{margin:460px}.margin-470{margin:470px}.margin-480{margin:480px}.margin-490{margin:490px}.margin-500{margin:500px}.margin-510{margin:510px}.margin-520{margin:520px}.margin-530{margin:530px}.margin-540{margin:540px}.margin-550{margin:550px}.margin-560{margin:560px}.margin-570{margin:570px}.margin-580{margin:580px}.margin-590{margin:590px}.margin-600{margin:600px}.padding-10{padding:10px}.padding-20{padding:20px}.padding-30{padding:30px}.padding-40{padding:40px}.padding-50{padding:50px}.padding-60{padding:60px}.padding-70{padding:70px}.padding-80{padding:80px}.padding-90{padding:90px}.padding-100{padding:100px}.padding-110{padding:110px}.padding-120{padding:120px}.padding-130{padding:130px}.padding-140{padding:140px}.padding-150{padding:150px}.padding-160{padding:160px}.padding-170{padding:170px}.padding-180{padding:180px}.padding-190{padding:190px}.padding-200{padding:200px}.padding-210{padding:210px}.padding-220{padding:220px}.padding-230{padding:230px}.padding-240{padding:240px}.padding-250{padding:250px}.padding-260{padding:260px}.padding-270{padding:270px}.padding-280{padding:280px}.padding-290{padding:290px}.padding-300{padding:300px}.padding-310{padding:310px}.padding-320{padding:320px}.padding-330{padding:330px}.padding-340{padding:340px}.padding-350{padding:350px}.padding-360{padding:360px}.padding-370{padding:370px}.padding-380{padding:380px}.padding-390{padding:390px}.padding-400{padding:400px}.padding-410{padding:410px}.padding-420{padding:420px}.padding-430{padding:430px}.padding-440{padding:440px}.padding-450{padding:450px}.padding-460{padding:460px}.padding-470{padding:470px}.padding-480{padding:480px}.padding-490{padding:490px}.padding-500{padding:500px}.padding-510{padding:510px}.padding-520{padding:520px}.padding-530{padding:530px}.padding-540{padding:540px}.padding-550{padding:550px}.padding-560{padding:560px}.padding-570{padding:570px}.padding-580{padding:580px}.padding-590{padding:590px}.padding-600{padding:600px}.text-green{color:#2ecc71}.text-red{color:#e74c3c}.text-violet{color:#34495e}.text-blu{color:#3498db}.text-orange{color:#f39c12}.text-yellow{color:#f1c40f}.text-wisteria{color:#8e44ad}.text-white{color:#fff}.bg-green{background:#2ecc71}.bg-red{background:#e74c3c}.bg-vio{background:#34495e}.bg-blu{background:#3498db}.bg-orange{background:#f39c12}.bg-yellow{background:#f1c40f}.bg-wisteria{background:#8e44ad}.bg-white{background:#fff}.container{margin:0 auto;max-width:960px}.row,.row-center{display:flex}.row-center{align-items:center;justify-content:center;width:100%;height:100%}.flex-top{align-self:flex-start}.flex-bottom{align-self:flex-end}.item{flex:1}.item-2{flex:2}.item-3{flex:3}.item-4{flex:4}.item-5{flex:5}.item-6{flex:6}.item-7{flex:7}.item-8{flex:8}.item-9{flex:9}.item-10{flex:10}.item-11{flex:11}.item-12{flex:12}.item-100{flex:1;max-width:100px}.item-150{flex:1;max-width:150px}.item-200{flex:1;max-width:200px}.item-250{flex:1;max-width:250px}.item-300{flex:1;max-width:300px}.item-350{flex:1;max-width:350px}.item-400{flex:1;max-width:400px}.item-450{flex:1;max-width:450px}.item-500{flex:1;max-width:500px}.item-550{flex:1;max-width:550px}.item-600{flex:1;max-width:600px}.item-650{flex:1;max-width:650px}.item-700{flex:1;max-width:700px}.item-750{flex:1;max-width:750px}.item-800{flex:1;max-width:800px}.item-850{flex:1;max-width:850px}.item-900{flex:1;max-width:900px}.item-950{flex:1;max-width:950px}.item-1000{flex:1;max-width:1000px}.item-1050{flex:1;max-width:1050px}.item-1100{flex:1;max-width:1100px}.item-1150{flex:1;max-width:1150px}.item-1200{flex:1;max-width:1200px}.item-1250{flex:1;max-width:1250px}.alert{background:#94b0b3;border-radius:3px;border:1px solid #333;display:block;width:100%;padding:13px}.alert.alert-success{background:#82e3aa;border:1px solid #2ecc71}.alert.alert-info{background:#7b99b7;border:1px solid #34495e}.alert.alert-danger{background:#f4aca4;border:1px solid #e74c3c}.box{background:#95a5a6;color:#333;display:inline-block;padding:10px;margin:5px;border-radius:3px;border:0;white-space:nowrap;vertical-align:middle;position:relative}.box.box-blu{background:#2980b9;color:#ecf0f1}.box.box-yellow{background:#f1c40f;color:#ecf0f1}.box.box-orange{background:#f39c12;color:#ecf0f1}.box.box-violet{background:#34495e;color:#ecf0f1}.box.box-green{background:#2ecc71;color:#ecf0f1}.box.box-red{background:#e74c3c;color:#ecf0f1}blockquote{margin:5px 2px;padding:10px;color:#858585;border-left:4px solid #e5e5e5}table{width:100%;height:auto}td,th{border-bottom:2px solid #e5e5e5;padding:8px 10px}.navbar{background:#clouds;border-right:1px solid #e5e5e5}.navbar li,.navbar li a{display:block}.navbar li a{color:#333;padding:10px}.navbar li a:hover{background:#333;color:#ecf0f1}.navbar ul{display:block}.navbar ul li a{display:block;padding-left:25px}.inline-navbar{background:#clouds;border-right:1px solid #e5e5e5}.inline-navbar li{display:inline-block;float:left}.inline-navbar li a{color:#333;display:block;padding:10px}.inline-navbar li a:hover{background:#333;color:#ecf0f1}.inline-navbar ul{display:inline-block}.inline-navbar ul li a{display:block;padding-left:25px}.btn{background:#95a5a6;color:#333;display:inline-block;padding:10px;margin:5px;border-radius:3px;border:0;white-space:nowrap;vertical-align:middle;cursor:pointer;position:relative}.btn.btn-info{background:#34495e;color:#ecf0f1}.btn.btn-info:hover{background:#3373b3}.btn.btn-success{background:#2ecc71;color:#ecf0f1}.btn.btn-success:hover{background:#2eb365}.btn.btn-alert{background:#e74c3c;color:#ecf0f1}.btn.btn-alert:hover{background:#b3493d}.btn:hover{background:#949999}.form-horizontal,.form-vertical{background:#ecf0f1;color:#333;margin:5px;padding:15px;border-radius:3px;border:1px solid #e5e5e5}fieldset{padding:0;margin:0;border:0}label{font-size:13px;font-weight:700}.form-input,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],select,textarea{min-height:34px;padding:5px;font-size:13px;color:#333;vertical-align:middle;background-color:#ecf0f1;border:1px solid #f5f5f5;border-radius:3px;outline:none;width:100%}.inline-input,input[type=radio]{display:inline-block}.inline-input{margin-left:8px}::placeholder{color:#777}@media screen and (max-width:960px){.container{width:auto}}@media screen and (max-width:640px){.row,.row-center{display:block}.item,.item-1,.item-2,.item-3,.item-4,.item-5,.item-6,.item-7,.item-8,.item-9,.item-10,.item-11,.item-12,.item-100,.item-150,.item-200,.item-250,.item-300,.item-350,.item-400,.item-450,.item-500,.item-550,.item-600,.item-650,.item-700,.item-750,.item-800,.item-850,.item-900,.item-950,.item-1000,.item-1050,.item-1100,.item-1150,.item-1200,.item-1250{width:100%}.inline-navbar,.navbar{display:none}}