Sublime Text 2 ships with a CLI called subl (why not "sublime", go figure). This utility is hidden in the following folder (assuming you installed Sublime in /Applications like normal folk. If this following line opens Sublime Text for you, then bingo, you're ready.
open /Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl
You can find more (official) details about subl here: http://www.sublimetext.com/docs/2/osx_command_line.html
For this tutorial I'm assuming you are already comfortable with CSS, Sass (I'll use the SCSS syntax) and Compass. Please get set up with each one of those before attempting to use Susy. Sass and Compass both have their own setup instructions and tutorials that you can use.
There is also reference documentation in the works.
CSS Systems
Prereq:
apt-get install zsh
apt-get install git-coreGetting zsh to work in ubuntu is weird, since sh does not understand the source command. So, you do this to install zsh
wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh
| #!/bin/sh | |
| ### | |
| # SOME COMMANDS WILL NOT WORK ON macOS (Sierra or newer) | |
| # For Sierra or newer, see https://github.com/mathiasbynens/dotfiles/blob/master/.macos | |
| ### | |
| # Alot of these configs have been taken from the various places | |
| # on the web, most from here | |
| # https://github.com/mathiasbynens/dotfiles/blob/5b3c8418ed42d93af2e647dc9d122f25cc034871/.osx |
| @include keyframe(fadeout) { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } |
| // Create the var according to your needs : | |
| var wrappedImg = $('[higher-selector-that-contains-img]').find('img') | |
| wrappedImg.closest('p > *').unwrap(); //Allow p suppression even if the structure changes - i.e if you put link on your img | |
| // Exemple : | |
| // var wrappedImg = $('section').find('img') | |
| // wrappedImg .unwrap('p'); |
| <table> | |
| <thead> | |
| <tr> | |
| <th scope="col">Name</th> | |
| <th scope="col">Email</th> | |
| <th scope="col">Dept, Title</th> | |
| <th scope="col">Phone</th> | |
| </tr> | |
| </thead> | |
| <tbody> |
| .map { | |
| display: block; | |
| overflow: hidden; | |
| } | |
| .map span{ | |
| display: block; | |
| height: 250px; | |
| background:url(../img/map.jpg) no-repeat top left; | |
| transition: transform 0.2s linear 0s; |
| Title | |
| # h1 | |
| ## h2 | |
| ### h3 | |
| #### h4 | |
| ##### h5 | |
| ###### h6 | |
I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.
From Require.js - Why AMD:
The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"
I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.