| <div class="keep-square"> | |
| <div class="image-container"> | |
| <img class="content" src="http://www.placehold.it/300x200" alt="Image of Test" /> | |
| </div> | |
| </div> | |
| <div class="keep-square"> | |
| <div class="image-container"> | |
| <img class="content" src="http://www.placehold.it/200x300" alt="Image of Test" /> | |
| </div> |
Theses are things that you run once. The log format and PS1 are my personal preferences so may need changing up for your needs.
git config --global color.ui true
git config --global format.pretty "%C(white dim) %h %C(yellow) %ar %C(cyan) %an %Creset %s"
| // Init npm if not already | |
| npm init | |
| // Install gulp and plugins | |
| npm install gulp gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-clean gulp-concat gulp-notify gulp-cache gulp-livereload tiny-lr --save | |
| // Gulp! | |
| gulp styles | |
| gulp js | |
| gulp watch |
| /*------------------------------------*\ | |
| MEDIA QUERIES | |
| \*------------------------------------*/ | |
| /** | |
| * Wraps the content in a min width media query | |
| * | |
| `@include breakpoint(200px){ | |
| .example{ | |
| font-size: 20px; |
| <div class="g"> | |
| <div class="gi one-half">one-half</div> | |
| <div class="gi one-half">one-half</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi">1</div> | |
| <div class="gi">1</div> | |
| <div class="gi">1</div> |
| <div class="g"> | |
| <div class="gi one-half">one-half</div> | |
| <div class="gi one-half">one-half</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| <div class="gi one-quarter">one-quarter</div> | |
| </div> |
| // ---- | |
| // Sass (v3.3.7) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| $breakpoints: ( | |
| start: 0, | |
| first: (640 / 16) * 1em, | |
| second: (800 / 16) * 1em, | |
| third: (1024 / 16) * 1em |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Style Guide</title> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body class="styleguide"> |
| // Skip to content | |
| .skip-to-content{ | |
| position: absolute; | |
| clip: rect(1px, 1px, 1px, 1px); | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| &:focus{ | |
| position: static; | |
| clip: auto; |
| Apr 1st - Apr 14th | |
| # General | |
| Trains timetabling - http://www.hyperdia.com/ | |
| # Tokyo | |
| - SHINJUKU GYOEN - Cherry blossom | |
| - Ittineries - http://www.japan-guide.com/e/e3051.html | |
| - Tsukiji Fish Market | |
| - Kamakura (Giant Budda) |