skeleton.css (11428B)
1 /* 2 * Skeleton V2.0.4 3 * Copyright 2014, Dave Gamache 4 * www.getskeleton.com 5 * Free to use under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7 * 12/29/2014 8 */ 9 10 11 /* Table of contents 12 –––––––––––––––––––––––––––––––––––––––––––––––––– 13 - Grid 14 - Base Styles 15 - Typography 16 - Links 17 - Buttons 18 - Forms 19 - Lists 20 - Code 21 - Tables 22 - Spacing 23 - Utilities 24 - Clearing 25 - Media Queries 26 */ 27 28 29 /* Grid 30 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 31 .container { 32 position: relative; 33 width: 100%; 34 max-width: 960px; 35 margin: 0 auto; 36 padding: 0 20px; 37 box-sizing: border-box; } 38 .column, 39 .columns { 40 width: 100%; 41 float: left; 42 box-sizing: border-box; } 43 44 /* For devices larger than 400px */ 45 @media (min-width: 400px) { 46 .container { 47 width: 85%; 48 padding: 0; } 49 } 50 51 /* For devices larger than 550px */ 52 @media (min-width: 550px) { 53 .container { 54 width: 80%; } 55 .column, 56 .columns { 57 margin-left: 4%; } 58 .column:first-child, 59 .columns:first-child { 60 margin-left: 0; } 61 62 .one.column, 63 .one.columns { width: 4.66666666667%; } 64 .two.columns { width: 13.3333333333%; } 65 .three.columns { width: 22%; } 66 .four.columns { width: 30.6666666667%; } 67 .five.columns { width: 39.3333333333%; } 68 .six.columns { width: 48%; } 69 .seven.columns { width: 56.6666666667%; } 70 .eight.columns { width: 65.3333333333%; } 71 .nine.columns { width: 74.0%; } 72 .ten.columns { width: 82.6666666667%; } 73 .eleven.columns { width: 91.3333333333%; } 74 .twelve.columns { width: 100%; margin-left: 0; } 75 76 .one-third.column { width: 30.6666666667%; } 77 .two-thirds.column { width: 65.3333333333%; } 78 79 .one-half.column { width: 48%; } 80 81 /* Offsets */ 82 .offset-by-one.column, 83 .offset-by-one.columns { margin-left: 8.66666666667%; } 84 .offset-by-two.column, 85 .offset-by-two.columns { margin-left: 17.3333333333%; } 86 .offset-by-three.column, 87 .offset-by-three.columns { margin-left: 26%; } 88 .offset-by-four.column, 89 .offset-by-four.columns { margin-left: 34.6666666667%; } 90 .offset-by-five.column, 91 .offset-by-five.columns { margin-left: 43.3333333333%; } 92 .offset-by-six.column, 93 .offset-by-six.columns { margin-left: 52%; } 94 .offset-by-seven.column, 95 .offset-by-seven.columns { margin-left: 60.6666666667%; } 96 .offset-by-eight.column, 97 .offset-by-eight.columns { margin-left: 69.3333333333%; } 98 .offset-by-nine.column, 99 .offset-by-nine.columns { margin-left: 78.0%; } 100 .offset-by-ten.column, 101 .offset-by-ten.columns { margin-left: 86.6666666667%; } 102 .offset-by-eleven.column, 103 .offset-by-eleven.columns { margin-left: 95.3333333333%; } 104 105 .offset-by-one-third.column, 106 .offset-by-one-third.columns { margin-left: 34.6666666667%; } 107 .offset-by-two-thirds.column, 108 .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } 109 110 .offset-by-one-half.column, 111 .offset-by-one-half.columns { margin-left: 52%; } 112 113 } 114 115 116 /* Base Styles 117 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 118 /* NOTE 119 html is set to 62.5% so that all the REM measurements throughout Skeleton 120 are based on 10px sizing. So basically 1.5rem = 15px :) */ 121 html { 122 font-size: 62.5%; } 123 body { 124 min-height: 800px; 125 font-size: 1.6em; /* currently ems cause chrome bug misinterpreting rems on body element */ 126 line-height: 1.6; 127 font-weight: 400; 128 color: #222; } 129 130 131 /* Typography 132 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 133 h1, h2, h3, h4, h5, h6 { 134 margin-top: 0; 135 margin-bottom: 2rem; 136 font-weight: 300; } 137 h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} 138 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 139 h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 140 h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 141 h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.08rem; } 142 h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 143 144 /* Larger than phablet */ 145 @media (min-width: 550px) { 146 h1 { font-size: 5.0rem; } 147 h2 { font-size: 4.2rem; } 148 h3 { font-size: 3.6rem; } 149 h4 { font-size: 3.0rem; } 150 h5 { font-size: 2.4rem; } 151 h6 { font-size: 1.5rem; } 152 } 153 154 p { 155 margin-top: 0; } 156 157 158 /* Links 159 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 160 a { 161 color: #0595ad; 162 text-decoration: none; 163 } 164 a:hover { 165 color: #9BBDF2; 166 } 167 168 169 /* Buttons 170 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 171 .button, 172 button, 173 input[type="submit"], 174 input[type="reset"], 175 input[type="button"] { 176 display: inline-block; 177 height: 38px; 178 padding: 0 30px; 179 color: white; 180 text-align: center; 181 font-size: 11px; 182 font-weight: 600; 183 line-height: 38px; 184 letter-spacing: .1rem; 185 text-transform: uppercase; 186 text-decoration: none; 187 white-space: nowrap; 188 background-color: transparent; 189 border-radius: 4px; 190 border: 1px solid #bbb; 191 cursor: pointer; 192 box-sizing: border-box; } 193 .button:hover, 194 button:hover, 195 input[type="submit"]:hover, 196 input[type="reset"]:hover, 197 input[type="button"]:hover, 198 .button:focus, 199 button:focus, 200 input[type="submit"]:focus, 201 input[type="reset"]:focus, 202 input[type="button"]:focus { 203 color: #999; 204 border-color: #999; 205 outline: 0; } 206 .button.button-primary, 207 button.button-primary, 208 input[type="submit"].button-primary, 209 input[type="reset"].button-primary, 210 input[type="button"].button-primary { 211 color: #FFF; 212 background-color: #33C3F0; 213 border-color: #33C3F0; } 214 .button.button-primary:hover, 215 button.button-primary:hover, 216 input[type="submit"].button-primary:hover, 217 input[type="reset"].button-primary:hover, 218 input[type="button"].button-primary:hover, 219 .button.button-primary:focus, 220 button.button-primary:focus, 221 input[type="submit"].button-primary:focus, 222 input[type="reset"].button-primary:focus, 223 input[type="button"].button-primary:focus { 224 color: #FFF; 225 background-color: #1EAEDB; 226 border-color: #1EAEDB; } 227 228 229 /* Forms 230 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 231 input[type="email"], 232 input[type="number"], 233 input[type="search"], 234 input[type="text"], 235 input[type="tel"], 236 input[type="url"], 237 input[type="password"], 238 textarea, 239 select { 240 height: 38px; 241 padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 242 background-color: #fff; 243 border: 1px solid #D1D1D1; 244 border-radius: 4px; 245 box-shadow: none; 246 box-sizing: border-box; } 247 /* Removes awkward default styles on some inputs for iOS */ 248 input[type="email"], 249 input[type="number"], 250 input[type="search"], 251 input[type="text"], 252 input[type="tel"], 253 input[type="url"], 254 input[type="password"], 255 textarea { 256 -webkit-appearance: none; 257 -moz-appearance: none; 258 appearance: none; } 259 textarea { 260 min-height: 65px; 261 padding-top: 6px; 262 padding-bottom: 6px; } 263 input[type="email"]:focus, 264 input[type="number"]:focus, 265 input[type="search"]:focus, 266 input[type="text"]:focus, 267 input[type="tel"]:focus, 268 input[type="url"]:focus, 269 input[type="password"]:focus, 270 textarea:focus, 271 select:focus { 272 border: 1px solid #33C3F0; 273 outline: 0; } 274 label, 275 legend { 276 /* display: block; */ 277 margin-bottom: .5rem; 278 /* font-weight: 600; */ } 279 fieldset { 280 padding: 0; 281 border-width: 0; } 282 input[type="checkbox"], 283 input[type="radio"] { 284 display: inline; } 285 label > .label-body { 286 display: inline-block; 287 margin-left: .5rem; 288 font-weight: normal; } 289 290 291 /* Lists 292 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 293 ul { 294 list-style: circle inside; } 295 ol { 296 list-style: decimal inside; } 297 ol, ul { 298 padding-left: 0; 299 margin-top: 0; } 300 ul ul, 301 ul ol, 302 ol ol, 303 ol ul { 304 margin: 1.5rem 0 1.5rem 3rem; 305 font-size: 90%; } 306 li { 307 margin-bottom: 0.2rem; } 308 309 310 /* Code 311 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 312 code { 313 padding: .2rem .5rem; 314 margin: 0 .2rem; 315 font-size: 90%; 316 white-space: nowrap; 317 background: #F1F1F1; 318 border: 1px solid #E1E1E1; 319 border-radius: 4px; } 320 pre > code { 321 display: block; 322 padding: 1rem 1.5rem; 323 white-space: pre; } 324 325 326 /* Tables 327 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 328 th, 329 td { 330 padding: 12px 15px; 331 text-align: left; 332 border-bottom: 1px solid #E1E1E1; } 333 th:first-child, 334 td:first-child { 335 padding-left: 0; } 336 th:last-child, 337 td:last-child { 338 padding-right: 0; } 339 340 341 /* Spacing 342 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 343 button, 344 .button { 345 margin-bottom: 1rem; } 346 input, 347 textarea, 348 select, 349 fieldset { 350 margin-bottom: 1.5rem; } 351 pre, 352 blockquote, 353 dl, 354 figure, 355 table, 356 p, 357 ul, 358 ol, 359 form { 360 margin-bottom: 2.5rem; } 361 362 363 /* Utilities 364 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 365 .u-full-width { 366 width: 100%; 367 box-sizing: border-box; } 368 .u-max-full-width { 369 max-width: 100%; 370 box-sizing: border-box; } 371 .u-pull-right { 372 float: right; } 373 .u-pull-left { 374 float: left; } 375 376 377 /* Misc 378 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 379 hr { 380 margin-top: 3rem; 381 margin-bottom: 3.5rem; 382 border-width: 0; 383 border-top: 1px solid #E1E1E1; } 384 385 386 /* Clearing 387 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 388 389 /* Self Clearing Goodness */ 390 .container:after, 391 .row:after, 392 .u-cf { 393 content: ""; 394 display: table; 395 clear: both; } 396 397 398 /* Media Queries 399 –––––––––––––––––––––––––––––––––––––––––––––––––– */ 400 /* 401 Note: The best way to structure the use of media queries is to create the queries 402 near the relevant code. For example, if you wanted to change the styles for buttons 403 on small devices, paste the mobile query code up in the buttons section and style it 404 there. 405 */ 406 407 408 /* Larger than mobile */ 409 @media (min-width: 400px) {} 410 411 /* Larger than phablet (also point when grid becomes active) */ 412 @media (min-width: 550px) {} 413 414 /* Larger than tablet */ 415 @media (min-width: 750px) {} 416 417 /* Larger than desktop */ 418 @media (min-width: 1000px) {} 419 420 /* Larger than Desktop HD */ 421 @media (min-width: 1200px) {}