├── .gitignore ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/osx,codekit,jekyll 3 | 4 | ### OSX ### 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | 13 | # Thumbnails 14 | ._* 15 | 16 | # Files that might appear in the root of a volume 17 | .DocumentRevisions-V100 18 | .fseventsd 19 | .Spotlight-V100 20 | .TemporaryItems 21 | .Trashes 22 | .VolumeIcon.icns 23 | 24 | # Directories potentially created on remote AFP share 25 | .AppleDB 26 | .AppleDesktop 27 | Network Trash Folder 28 | Temporary Items 29 | .apdisk 30 | 31 | 32 | ### CodeKit ### 33 | # General CodeKit files to ignore 34 | config.codekit 35 | /min 36 | 37 | 38 | ### Jekyll ### 39 | _site/ 40 | .sass-cache/ 41 | .jekyll-metadata 42 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DevTips Starter Kit 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

DevTips
Starter Kit

16 |

Ground zero for your next project.

17 | 18 | Download Now 19 | 20 | Fork Me on GitHub 21 | 22 |
23 | 24 |
25 | 26 |
27 |

Watch the Video

28 |
29 |
30 | 31 |
32 |
33 |
34 | 35 |
36 |

Brought to you by

37 |
38 | 39 |
40 | Travis Neilson 41 |
42 | @DevTipsShow 43 |
44 |
45 |
46 | 47 |
48 | 49 | 
50 |     DevTips-Starter-Kit
51 |     | -- assets/
52 |     |   | -- css/
53 |     |   |   | -- 1-tools/
54 |     |   |   |   | -- bourbon/
55 |     |   |   |   | -- fonts.sass
56 |     |   |   |   | -- normalize.sass
57 |     |   |   |   | -- vars.sass
58 |     |   |   | -- 2-basics/
59 |     |   |   |   | -- body-elements.sass
60 |     |   |   |   | -- links.sass
61 |     |   |   |   | -- selection-colors.sass
62 |     |   |   |   | -- typography.sass
63 |     |   |   | -- 3-modules/
64 |     |   |   |   | -- example-module.sass
65 |     |   |   |   | -- example-module.sass
66 |     |   |   | -- 4-pages/
67 |     |   |   |   | -- example-page.sass
68 |     |   |   | -- main.sass
69 |     |   | -- js/
70 |     |   |   | -- jquery.js
71 |     |   |   | -- functions.js
72 |     |   | -- img/
73 |     | -- favicon.ico
74 |     | -- readme.md
75 |     | -- index.html
76 |
77 | 78 |
79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Fira Sans'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local("Fira Sans"), local("FiraSans-Regular"), url(http://fonts.gstatic.com/s/firasans/v5/EjsrzDkQUQCDwsBtLpcVQZBw1xU1rKptJj_0jans920.woff2) format("woff2"); 6 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } 7 | @font-face { 8 | font-family: 'Fira Sans'; 9 | font-style: normal; 10 | font-weight: 700; 11 | src: local("Fira Sans Bold"), local("FiraSans-Bold"), url(http://fonts.gstatic.com/s/firasans/v5/DugPdSljmOTocZOR2CItOhampu5_7CjHW5spxoeN3Vs.woff2) format("woff2"); 12 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } 13 | @font-face { 14 | font-family: 'Fira Mono'; 15 | font-style: normal; 16 | font-weight: 400; 17 | src: local("Fira Mono"), local("FiraMono"), url(http://fonts.gstatic.com/s/firamono/v3/SlRWfq1zeqXiYWAN-lnG-pBw1xU1rKptJj_0jans920.woff2) format("woff2"); 18 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } 19 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 20 | html { 21 | font-family: sans-serif; 22 | -ms-text-size-adjust: 100%; 23 | -webkit-text-size-adjust: 100%; } 24 | 25 | body { 26 | margin: 0; } 27 | 28 | article, 29 | aside, 30 | details, 31 | figcaption, 32 | figure, 33 | footer, 34 | header, 35 | hgroup, 36 | main, 37 | menu, 38 | nav, 39 | section, 40 | summary { 41 | display: block; } 42 | 43 | audio, 44 | canvas, 45 | progress, 46 | video { 47 | display: inline-block; 48 | vertical-align: baseline; } 49 | 50 | audio:not([controls]) { 51 | display: none; 52 | height: 0; } 53 | 54 | [hidden], 55 | template { 56 | display: none; } 57 | 58 | a { 59 | background-color: transparent; } 60 | 61 | a:active, 62 | a:hover { 63 | outline: 0; } 64 | 65 | abbr[title] { 66 | border-bottom: 1px dotted; } 67 | 68 | b, 69 | strong { 70 | font-weight: bold; } 71 | 72 | dfn { 73 | font-style: italic; } 74 | 75 | h1 { 76 | font-size: 2em; 77 | margin: 0.67em 0; } 78 | 79 | mark { 80 | background: #ff0; 81 | color: #000; } 82 | 83 | small { 84 | font-size: 80%; } 85 | 86 | sub, 87 | sup { 88 | font-size: 75%; 89 | line-height: 0; 90 | position: relative; 91 | vertical-align: baseline; } 92 | 93 | sup { 94 | top: -0.5em; } 95 | 96 | sub { 97 | bottom: -0.25em; } 98 | 99 | img { 100 | border: 0; } 101 | 102 | svg:not(:root) { 103 | overflow: hidden; } 104 | 105 | figure { 106 | margin: 1em 40px; } 107 | 108 | hr { 109 | -moz-box-sizing: content-box; 110 | box-sizing: content-box; 111 | height: 0; } 112 | 113 | pre { 114 | overflow: auto; } 115 | 116 | code, 117 | kbd, 118 | pre, 119 | samp { 120 | font-family: monospace, monospace; 121 | font-size: 1em; } 122 | 123 | button, 124 | input, 125 | optgroup, 126 | select, 127 | textarea { 128 | color: inherit; 129 | font: inherit; 130 | margin: 0; } 131 | 132 | button { 133 | overflow: visible; } 134 | 135 | button, 136 | select { 137 | text-transform: none; } 138 | 139 | button, 140 | html input[type="button"], 141 | input[type="reset"], 142 | input[type="submit"] { 143 | -webkit-appearance: button; 144 | cursor: pointer; } 145 | 146 | button[disabled], 147 | html input[disabled] { 148 | cursor: default; } 149 | 150 | button::-moz-focus-inner, 151 | input::-moz-focus-inner { 152 | border: 0; 153 | padding: 0; } 154 | 155 | input { 156 | line-height: normal; } 157 | 158 | input[type="checkbox"], 159 | input[type="radio"] { 160 | box-sizing: border-box; 161 | padding: 0; } 162 | 163 | input[type="number"]::-webkit-inner-spin-button, 164 | input[type="number"]::-webkit-outer-spin-button { 165 | height: auto; } 166 | 167 | input[type="search"] { 168 | -webkit-appearance: textfield; 169 | -moz-box-sizing: content-box; 170 | -webkit-box-sizing: content-box; 171 | box-sizing: content-box; } 172 | 173 | input[type="search"]::-webkit-search-cancel-button, 174 | input[type="search"]::-webkit-search-decoration { 175 | -webkit-appearance: none; } 176 | 177 | fieldset { 178 | border: 1px solid #c0c0c0; 179 | margin: 0 2px; 180 | padding: 0.35em 0.625em 0.75em; } 181 | 182 | legend { 183 | border: 0; 184 | padding: 0; } 185 | 186 | textarea { 187 | overflow: auto; } 188 | 189 | optgroup { 190 | font-weight: bold; } 191 | 192 | table { 193 | border-collapse: collapse; 194 | border-spacing: 0; } 195 | 196 | td, 197 | th { 198 | padding: 0; } 199 | 200 | body { 201 | background-color: white; 202 | font-size: 14px; 203 | line-height: 1.6; 204 | font-family: "Fira Sans", sans-serif; 205 | color: #666; 206 | -webkit-font-smoothing: antialiased; 207 | -webkit-text-size-adjust: 100%; } 208 | 209 | ::selection { 210 | background: #FFF498; } 211 | 212 | ::-moz-selection { 213 | background: #FFF498; } 214 | 215 | img::selection { 216 | background: transparent; } 217 | 218 | img::-moz-selection { 219 | background: transparent; } 220 | 221 | body { 222 | -webkit-tap-highlight-color: #FFF498; } 223 | 224 | a { 225 | color: #0074D9; 226 | text-decoration: none; 227 | outline: 0; } 228 | a:hover, a:focus { 229 | color: #40a6ff; } 230 | 231 | .gigantic, .huge, .large, .bigger, .big, 232 | h1, h2, h3, h4, h5, h6 { 233 | color: #222; 234 | font-weight: bold; } 235 | 236 | .gigantic { 237 | font-size: 110px; 238 | line-height: 1.09; 239 | letter-spacing: -2px; } 240 | 241 | .huge, h1 { 242 | font-size: 68px; 243 | line-height: 1.05; 244 | letter-spacing: -1px; } 245 | 246 | .large, h2 { 247 | font-size: 42px; 248 | line-height: 1.14; } 249 | 250 | .bigger, h3 { 251 | font-size: 26px; 252 | line-height: 1.38; } 253 | 254 | .big, h4 { 255 | font-size: 22px; 256 | line-height: 1.38; } 257 | 258 | .small, small { 259 | font-size: 10px; 260 | line-height: 1.2; } 261 | 262 | p { 263 | margin: 0 0 20px 0; } 264 | 265 | em { 266 | font-style: italic; } 267 | 268 | strong { 269 | font-weight: bold; } 270 | 271 | hr { 272 | border: solid #ddd; 273 | border-width: 1px 0 0; 274 | clear: both; 275 | margin: 10px 0 30px; 276 | height: 0; } 277 | 278 | .button, 279 | button, 280 | input[type="submit"], 281 | input[type="reset"], 282 | input[type="button"] { 283 | display: inline-block; 284 | height: 38px; 285 | padding: 0 30px; 286 | color: #555; 287 | text-align: center; 288 | font-size: 11px; 289 | font-weight: 600; 290 | line-height: 38px; 291 | letter-spacing: 0.1rem; 292 | text-transform: uppercase; 293 | text-decoration: none; 294 | white-space: nowrap; 295 | background-color: transparent; 296 | border-radius: 4px; 297 | border: 1px solid #bbb; 298 | cursor: pointer; 299 | box-sizing: border-box; } 300 | .button:hover, .button:active, .button:focus, 301 | button:hover, 302 | button:active, 303 | button:focus, 304 | input[type="submit"]:hover, 305 | input[type="submit"]:active, 306 | input[type="submit"]:focus, 307 | input[type="reset"]:hover, 308 | input[type="reset"]:active, 309 | input[type="reset"]:focus, 310 | input[type="button"]:hover, 311 | input[type="button"]:active, 312 | input[type="button"]:focus { 313 | color: #333; 314 | border-color: #888; 315 | outline: 0; } 316 | 317 | .name-lockup { 318 | display: -webkit-inline-box; 319 | display: -webkit-inline-flex; 320 | display: -ms-inline-flexbox; 321 | display: inline-flex; 322 | -webkit-box-align: center; 323 | -webkit-align-items: center; 324 | -ms-flex-align: center; 325 | align-items: center; } 326 | 327 | .avatar { 328 | width: 80px; 329 | height: 80px; 330 | border-radius: 50%; 331 | margin-right: 10px; 332 | -webkit-flex-shrink: 0; 333 | -ms-flex-negative: 0; 334 | flex-shrink: 0; } 335 | 336 | .fork-tag { 337 | position: absolute; 338 | top: 10px; 339 | right: -10px; 340 | background: #0074D9; 341 | color: white; 342 | padding: 2px 6px; 343 | transition: all 0.3s ease-in-out; 344 | transform-origin: top right; } 345 | .fork-tag:hover { 346 | color: white; 347 | animation: wiggle 0.4s linear 1; } 348 | 349 | @keyframes wiggle { 350 | 0% { 351 | transform: rotate(0deg); } 352 | 20% { 353 | transform: rotate(8deg); } 354 | 50% { 355 | transform: rotate(-8deg); } 356 | 80% { 357 | transform: rotate(8deg); } 358 | 100% { 359 | transform: rotate(0deg); } } 360 | .flex-video { 361 | height: 0; 362 | margin-bottom: 0.88889rem; 363 | overflow: hidden; 364 | padding-bottom: 56%; 365 | position: relative; } 366 | 367 | .flex-video iframe, 368 | .flex-video object, 369 | .flex-video embed, 370 | .flex-video video { 371 | height: 100%; 372 | position: absolute; 373 | top: 0; 374 | width: 100%; 375 | left: 0; } 376 | 377 | body { 378 | margin: 10px; 379 | background-color: #ddd; 380 | overflow-x: hidden; } 381 | 382 | .page-home { 383 | text-align: center; } 384 | .page-home section { 385 | max-width: 600px; 386 | margin: 50px auto; 387 | padding: 40px; 388 | position: relative; 389 | background-color: rgba(255, 255, 255, 0.7); 390 | box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } 391 | .page-home section:first-child { 392 | background-image: url(../img/tools.png); 393 | background-position: center; } 394 | .page-home section h1 { 395 | font-weight: 700; 396 | line-height: 1; 397 | margin: 20px 0; 398 | letter-spacing: 1px; } 399 | .page-home img { 400 | max-width: 100%; } 401 | .page-home .flex-video-wrap { 402 | max-width: 640px; 403 | display: inline-block; 404 | width: 100%; } 405 | .page-home pre { 406 | text-align: left; 407 | font-family: "Fira Mono", monospace; 408 | font-size: 30px; 409 | color: #d0d0d0; 410 | position: absolute; 411 | top: -50px; 412 | left: -50px; 413 | z-index: -1; 414 | pointer-events: none; } 415 | @media (max-width: 500px) { 416 | .page-home pre { 417 | font-size: 20px; } } 418 | .page-home article { 419 | margin-bottom: 50px; } 420 | .page-home article:last-child { 421 | margin-bottom: 0px; } 422 | 423 | 424 | body { 425 | background: lavender; 426 | } 427 | --------------------------------------------------------------------------------